@won-ui/core
Version:
학습을 위한 ui library 입니다.
1,679 lines (1,631 loc) • 50.5 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.tsx
var src_exports = {};
__export(src_exports, {
Button: () => Button,
Checkbox: () => Checkbox,
Heading: () => Heading,
IconActivator: () => IconActivator,
Input: () => Input,
InputBox: () => InputBox,
Modal: () => Modal,
Overlay: () => Overlay,
Pagination: () => Pagination,
Stack: () => Stack,
Switch: () => Switch,
Tag: () => Tag,
Text: () => Text,
TextInput: () => TextInput
});
module.exports = __toCommonJS(src_exports);
// src/Button/Button.style.ts
var import_react = require("@emotion/react");
var import_styles = require("@won-ui/styles");
var getVariantStyle = (color, variant) => {
const variants = {
filled: import_react.css`
border: 2px solid transparent;
box-shadow: 0px 3px 3px ${color[20]};
background-color: ${color[60]};
color: ${color[10]};
`,
light: import_react.css`
border: 2px solid transparent;
box-shadow: 0px 3px 3px ${color[20]};
background-color: ${color[10]};
color: ${color[60]};
`,
outline: import_react.css`
border: 1px solid ${color[60]};
box-shadow: 0px 3px 3px ${color[20]};
background-color: transparent;
color: ${color[60]};
`,
borderless: import_react.css`
border: 2px solid transparent;
background-color: transparent;
box-shadow: none;
color: ${color[60]};
`
};
return variants[variant];
};
var buttonStyle = (theme, variant, disalbed) => {
const color = import_styles.wonColor[theme];
const variantStyle = getVariantStyle(color, variant);
return [
variantStyle,
import_react.css`
box-sizing: border-box;
font-family: Charcoal, sans-serif;
outline: 0;
padding: 0 15px;
height: 30px;
border-radius: 6px;
font-weight: bold;
font-size: 14px;
cursor: pointer;
user-select: none;
letter-spacing: 0.5px;
transition: transform 0.1s ease 0s;
&:active {
transform: translateY(3px);
}
&:disabled {
border: none;
box-shadow: none;
transform: none;
pointer-events: none;
color: ${color[10]};
background-color: ${color[20]};
}
`
];
};
// src/Button/Button.tsx
var import_jsx_dev_runtime = require("@emotion/react/jsx-dev-runtime");
function Button({
className,
type = "button",
disabled = false,
color = "blue",
children,
variant = "filled",
...restProps
}) {
return /* @__PURE__ */ (0, import_jsx_dev_runtime.jsxDEV)("button", {
className,
css: buttonStyle(color, variant, disabled),
disabled,
type,
...restProps,
children
}, void 0, false, {
fileName: "src/Button/Button.tsx",
lineNumber: 23,
columnNumber: 5
}, this);
}
Button.displayName = "WON-Button";
// src/Checkbox/Checkbox.tsx
var import_hooks = require("@won-ui/hooks");
// ../../node_modules/phosphor-react/dist/lib/index.esm.js
var import_react2 = require("react");
var IconContext = /* @__PURE__ */ (0, import_react2.createContext)({
color: "currentColor",
size: "1em",
weight: "regular",
mirrored: false
});
var renderPathForWeight = function renderPathForWeight2(weight, color, pathsByWeight6) {
var path = pathsByWeight6.get(weight);
if (!!path)
return path(color);
console.error('Unsupported icon weight. Choose from "thin", "light", "regular", "bold", "fill", or "duotone".');
return null;
};
// ../../node_modules/phosphor-react/dist/lib/IconBase.esm.js
var import_react3 = __toESM(require("react"));
// ../../node_modules/phosphor-react/dist/_virtual/_rollupPluginBabelHelpers.js
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null)
return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0)
continue;
target[key] = source[key];
}
return target;
}
// ../../node_modules/phosphor-react/dist/lib/IconBase.esm.js
var IconBase = /* @__PURE__ */ (0, import_react3.forwardRef)(function(props, ref) {
var alt = props.alt, color = props.color, size = props.size, weight = props.weight, mirrored = props.mirrored, children = props.children, renderPath11 = props.renderPath, restProps = _objectWithoutPropertiesLoose(props, ["alt", "color", "size", "weight", "mirrored", "children", "renderPath"]);
var _useContext = (0, import_react3.useContext)(IconContext), _useContext$color = _useContext.color, contextColor = _useContext$color === void 0 ? "currentColor" : _useContext$color, contextSize = _useContext.size, _useContext$weight = _useContext.weight, contextWeight = _useContext$weight === void 0 ? "regular" : _useContext$weight, _useContext$mirrored = _useContext.mirrored, contextMirrored = _useContext$mirrored === void 0 ? false : _useContext$mirrored, restContext = _objectWithoutPropertiesLoose(_useContext, ["color", "size", "weight", "mirrored"]);
return import_react3.default.createElement("svg", Object.assign({
ref,
xmlns: "http://www.w3.org/2000/svg",
width: size != null ? size : contextSize,
height: size != null ? size : contextSize,
fill: color != null ? color : contextColor,
viewBox: "0 0 256 256",
transform: mirrored || contextMirrored ? "scale(-1, 1)" : void 0
}, restContext, restProps), !!alt && import_react3.default.createElement("title", null, alt), children, import_react3.default.createElement("rect", {
width: "256",
height: "256",
fill: "none"
}), renderPath11(weight != null ? weight : contextWeight, color != null ? color : contextColor));
});
IconBase.displayName = "IconBase";
var IconBase_esm_default = IconBase;
// ../../node_modules/phosphor-react/dist/icons/CaretLeft.esm.js
var import_react4 = __toESM(require("react"));
var pathsByWeight = /* @__PURE__ */ new Map();
pathsByWeight.set("bold", function(color) {
return import_react4.default.createElement(import_react4.default.Fragment, null, import_react4.default.createElement("polyline", {
points: "160 208 80 128 160 48",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "24"
}));
});
pathsByWeight.set("duotone", function(color) {
return import_react4.default.createElement(import_react4.default.Fragment, null, import_react4.default.createElement("polygon", {
points: "160 208 80 128 160 48 160 208",
opacity: "0.2"
}), import_react4.default.createElement("polygon", {
points: "160 208 80 128 160 48 160 208",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "16"
}));
});
pathsByWeight.set("fill", function() {
return import_react4.default.createElement(import_react4.default.Fragment, null, import_react4.default.createElement("path", {
d: "M163.1,40.6a8.4,8.4,0,0,0-8.8,1.7l-80,80a8.1,8.1,0,0,0,0,11.4l80,80A8.3,8.3,0,0,0,160,216a8.5,8.5,0,0,0,3.1-.6A8,8,0,0,0,168,208V48A8,8,0,0,0,163.1,40.6Z"
}));
});
pathsByWeight.set("light", function(color) {
return import_react4.default.createElement(import_react4.default.Fragment, null, import_react4.default.createElement("polyline", {
points: "160 208 80 128 160 48",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "12"
}));
});
pathsByWeight.set("thin", function(color) {
return import_react4.default.createElement(import_react4.default.Fragment, null, import_react4.default.createElement("polyline", {
points: "160 208 80 128 160 48",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "8"
}));
});
pathsByWeight.set("regular", function(color) {
return import_react4.default.createElement(import_react4.default.Fragment, null, import_react4.default.createElement("polyline", {
points: "160 208 80 128 160 48",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "16"
}));
});
var renderPath = function renderPath2(weight, color) {
return renderPathForWeight(weight, color, pathsByWeight);
};
var CaretLeft = /* @__PURE__ */ (0, import_react4.forwardRef)(function(props, ref) {
return import_react4.default.createElement(IconBase_esm_default, Object.assign({
ref
}, props, {
renderPath
}));
});
CaretLeft.displayName = "CaretLeft";
var CaretLeft_esm_default = CaretLeft;
// ../../node_modules/phosphor-react/dist/icons/CaretRight.esm.js
var import_react5 = __toESM(require("react"));
var pathsByWeight2 = /* @__PURE__ */ new Map();
pathsByWeight2.set("bold", function(color) {
return import_react5.default.createElement(import_react5.default.Fragment, null, import_react5.default.createElement("polyline", {
points: "96 48 176 128 96 208",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "24"
}));
});
pathsByWeight2.set("duotone", function(color) {
return import_react5.default.createElement(import_react5.default.Fragment, null, import_react5.default.createElement("polygon", {
points: "96 48 176 128 96 208 96 48",
opacity: "0.2"
}), import_react5.default.createElement("polygon", {
points: "96 48 176 128 96 208 96 48",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "16"
}));
});
pathsByWeight2.set("fill", function() {
return import_react5.default.createElement(import_react5.default.Fragment, null, import_react5.default.createElement("path", {
d: "M181.7,122.3l-80-80a8.4,8.4,0,0,0-8.8-1.7A8,8,0,0,0,88,48V208a8,8,0,0,0,4.9,7.4,8.5,8.5,0,0,0,3.1.6,8.3,8.3,0,0,0,5.7-2.3l80-80A8.1,8.1,0,0,0,181.7,122.3Z"
}));
});
pathsByWeight2.set("light", function(color) {
return import_react5.default.createElement(import_react5.default.Fragment, null, import_react5.default.createElement("polyline", {
points: "96 48 176 128 96 208",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "12"
}));
});
pathsByWeight2.set("thin", function(color) {
return import_react5.default.createElement(import_react5.default.Fragment, null, import_react5.default.createElement("polyline", {
points: "96 48 176 128 96 208",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "8"
}));
});
pathsByWeight2.set("regular", function(color) {
return import_react5.default.createElement(import_react5.default.Fragment, null, import_react5.default.createElement("polyline", {
points: "96 48 176 128 96 208",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "16"
}));
});
var renderPath3 = function renderPath4(weight, color) {
return renderPathForWeight(weight, color, pathsByWeight2);
};
var CaretRight = /* @__PURE__ */ (0, import_react5.forwardRef)(function(props, ref) {
return import_react5.default.createElement(IconBase_esm_default, Object.assign({
ref
}, props, {
renderPath: renderPath3
}));
});
CaretRight.displayName = "CaretRight";
var CaretRight_esm_default = CaretRight;
// ../../node_modules/phosphor-react/dist/icons/Check.esm.js
var import_react6 = __toESM(require("react"));
var pathsByWeight3 = /* @__PURE__ */ new Map();
pathsByWeight3.set("bold", function(color) {
return import_react6.default.createElement(import_react6.default.Fragment, null, import_react6.default.createElement("polyline", {
points: "216 72 104 184 48 128",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "24"
}));
});
pathsByWeight3.set("duotone", function(color) {
return import_react6.default.createElement(import_react6.default.Fragment, null, import_react6.default.createElement("polyline", {
points: "216 72 104 184 48 128",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "16"
}));
});
pathsByWeight3.set("fill", function() {
return import_react6.default.createElement(import_react6.default.Fragment, null, import_react6.default.createElement("path", {
d: "M104,192a8.5,8.5,0,0,1-5.7-2.3l-56-56a8.1,8.1,0,0,1,11.4-11.4L104,172.7,210.3,66.3a8.1,8.1,0,0,1,11.4,11.4l-112,112A8.5,8.5,0,0,1,104,192Z"
}));
});
pathsByWeight3.set("light", function(color) {
return import_react6.default.createElement(import_react6.default.Fragment, null, import_react6.default.createElement("polyline", {
points: "216 72 104 184 48 128",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "12"
}));
});
pathsByWeight3.set("thin", function(color) {
return import_react6.default.createElement(import_react6.default.Fragment, null, import_react6.default.createElement("polyline", {
points: "216 72 104 184 48 128",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "8"
}));
});
pathsByWeight3.set("regular", function(color) {
return import_react6.default.createElement(import_react6.default.Fragment, null, import_react6.default.createElement("polyline", {
points: "216 72 104 184 48 128",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "16"
}));
});
var renderPath5 = function renderPath6(weight, color) {
return renderPathForWeight(weight, color, pathsByWeight3);
};
var Check = /* @__PURE__ */ (0, import_react6.forwardRef)(function(props, ref) {
return import_react6.default.createElement(IconBase_esm_default, Object.assign({
ref
}, props, {
renderPath: renderPath5
}));
});
Check.displayName = "Check";
var Check_esm_default = Check;
// ../../node_modules/phosphor-react/dist/icons/DotsThree.esm.js
var import_react7 = __toESM(require("react"));
var pathsByWeight4 = /* @__PURE__ */ new Map();
pathsByWeight4.set("bold", function() {
return import_react7.default.createElement(import_react7.default.Fragment, null, import_react7.default.createElement("circle", {
cx: "128",
cy: "128",
r: "16"
}), import_react7.default.createElement("circle", {
cx: "64",
cy: "128",
r: "16"
}), import_react7.default.createElement("circle", {
cx: "192",
cy: "128",
r: "16"
}));
});
pathsByWeight4.set("duotone", function() {
return import_react7.default.createElement(import_react7.default.Fragment, null, import_react7.default.createElement("circle", {
cx: "128",
cy: "128",
r: "12"
}), import_react7.default.createElement("circle", {
cx: "192",
cy: "128",
r: "12"
}), import_react7.default.createElement("circle", {
cx: "64",
cy: "128",
r: "12"
}));
});
pathsByWeight4.set("fill", function() {
return import_react7.default.createElement(import_react7.default.Fragment, null, import_react7.default.createElement("path", {
d: "M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm52-12a12,12,0,1,0,12,12A12,12,0,0,0,192,116ZM64,116a12,12,0,1,0,12,12A12,12,0,0,0,64,116Z"
}));
});
pathsByWeight4.set("light", function() {
return import_react7.default.createElement(import_react7.default.Fragment, null, import_react7.default.createElement("circle", {
cx: "128",
cy: "128",
r: "10"
}), import_react7.default.createElement("circle", {
cx: "64",
cy: "128",
r: "10"
}), import_react7.default.createElement("circle", {
cx: "192",
cy: "128",
r: "10"
}));
});
pathsByWeight4.set("thin", function() {
return import_react7.default.createElement(import_react7.default.Fragment, null, import_react7.default.createElement("circle", {
cx: "128",
cy: "128",
r: "8"
}), import_react7.default.createElement("circle", {
cx: "64",
cy: "128",
r: "8"
}), import_react7.default.createElement("circle", {
cx: "192",
cy: "128",
r: "8"
}));
});
pathsByWeight4.set("regular", function() {
return import_react7.default.createElement(import_react7.default.Fragment, null, import_react7.default.createElement("circle", {
cx: "128",
cy: "128",
r: "12"
}), import_react7.default.createElement("circle", {
cx: "192",
cy: "128",
r: "12"
}), import_react7.default.createElement("circle", {
cx: "64",
cy: "128",
r: "12"
}));
});
var renderPath7 = function renderPath8(weight, color) {
return renderPathForWeight(weight, color, pathsByWeight4);
};
var DotsThree = /* @__PURE__ */ (0, import_react7.forwardRef)(function(props, ref) {
return import_react7.default.createElement(IconBase_esm_default, Object.assign({
ref
}, props, {
renderPath: renderPath7
}));
});
DotsThree.displayName = "DotsThree";
var DotsThree_esm_default = DotsThree;
// ../../node_modules/phosphor-react/dist/icons/X.esm.js
var import_react8 = __toESM(require("react"));
var pathsByWeight5 = /* @__PURE__ */ new Map();
pathsByWeight5.set("bold", function(color) {
return import_react8.default.createElement(import_react8.default.Fragment, null, import_react8.default.createElement("line", {
x1: "200",
y1: "56",
x2: "56",
y2: "200",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "24"
}), import_react8.default.createElement("line", {
x1: "200",
y1: "200",
x2: "56",
y2: "56",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "24"
}));
});
pathsByWeight5.set("duotone", function(color) {
return import_react8.default.createElement(import_react8.default.Fragment, null, import_react8.default.createElement("line", {
x1: "200",
y1: "56",
x2: "56",
y2: "200",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "16"
}), import_react8.default.createElement("line", {
x1: "200",
y1: "200",
x2: "56",
y2: "56",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "16"
}));
});
pathsByWeight5.set("fill", function() {
return import_react8.default.createElement(import_react8.default.Fragment, null, import_react8.default.createElement("path", {
d: "M139.3,128l66.4-66.3a8.1,8.1,0,0,0-11.4-11.4L128,116.7,61.7,50.3A8.1,8.1,0,0,0,50.3,61.7L116.7,128,50.3,194.3a8.1,8.1,0,0,0,0,11.4,8.2,8.2,0,0,0,11.4,0L128,139.3l66.3,66.4a8.2,8.2,0,0,0,11.4,0,8.1,8.1,0,0,0,0-11.4Z"
}));
});
pathsByWeight5.set("light", function(color) {
return import_react8.default.createElement(import_react8.default.Fragment, null, import_react8.default.createElement("line", {
x1: "200",
y1: "56",
x2: "56",
y2: "200",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "12"
}), import_react8.default.createElement("line", {
x1: "200",
y1: "200",
x2: "56",
y2: "56",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "12"
}));
});
pathsByWeight5.set("thin", function(color) {
return import_react8.default.createElement(import_react8.default.Fragment, null, import_react8.default.createElement("line", {
x1: "200",
y1: "56",
x2: "56",
y2: "200",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "8"
}), import_react8.default.createElement("line", {
x1: "200",
y1: "200",
x2: "56",
y2: "56",
fill: "none",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "8"
}));
});
pathsByWeight5.set("regular", function(color) {
return import_react8.default.createElement(import_react8.default.Fragment, null, import_react8.default.createElement("line", {
x1: "200",
y1: "56",
x2: "56",
y2: "200",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "16"
}), import_react8.default.createElement("line", {
x1: "200",
y1: "200",
x2: "56",
y2: "56",
stroke: color,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "16"
}));
});
var renderPath9 = function renderPath10(weight, color) {
return renderPathForWeight(weight, color, pathsByWeight5);
};
var X = /* @__PURE__ */ (0, import_react8.forwardRef)(function(props, ref) {
return import_react8.default.createElement(IconBase_esm_default, Object.assign({
ref
}, props, {
renderPath: renderPath9
}));
});
X.displayName = "X";
var X_esm_default = X;
// src/Stack/Stack.style.ts
var import_react9 = require("@emotion/react");
var stackStyle = ({
direction,
align,
justify
}) => import_react9.css`
display: flex;
flex-direction: ${direction};
align-items: ${align};
justify-content: ${justify};
position: relative;
`;
// src/Stack/Stack.tsx
var import_jsx_dev_runtime2 = require("@emotion/react/jsx-dev-runtime");
function Stack({
className,
direction = "row",
align = "center",
justify = "center",
children,
...restProps
}) {
return /* @__PURE__ */ (0, import_jsx_dev_runtime2.jsxDEV)("div", {
css: stackStyle({ direction, align, justify }),
className,
...restProps,
children
}, void 0, false, {
fileName: "src/Stack/Stack.tsx",
lineNumber: 21,
columnNumber: 5
}, this);
}
Stack.displayName = "WON-Stack";
// src/Checkbox/Checkbox.style.ts
var import_react10 = require("@emotion/react");
var import_styles2 = require("@won-ui/styles");
var checkboxStyle = (theme) => {
let color = {
...import_styles2.black,
10: "white"
};
if (theme)
color = import_styles2.wonColor[theme];
return {
checkboxWrapper: import_react10.css`
position: relative;
width: 16px;
height: 16px;
.won-check-icon {
color: ${color[10]};
position: absolute;
pointer-events: none;
}
`,
checkboxInput: import_react10.css`
position: absolute;
cursor: pointer;
appearance: none;
background-color: ${color[10]};
border: 1px solid ${color[30]};
padding: 0px;
margin: 0px;
width: inherit;
height: inherit;
border-radius: 4px;
:checked {
background-color: ${color[60]};
border: 1px solid transparent;
}
`,
labelWrapper: import_react10.css`
padding-left: 15px;
`,
label: import_react10.css`
font-family: Charcoal, sans-serif;
display: inline-flex;
position: relative;
cursor: pointer;
font-size: 16px;
user-select: none;
align-items: center;
`
};
};
// src/Checkbox/Checkbox.tsx
var import_jsx_dev_runtime3 = require("@emotion/react/jsx-dev-runtime");
function Checkbox({
className,
id,
label,
disabled = false,
color,
...restProps
}) {
const uniqueId = (0, import_hooks.useUniqueId)(id);
return /* @__PURE__ */ (0, import_jsx_dev_runtime3.jsxDEV)(Stack, {
direction: "row",
justify: "flex-start",
className,
...restProps,
children: [
/* @__PURE__ */ (0, import_jsx_dev_runtime3.jsxDEV)("span", {
css: checkboxStyle(color).checkboxWrapper,
children: [
/* @__PURE__ */ (0, import_jsx_dev_runtime3.jsxDEV)("input", {
type: "checkbox",
role: "checkbox",
id: uniqueId,
css: checkboxStyle(color).checkboxInput
}, void 0, false, {
fileName: "src/Checkbox/Checkbox.tsx",
lineNumber: 28,
columnNumber: 9
}, this),
/* @__PURE__ */ (0, import_jsx_dev_runtime3.jsxDEV)(Check_esm_default, {
className: "won-check-icon",
size: 16,
weight: "bold"
}, void 0, false, {
fileName: "src/Checkbox/Checkbox.tsx",
lineNumber: 34,
columnNumber: 9
}, this)
]
}, void 0, true, {
fileName: "src/Checkbox/Checkbox.tsx",
lineNumber: 27,
columnNumber: 7
}, this),
/* @__PURE__ */ (0, import_jsx_dev_runtime3.jsxDEV)("div", {
css: checkboxStyle(color).labelWrapper,
children: /* @__PURE__ */ (0, import_jsx_dev_runtime3.jsxDEV)("label", {
css: checkboxStyle(color).label,
htmlFor: uniqueId,
children: label
}, void 0, false, {
fileName: "src/Checkbox/Checkbox.tsx",
lineNumber: 37,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: "src/Checkbox/Checkbox.tsx",
lineNumber: 36,
columnNumber: 7
}, this)
]
}, void 0, true, {
fileName: "src/Checkbox/Checkbox.tsx",
lineNumber: 26,
columnNumber: 5
}, this);
}
Checkbox.displayName = "WON-Checkbox";
// src/Heading/Heading.style.ts
var import_react11 = require("@emotion/react");
var heading = import_react11.css`
font-family: Charcoal, sans-serif;
margin: 0;
`;
// src/Heading/Heading.tsx
var import_jsx_dev_runtime4 = require("@emotion/react/jsx-dev-runtime");
function Heading({ level = 1, children, ...restProps }) {
const HeadingComponent = `h${level}`;
return /* @__PURE__ */ (0, import_jsx_dev_runtime4.jsxDEV)(HeadingComponent, {
css: heading,
...restProps,
children
}, void 0, false, {
fileName: "src/Heading/Heading.tsx",
lineNumber: 11,
columnNumber: 5
}, this);
}
Heading.displayName = "WON-Heading";
// src/IconActivator/IconActivator.style.ts
var import_react12 = require("@emotion/react");
var import_styles3 = require("@won-ui/styles");
var IconActivatorStyle = (theme, hasBorder) => {
const color = import_styles3.wonColor[theme];
return import_react12.css`
appearance: none;
border: 1px solid ${hasBorder ? color[20] : "transparent"};
box-sizing: border-box;
height: 25px;
width: 25px;
border-radius: 5px;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.1s ease-out;
color: ${color[40]};
outline: 0;
background-color: transparent;
&:hover {
color: ${color[40]};
background-color: ${color[10]};
}
&:focus {
color: ${color[60]};
border-color: ${color[40]};
background-color: ${color[20]}
}
`;
};
// src/IconActivator/IconActivator.tsx
var import_jsx_dev_runtime5 = require("@emotion/react/jsx-dev-runtime");
function IconActivator({
className,
style,
color = "black",
children,
hasBorder = true,
...restProps
}) {
return /* @__PURE__ */ (0, import_jsx_dev_runtime5.jsxDEV)("button", {
className,
css: IconActivatorStyle(color, hasBorder),
type: "button",
...restProps,
children
}, void 0, false, {
fileName: "src/IconActivator/IconActivator.tsx",
lineNumber: 21,
columnNumber: 5
}, this);
}
IconActivator.displayName = "WON-IconActivator";
// src/Input/Input.style.ts
var import_react13 = require("@emotion/react");
var import_styles4 = require("@won-ui/styles");
var inputContainer = import_react13.css`
position: relative;
`;
var input = import_react13.css`
font-family: Charcoal, sans-serif;
font-size: 14px;
width: 100%;
height: 36px;
padding: 0 10px;
box-sizing: border-box;
border-radius: 6px;
border: 1px solid ${import_styles4.black[30]};
transition: border-color 0.1 ease, box-shadow 0.1 ease;
&:focus {
outline: none;
border-color: ${import_styles4.blue[60]};
box-shadow: 0 0 3px ${import_styles4.blue[10]};
}
&:disabled {
border: 1px solid lightgray;
}
`;
var errorInput = import_react13.css`
border-color: ${import_styles4.red[50]};
box-shadow: 0 0 3px ${import_styles4.red[10]};
`;
var withIcon = import_react13.css`
padding-left: 30px;
`;
var iconStyle = import_react13.css`
pointer-events: none;
position: absolute;
color: ${import_styles4.black[60]};
height: 36px;
width: 30px;
display: flex;
flex: none;
align-items: center;
justify-content: center;
margin-right: 4px;
`;
// src/Input/Input.tsx
var import_jsx_dev_runtime6 = require("@emotion/react/jsx-dev-runtime");
function Input({ className, style, error = false, icon, ...restProps }) {
return /* @__PURE__ */ (0, import_jsx_dev_runtime6.jsxDEV)("div", {
className,
style,
css: inputContainer,
children: [
icon && /* @__PURE__ */ (0, import_jsx_dev_runtime6.jsxDEV)("div", {
css: iconStyle,
children: icon
}, void 0, false, {
fileName: "src/Input/Input.tsx",
lineNumber: 13,
columnNumber: 16
}, this),
/* @__PURE__ */ (0, import_jsx_dev_runtime6.jsxDEV)("input", {
css: [input, error && errorInput, icon && withIcon],
...restProps
}, void 0, false, {
fileName: "src/Input/Input.tsx",
lineNumber: 14,
columnNumber: 7
}, this)
]
}, void 0, true, {
fileName: "src/Input/Input.tsx",
lineNumber: 12,
columnNumber: 5
}, this);
}
Input.displayName = "WON-Input";
// src/Text/Text.style.ts
var import_react14 = require("@emotion/react");
var import_styles5 = require("@won-ui/styles");
var text = import_react14.css`
font-family: Charcoal, sans-serif;
`;
var fontColor = (theme) => import_react14.css`
color: ${import_styles5.wonColor[theme][60]};
`;
var fontSizes = {
xs: import_react14.css`
font-size: 12px;
`,
sm: import_react14.css`
font-size: 14px;
`,
md: import_react14.css`
font-size: 16px;
`,
lg: import_react14.css`
font-size: 18px;
`,
xl: import_react14.css`
font-size: 20px;
`
};
// src/Text/Text.tsx
var import_jsx_dev_runtime7 = require("@emotion/react/jsx-dev-runtime");
function Text({
className,
as: Component = "p",
size = "md",
children,
color = "black",
...restProps
}) {
return /* @__PURE__ */ (0, import_jsx_dev_runtime7.jsxDEV)(Component, {
className,
css: [text, fontSizes[size], fontColor(color)],
...restProps,
children
}, void 0, false, {
fileName: "src/Text/Text.tsx",
lineNumber: 22,
columnNumber: 5
}, this);
}
Text.displayName = "WON-Text";
// src/InputBox/InputBox.style.ts
var import_react15 = require("@emotion/react");
var import_styles6 = require("@won-ui/styles");
var inputBox = {
root: import_react15.css`
font-family: Charcoal, sans-serif;
`,
label: import_react15.css`
display: block;
margin-bottom: 3px;
font-size: 15px;
font-weight: bold;
color: ${import_styles6.black[30]};
`,
required: import_react15.css`
color: ${import_styles6.red[60]};
`,
helperText: import_react15.css`
margin: 3px 0;
font-size: 14px;
color: ${import_styles6.black[30]};
`,
errorText: import_react15.css`
color: ${import_styles6.red[50]};
font-size: 13px;
margin: 3px 0;
`
};
// src/InputBox/InputBox.tsx
var import_jsx_dev_runtime8 = require("@emotion/react/jsx-dev-runtime");
function InputBox({
className,
id,
label,
helperText,
errorText,
required = false,
children,
...restProps
}) {
return /* @__PURE__ */ (0, import_jsx_dev_runtime8.jsxDEV)("div", {
className,
css: inputBox.root,
...restProps,
children: [
/* @__PURE__ */ (0, import_jsx_dev_runtime8.jsxDEV)("label", {
css: inputBox.label,
htmlFor: id,
children: [
label,
required && /* @__PURE__ */ (0, import_jsx_dev_runtime8.jsxDEV)(Text, {
as: "span",
css: inputBox.required,
children: "*"
}, void 0, false, {
fileName: "src/InputBox/InputBox.tsx",
lineNumber: 34,
columnNumber: 11
}, this)
]
}, void 0, true, {
fileName: "src/InputBox/InputBox.tsx",
lineNumber: 31,
columnNumber: 7
}, this),
children,
helperText && /* @__PURE__ */ (0, import_jsx_dev_runtime8.jsxDEV)(Text, {
css: inputBox.helperText,
children: helperText
}, void 0, false, {
fileName: "src/InputBox/InputBox.tsx",
lineNumber: 40,
columnNumber: 22
}, this),
errorText && /* @__PURE__ */ (0, import_jsx_dev_runtime8.jsxDEV)(Text, {
css: inputBox.errorText,
children: errorText
}, void 0, false, {
fileName: "src/InputBox/InputBox.tsx",
lineNumber: 41,
columnNumber: 21
}, this)
]
}, void 0, true, {
fileName: "src/InputBox/InputBox.tsx",
lineNumber: 30,
columnNumber: 5
}, this);
}
InputBox.displayName = "WON-InputBox";
// src/Modal/Modal.tsx
var import_hooks2 = require("@won-ui/hooks");
var import_react18 = require("react");
// src/Overlay/Overlay.style.ts
var import_react16 = require("@emotion/react");
var overlayStyle = (blur) => import_react16.css`
backdrop-filter: blur(${blur}px);
position: absolute;
inset: 0px;
`;
var baseStyle = (opacity) => import_react16.css`
opacity: ${opacity};
position: absolute;
background-color: #000;
inset: 0px;
`;
// src/Overlay/Overlay.tsx
var import_jsx_dev_runtime9 = require("@emotion/react/jsx-dev-runtime");
function Overlay({ opacity = 0.6, blur = 0, ...restProps }) {
const base = ({ opacity: opacity2 = 0.6, ...restProps2 }) => {
return /* @__PURE__ */ (0, import_jsx_dev_runtime9.jsxDEV)("div", {
css: baseStyle(opacity2),
...restProps2
}, void 0, false, {
fileName: "src/Overlay/Overlay.tsx",
lineNumber: 11,
columnNumber: 12
}, this);
};
if (blur !== 0) {
return /* @__PURE__ */ (0, import_jsx_dev_runtime9.jsxDEV)("div", {
css: overlayStyle(blur),
...restProps,
children: base({ opacity })
}, void 0, false, {
fileName: "src/Overlay/Overlay.tsx",
lineNumber: 16,
columnNumber: 7
}, this);
}
return base({ opacity, ...restProps });
}
Overlay.displayName = "WON-Overlay";
// src/Modal/Modal.style.ts
var import_react17 = require("@emotion/react");
var wrapperStyle = import_react17.css`
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 40px 20px;
display: flex;
justify-content: center;
align-items: flex-start;
`;
var modalStyle = (options) => import_react17.css`
position: relative;
padding: 16px;
width: ${options == null ? void 0 : options.width}px;
background-color: #fff;
z-index: 1;
border-radius: 8px;
`;
var titleStyle = import_react17.css`
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 800;
margin-bottom: 10px;
`;
var bodyStyle = import_react17.css`
padding-top: 10px;
box-sizing: border-box;
`;
// src/Modal/Modal.tsx
var import_jsx_dev_runtime10 = require("@emotion/react/jsx-dev-runtime");
function Modal({
title,
isOpen,
onClose,
className,
modalOptions = { width: 500 },
overlayOptions = { opacity: 0.65, blur: 0 },
children
}) {
const modalRef = (0, import_react18.createRef)();
(0, import_hooks2.useClickOutside)(modalRef, (e) => {
if (onClose)
onClose();
});
if (!isOpen)
return null;
return /* @__PURE__ */ (0, import_jsx_dev_runtime10.jsxDEV)("div", {
css: wrapperStyle,
className,
children: [
/* @__PURE__ */ (0, import_jsx_dev_runtime10.jsxDEV)("div", {
ref: modalRef,
css: modalStyle(modalOptions),
children: [
/* @__PURE__ */ (0, import_jsx_dev_runtime10.jsxDEV)("div", {
css: titleStyle,
children: [
/* @__PURE__ */ (0, import_jsx_dev_runtime10.jsxDEV)(Text, {
as: "span",
children: title
}, void 0, false, {
fileName: "src/Modal/Modal.tsx",
lineNumber: 42,
columnNumber: 11
}, this),
/* @__PURE__ */ (0, import_jsx_dev_runtime10.jsxDEV)(IconActivator, {
hasBorder: false,
onClick: onClose,
children: /* @__PURE__ */ (0, import_jsx_dev_runtime10.jsxDEV)(X_esm_default, {
weight: "bold"
}, void 0, false, {
fileName: "src/Modal/Modal.tsx",
lineNumber: 44,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: "src/Modal/Modal.tsx",
lineNumber: 43,
columnNumber: 11
}, this)
]
}, void 0, true, {
fileName: "src/Modal/Modal.tsx",
lineNumber: 41,
columnNumber: 9
}, this),
/* @__PURE__ */ (0, import_jsx_dev_runtime10.jsxDEV)("div", {
css: bodyStyle,
children
}, void 0, false, {
fileName: "src/Modal/Modal.tsx",
lineNumber: 47,
columnNumber: 9
}, this)
]
}, void 0, true, {
fileName: "src/Modal/Modal.tsx",
lineNumber: 40,
columnNumber: 7
}, this),
/* @__PURE__ */ (0, import_jsx_dev_runtime10.jsxDEV)(Overlay, {
opacity: overlayOptions.opacity,
blur: overlayOptions.blur
}, void 0, false, {
fileName: "src/Modal/Modal.tsx",
lineNumber: 49,
columnNumber: 7
}, this)
]
}, void 0, true, {
fileName: "src/Modal/Modal.tsx",
lineNumber: 39,
columnNumber: 5
}, this);
}
Modal.displayName = "WON-Modal";
// src/Pagination/Pagination.tsx
var import_hooks3 = require("@won-ui/hooks");
var import_react21 = require("react");
// src/Pagination/Pagination.style.ts
var import_react19 = require("@emotion/react");
var commonBtnStyle = import_react19.css`
min-width: 32px;
padding: 0 2px;
display: flex;
align-items: center;
justify-content: center;
`;
var moreBtnStyle = [
commonBtnStyle,
import_react19.css`
margin: 0 2px;
`
];
var arrowStyle = {
leftArrow: [
commonBtnStyle,
import_react19.css`
padding: 0 3px;
margin-right: 5px;
`
],
rightArrow: [
commonBtnStyle,
import_react19.css`
padding: 0 3px;
margin-left: 5px;
`
]
};
var pageBtnStyle = (isSelected) => [
commonBtnStyle,
import_react19.css`
margin-right: 2px;
padding: 0 2px;
margin: 0 2px;
font-weight: ${isSelected ? "bold" : "normal"};
`
];
// src/Pagination/PaginationItem.tsx
var import_react20 = require("react");
var import_jsx_dev_runtime11 = require("@emotion/react/jsx-dev-runtime");
var PaginationItem = (0, import_react20.memo)(({ pageInfo, ...buttonProps }) => {
const isMoreButton = (0, import_react20.useCallback)((pageNumber) => {
if (pageNumber === "left" || pageNumber === "right")
return true;
return false;
}, []);
const { style, content, variant } = (0, import_react20.useMemo)(() => {
const style2 = isMoreButton(pageInfo.page) ? moreBtnStyle : pageBtnStyle(pageInfo.selected);
const content2 = isMoreButton(pageInfo.page) ? /* @__PURE__ */ (0, import_jsx_dev_runtime11.jsxDEV)(DotsThree_esm_default, {
size: 24
}, void 0, false, {
fileName: "src/Pagination/PaginationItem.tsx",
lineNumber: 19,
columnNumber: 51
}, this) : pageInfo.page;
let variant2 = "borderless";
if (!isMoreButton(pageInfo.page))
variant2 = pageInfo.selected ? "filled" : "outline";
return {
style: style2,
content: content2,
variant: variant2
};
}, [pageInfo]);
return /* @__PURE__ */ (0, import_jsx_dev_runtime11.jsxDEV)(Button, {
css: style,
variant,
...buttonProps,
children: content
}, void 0, false, {
fileName: "src/Pagination/PaginationItem.tsx",
lineNumber: 30,
columnNumber: 5
}, this);
});
// src/Pagination/Pagination.tsx
var import_jsx_dev_runtime12 = require("@emotion/react/jsx-dev-runtime");
function Pagination(props) {
const { color = "blue", position = "center", ...usePaginationOptions } = props;
const {
page,
currentPages,
maxPageNum,
pageSize,
pageSizeOptions,
handleChangePage,
handleChangePageSize,
handleClickNext,
handleClickPrev,
handleClickMoreButton
} = (0, import_hooks3.usePagination)(usePaginationOptions);
const paginationPosition = (0, import_react21.useMemo)(
() => ({
left: "flex-start",
right: "flex-end",
center: "center"
})[position],
[position]
);
return /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)(Stack, {
justify: paginationPosition,
children: [
/* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)(Stack, {
children: [
/* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)(Button, {
css: arrowStyle.leftArrow,
disabled: page === 1,
color,
onClick: handleClickPrev,
variant: "outline",
children: /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)(CaretLeft_esm_default, {
size: 16,
weight: "bold"
}, void 0, false, {
fileName: "src/Pagination/Pagination.tsx",
lineNumber: 50,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: "src/Pagination/Pagination.tsx",
lineNumber: 43,
columnNumber: 9
}, this),
currentPages.map((pageInfo) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)(PaginationItem, {
pageInfo,
color,
onClick: typeof pageInfo.page === "number" ? handleChangePage(pageInfo.page) : handleClickMoreButton(pageInfo.page)
}, pageInfo.page, false, {
fileName: "src/Pagination/Pagination.tsx",
lineNumber: 53,
columnNumber: 11
}, this)),
/* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)(Button, {
css: arrowStyle.rightArrow,
disabled: page === maxPageNum,
color,
onClick: handleClickNext,
variant: "outline",
children: /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)(CaretRight_esm_default, {
size: 16,
weight: "bold"
}, void 0, false, {
fileName: "src/Pagination/Pagination.tsx",
lineNumber: 71,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: "src/Pagination/Pagination.tsx",
lineNumber: 64,
columnNumber: 9
}, this)
]
}, void 0, true, {
fileName: "src/Pagination/Pagination.tsx",
lineNumber: 42,
columnNumber: 7
}, this),
/* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("select", {
value: pageSize,
onChange: handleChangePageSize,
children: pageSizeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_dev_runtime12.jsxDEV)("option", {
value: option,
children: [
option,
" / page"
]
}, option, true, {
fileName: "src/Pagination/Pagination.tsx",
lineNumber: 77,
columnNumber: 11
}, this))
}, void 0, false, {
fileName: "src/Pagination/Pagination.tsx",
lineNumber: 75,
columnNumber: 7
}, this)
]
}, void 0, true, {
fileName: "src/Pagination/Pagination.tsx",
lineNumber: 41,
columnNumber: 5
}, this);
}
Pagination.displayName = "WON-Pagination";
// src/Switch/Switch.tsx
var import_hooks4 = require("@won-ui/hooks");
// src/Switch/Switch.style.ts
var import_react22 = require("@emotion/react");
var import_styles7 = require("@won-ui/styles");
var wrapperStyle2 = import_react22.css`
display: inline-flex;
box-sizing: border-box;
cursor: pointer;
`;
var switchStyle = (theme) => {
const color = import_styles7.wonColor[theme];
return {
input: import_react22.css`
box-sizing: border-box;
padding: 0;
height: 1px;
appearance: none;
&:checked + span {
background-color: ${color[60]};
border: 1px solid transparent;
span {
left: calc((100% - 18px) - 2px);
}
}
`,
wrapper: import_react22.css`
background-color: ${color[30]};
border: 1px solid ${color[40]};
cursor: pointer;
position: relative;
border-radius: 10px;
height: 20px;
width: 40px;
margin: 0px;
display: inline-flex;
align-items: center;
user-select: none;
transition: color 0.2s ease;
`,
ball: import_react22.css`
position: absolute;
border-radius: 8px;
box-sizing: border-box;
display: flex;
height: 18px;
width: 18px;
background-color: ${color[10]};
left: 2px;
transition: left 0.2s ease-in;
`
};
};
var labelStyle = import_react22.css`
font-family: Charcoal, sans-serif;
padding-left: 14px;
font-size: 14px;
cursor: pointer;
user-select: none;
align-self: center;
`;
// src/Switch/Switch.tsx
var import_jsx_dev_runtime13 = require("@emotion/react/jsx-dev-runtime");
function Switch({ id, label, color = "blue", ...restProps }) {
const uniqueId = (0, import_hooks4.useUniqueId)(id);
return /* @__PURE__ */ (0, import_jsx_dev_runtime13.jsxDEV)("label", {
css: wrapperStyle2,
htmlFor: uniqueId,
...restProps,
children: [
/* @__PURE__ */ (0, import_jsx_dev_runtime13.jsxDEV)("input", {
css: switchStyle(color).input,
type: "checkbox",
role: "checkbox",
id: uniqueId
}, void 0, false, {
fileName: "src/Switch/Switch.tsx",
lineNumber: 18,
columnNumber: 7
}, this),
/* @__PURE__ */ (0, import_jsx_dev_runtime13.jsxDEV)("span", {
css: switchStyle(color).wrapper,
children: /* @__PURE__ */ (0, import_jsx_dev_runtime13.jsxDEV)("span", {
css: switchStyle(color).ball
}, void 0, false, {
fileName: "src/Switch/Switch.tsx",
lineNumber: 20,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: "src/Switch/Switch.tsx",
lineNumber: 19,
columnNumber: 7
}, this),
label && /* @__PURE__ */ (0, import_jsx_dev_runtime13.jsxDEV)("span", {
css: labelStyle,
children: label
}, void 0, false, {
fileName: "src/Switch/Switch.tsx",
lineNumber: 23,
columnNumber: 9
}, this)
]
}, void 0, true, {
fileName: "src/Switch/Switch.tsx",
lineNumber: 17,
columnNumber: 5
}, this);
}
Switch.displayName = "WON-Switch";
// src/Tag/Tag.style.ts
var import_react23 = require("@emotion/react");
var import_styles8 = require("@won-ui/styles");
var tagStyle = (theme, type) => {
const color = import_styles8.wonColor[theme];
const defaultStyle = import_react23.css`
font-family: Charcoal, sans-serif;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
font-size: 12px;
height: 20px;
border-radius: 10px;
font-weight: bold;
letter-spacing: 0.3px;
border: 2px solid transparent;
`;
const tagTypeStyle = {
light: import_react23.css`
background-color: ${color[10]};
color: ${color[50]};
`,
filled: import_react23.css`
background-color: ${color[60]};
color: ${color[10]};
`,
outline: import_react23.css`
box-sizing: border-box;
border: 2px solid ${color[60]};
color: ${color[60]};
`
};
return [defaultStyle, tagTypeStyle[type]];
};
// src/Tag/Tag.tsx
var import_jsx_dev_runtime14 = require("@emotion/react/jsx-dev-runtime");
function Tag({
className,
color = "black",
children,
type = "light",
...props
}) {
return /* @__PURE__ */ (0, import_jsx_dev_runtime14.jsxDEV)("div", {
className,
css: tagStyle(color, type),
children
}, void 0, false, {
fileName: "src/Tag/Tag.tsx",
lineNumber: 19,
columnNumber: 5
}, this);
}
Tag.displayName = "WON-Tag";
// src/TextInput/TextInput.tsx
var import_hooks5 = require("@won-ui/hooks");
var import_jsx_dev_runtime15 = require("@emotion/react/jsx-dev-runtime");
function TextInput({
className,
id,
type = "text",
label,
errorText,
helperText,
value,
onChange,
required,
icon,
...restProps
}) {
const uniqueId = (0, import_hooks5.useUniqueId)(id);
const handleChange = (e) => {
const { value: value2 } = e.target;
if (onChange) {
onChange(value2);
}
};
return /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)(InputBox, {
className,
id: uniqueId,
label,
helperText,
errorText,
required,
children: /* @__PURE__ */ (0, import_jsx_dev_runtime15.jsxDEV)(Input, {
id: uniqueId,
type,
value,
onChange: handleChange,
icon,
...restProps
}, void 0, false, {
fileName: "sr