enerdot-front-system 0.0.1

package/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

package/dist/components/Button/PrimaryButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '.';
+declare const PrimaryButton: (props: Omit<ButtonProps, "theme">) => import("react/jsx-runtime").JSX.Element;
+export default PrimaryButton;

package/dist/components/Button/SecondaryButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '.';
+declare const SecondaryButton: (props: Omit<ButtonProps, "theme">) => import("react/jsx-runtime").JSX.Element;
+export default SecondaryButton;

package/dist/components/Button/TertiaryButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '.';
+declare const TertiaryButton: (props: Omit<ButtonProps, "theme">) => import("react/jsx-runtime").JSX.Element;
+export default TertiaryButton;

package/dist/components/Button/TextButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '.';
+declare const TextButton: (props: Omit<ButtonProps, "theme">) => import("react/jsx-runtime").JSX.Element;
+export default TextButton;

package/dist/components/Button/common.d.ts

@@ -0,0 +1,65 @@
+export interface ButtonStyleProps {
+    $mainColor: string;
+    $hoverColor: string;
+    $activeColor: string;
+    $disabledColor: string;
+    $fontWeights: [string, string, string];
+    $fontSize: number;
+    $borderRadius: number;
+    $pr: number;
+    $pl: number;
+    $height: number;
+    $width: string;
+    /**theme - secondary, text만 지원 */
+    $isSelected?: boolean;
+}
+export declare const levels: {
+    [key: string]: {
+        height: number;
+        fontSize: number;
+        fontWeights: [string, string, string];
+    };
+};
+export declare const borderRadii: {
+    full: number;
+    round: number;
+    no: number;
+};
+export declare const colors: {
+    primary: {
+        $mainColor: string;
+        $hoverColor: string;
+        $activeColor: string;
+        $disabledColor: string;
+    };
+    green: {
+        $mainColor: string;
+        $hoverColor: string;
+        $activeColor: string;
+        $disabledColor: string;
+    };
+    red: {
+        $mainColor: string;
+        $hoverColor: string;
+        $activeColor: string;
+        $disabledColor: string;
+    };
+    orange: {
+        $mainColor: string;
+        $hoverColor: string;
+        $activeColor: string;
+        $disabledColor: string;
+    };
+    yellow: {
+        $mainColor: string;
+        $hoverColor: string;
+        $activeColor: string;
+        $disabledColor: string;
+    };
+    gray: {
+        $mainColor: string;
+        $hoverColor: string;
+        $activeColor: string;
+        $disabledColor: string;
+    };
+};

package/dist/components/Button/index.d.ts

@@ -0,0 +1,14 @@
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    level?: "small" | "medium" | "large";
+    theme?: "primary" | "secondary" | "tertiary" | "text";
+    baseColor?: "primary" | "green" | "red" | "orange" | "yellow" | "gray";
+    borderRadius?: "full" | "round" | "no";
+    pl?: number;
+    pr?: number;
+    width?: string;
+    children?: React.ReactNode;
+    /**theme - secondary, text만 지원 */
+    isSelected?: boolean;
+}
+declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/index.cjs.js

@@ -0,0 +1,143 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const dr=require("react"),vr=require("styled-components"),pr=r=>r&&typeof r=="object"&&"default"in r?r:{default:r};function gr(r){if(r&&typeof r=="object"&&"default"in r)return r;const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const y in r)if(y!=="default"){const v=Object.getOwnPropertyDescriptor(r,y);Object.defineProperty(f,y,v.get?v:{enumerable:!0,get:()=>r[y]})}}return f.default=r,Object.freeze(f)}const br=gr(dr),N=pr(vr);function yr(r){if(r.__esModule)return r;var f=r.default;if(typeof f=="function"){var y=function v(){return this instanceof v?Reflect.construct(f,arguments,this.constructor):f.apply(this,arguments)};y.prototype=f.prototype}else y={};return Object.defineProperty(y,"__esModule",{value:!0}),Object.keys(r).forEach(function(v){var $=Object.getOwnPropertyDescriptor(r,v);Object.defineProperty(y,v,$.get?$:{enumerable:!0,get:function(){return r[v]}})}),y}var U={exports:{}},A={};const Te=yr(br);/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var we;function hr(){if(we)return A;we=1;var r=Te,f=Symbol.for("react.element"),y=Symbol.for("react.fragment"),v=Object.prototype.hasOwnProperty,$=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,I={key:!0,ref:!0,__self:!0,__source:!0};function x(C,p,T){var m,_={},w=null,W=null;T!==void 0&&(w=""+T),p.key!==void 0&&(w=""+p.key),p.ref!==void 0&&(W=p.ref);for(m in p)v.call(p,m)&&!I.hasOwnProperty(m)&&(_[m]=p[m]);if(C&&C.defaultProps)for(m in p=C.defaultProps,p)_[m]===void 0&&(_[m]=p[m]);return{$$typeof:f,type:C,key:w,ref:W,props:_,_owner:$.current}}return A.Fragment=y,A.jsx=x,A.jsxs=x,A}var B={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Fe;function mr(){return Fe||(Fe=1,process.env.NODE_ENV!=="production"&&function(){var r=Te,f=Symbol.for("react.element"),y=Symbol.for("react.portal"),v=Symbol.for("react.fragment"),$=Symbol.for("react.strict_mode"),I=Symbol.for("react.profiler"),x=Symbol.for("react.provider"),C=Symbol.for("react.context"),p=Symbol.for("react.forward_ref"),T=Symbol.for("react.suspense"),m=Symbol.for("react.suspense_list"),_=Symbol.for("react.memo"),w=Symbol.for("react.lazy"),W=Symbol.for("react.offscreen"),Q=Symbol.iterator,je="@@iterator";function Pe(e){if(e===null||typeof e!="object")return null;var t=Q&&e[Q]||e[je];return typeof t=="function"?t:null}var j=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function g(e){{for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];Se("error",e,n)}}function Se(e,t,n){{var o=j.ReactDebugCurrentFrame,u=o.getStackAddendum();u!==""&&(t+="%s",n=n.concat([u]));var s=n.map(function(l){return String(l)});s.unshift("Warning: "+t),Function.prototype.apply.call(console[e],console,s)}}var xe=!1,De=!1,ke=!1,Ae=!1,Be=!1,ee;ee=Symbol.for("react.module.reference");function Ie(e){return!!(typeof e=="string"||typeof e=="function"||e===v||e===I||Be||e===$||e===T||e===m||Ae||e===W||xe||De||ke||typeof e=="object"&&e!==null&&(e.$$typeof===w||e.$$typeof===_||e.$$typeof===x||e.$$typeof===C||e.$$typeof===p||e.$$typeof===ee||e.getModuleId!==void 0))}function We(e,t,n){var o=e.displayName;if(o)return o;var u=t.displayName||t.name||"";return u!==""?n+"("+u+")":n}function re(e){return e.displayName||"Context"}function R(e){if(e==null)return null;if(typeof e.tag=="number"&&g("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case v:return"Fragment";case y:return"Portal";case I:return"Profiler";case $:return"StrictMode";case T:return"Suspense";case m:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case C:var t=e;return re(t)+".Consumer";case x:var n=e;return re(n._context)+".Provider";case p:return We(e,e.render,"ForwardRef");case _:var o=e.displayName||null;return o!==null?o:R(e.type)||"Memo";case w:{var u=e,s=u._payload,l=u._init;try{return R(l(s))}catch{return null}}}return null}var F=Object.assign,D=0,te,ne,oe,ae,ie,le,ue;function se(){}se.__reactDisabledLog=!0;function Ye(){{if(D===0){te=console.log,ne=console.info,oe=console.warn,ae=console.error,ie=console.group,le=console.groupCollapsed,ue=console.groupEnd;var e={configurable:!0,enumerable:!0,value:se,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}D++}}function Me(){{if(D--,D===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:F({},e,{value:te}),info:F({},e,{value:ne}),warn:F({},e,{value:oe}),error:F({},e,{value:ae}),group:F({},e,{value:ie}),groupCollapsed:F({},e,{value:le}),groupEnd:F({},e,{value:ue})})}D<0&&g("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var q=j.ReactCurrentDispatcher,J;function Y(e,t,n){{if(J===void 0)try{throw Error()}catch(u){var o=u.stack.trim().match(/\n( *(at )?)/);J=o&&o[1]||""}return`
+`+J+e}}var z=!1,M;{var Le=typeof WeakMap=="function"?WeakMap:Map;M=new Le}function ce(e,t){if(!e||z)return"";{var n=M.get(e);if(n!==void 0)return n}var o;z=!0;var u=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var s;s=q.current,q.current=null,Ye();try{if(t){var l=function(){throw Error()};if(Object.defineProperty(l.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(l,[])}catch(h){o=h}Reflect.construct(e,[],l)}else{try{l.call()}catch(h){o=h}e.call(l.prototype)}}else{try{throw Error()}catch(h){o=h}e()}}catch(h){if(h&&o&&typeof h.stack=="string"){for(var a=h.stack.split(`
+`),b=o.stack.split(`
+`),c=a.length-1,d=b.length-1;c>=1&&d>=0&&a[c]!==b[d];)d--;for(;c>=1&&d>=0;c--,d--)if(a[c]!==b[d]){if(c!==1||d!==1)do if(c--,d--,d<0||a[c]!==b[d]){var E=`
+`+a[c].replace(" at new "," at ");return e.displayName&&E.includes("<anonymous>")&&(E=E.replace("<anonymous>",e.displayName)),typeof e=="function"&&M.set(e,E),E}while(c>=1&&d>=0);break}}}finally{z=!1,q.current=s,Me(),Error.prepareStackTrace=u}var S=e?e.displayName||e.name:"",O=S?Y(S):"";return typeof e=="function"&&M.set(e,O),O}function Ve(e,t,n){return ce(e,!1)}function Ue(e){var t=e.prototype;return!!(t&&t.isReactComponent)}function L(e,t,n){if(e==null)return"";if(typeof e=="function")return ce(e,Ue(e));if(typeof e=="string")return Y(e);switch(e){case T:return Y("Suspense");case m:return Y("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case p:return Ve(e.render);case _:return L(e.type,t,n);case w:{var o=e,u=o._payload,s=o._init;try{return L(s(u),t,n)}catch{}}}return""}var k=Object.prototype.hasOwnProperty,fe={},de=j.ReactDebugCurrentFrame;function V(e){if(e){var t=e._owner,n=L(e.type,e._source,t?t.type:null);de.setExtraStackFrame(n)}else de.setExtraStackFrame(null)}function Ne(e,t,n,o,u){{var s=Function.call.bind(k);for(var l in e)if(s(e,l)){var a=void 0;try{if(typeof e[l]!="function"){var b=Error((o||"React class")+": "+n+" type `"+l+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[l]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw b.name="Invariant Violation",b}a=e[l](t,l,o,n,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(c){a=c}a&&!(a instanceof Error)&&(V(u),g("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",o||"React class",n,l,typeof a),V(null)),a instanceof Error&&!(a.message in fe)&&(fe[a.message]=!0,V(u),g("Failed %s type: %s",n,a.message),V(null))}}}var qe=Array.isArray;function K(e){return qe(e)}function Je(e){{var t=typeof Symbol=="function"&&Symbol.toStringTag,n=t&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n}}function ze(e){try{return ve(e),!1}catch{return!0}}function ve(e){return""+e}function pe(e){if(ze(e))return g("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Je(e)),ve(e)}var ge=j.ReactCurrentOwner,Ke={key:!0,ref:!0,__self:!0,__source:!0},be,ye;function Ge(e){if(k.call(e,"ref")){var t=Object.getOwnPropertyDescriptor(e,"ref").get;if(t&&t.isReactWarning)return!1}return e.ref!==void 0}function Xe(e){if(k.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function He(e,t){typeof e.ref=="string"&&ge.current}function Ze(e,t){{var n=function(){be||(be=!0,g("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}}function Qe(e,t){{var n=function(){ye||(ye=!0,g("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};n.isReactWarning=!0,Object.defineProperty(e,"ref",{get:n,configurable:!0})}}var er=function(e,t,n,o,u,s,l){var a={$$typeof:f,type:e,key:t,ref:n,props:l,_owner:s};return a._store={},Object.defineProperty(a._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(a,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(a,"_source",{configurable:!1,enumerable:!1,writable:!1,value:u}),Object.freeze&&(Object.freeze(a.props),Object.freeze(a)),a};function rr(e,t,n,o,u){{var s,l={},a=null,b=null;n!==void 0&&(pe(n),a=""+n),Xe(t)&&(pe(t.key),a=""+t.key),Ge(t)&&(b=t.ref,He(t,u));for(s in t)k.call(t,s)&&!Ke.hasOwnProperty(s)&&(l[s]=t[s]);if(e&&e.defaultProps){var c=e.defaultProps;for(s in c)l[s]===void 0&&(l[s]=c[s])}if(a||b){var d=typeof e=="function"?e.displayName||e.name||"Unknown":e;a&&Ze(l,d),b&&Qe(l,d)}return er(e,a,b,u,o,ge.current,l)}}var G=j.ReactCurrentOwner,he=j.ReactDebugCurrentFrame;function P(e){if(e){var t=e._owner,n=L(e.type,e._source,t?t.type:null);he.setExtraStackFrame(n)}else he.setExtraStackFrame(null)}var X;X=!1;function H(e){return typeof e=="object"&&e!==null&&e.$$typeof===f}function me(){{if(G.current){var e=R(G.current.type);if(e)return`
+
+Check the render method of \``+e+"`."}return""}}function tr(e){return""}var Ee={};function nr(e){{var t=me();if(!t){var n=typeof e=="string"?e:e.displayName||e.name;n&&(t=`
+
+Check the top-level render call using <`+n+">.")}return t}}function _e(e,t){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var n=nr(t);if(Ee[n])return;Ee[n]=!0;var o="";e&&e._owner&&e._owner!==G.current&&(o=" It was passed a child from "+R(e._owner.type)+"."),P(e),g('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',n,o),P(null)}}function Re(e,t){{if(typeof e!="object")return;if(K(e))for(var n=0;n<e.length;n++){var o=e[n];H(o)&&_e(o,t)}else if(H(e))e._store&&(e._store.validated=!0);else if(e){var u=Pe(e);if(typeof u=="function"&&u!==e.entries)for(var s=u.call(e),l;!(l=s.next()).done;)H(l.value)&&_e(l.value,t)}}}function or(e){{var t=e.type;if(t==null||typeof t=="string")return;var n;if(typeof t=="function")n=t.propTypes;else if(typeof t=="object"&&(t.$$typeof===p||t.$$typeof===_))n=t.propTypes;else return;if(n){var o=R(t);Ne(n,e.props,"prop",o,e)}else if(t.PropTypes!==void 0&&!X){X=!0;var u=R(t);g("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",u||"Unknown")}typeof t.getDefaultProps=="function"&&!t.getDefaultProps.isReactClassApproved&&g("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function ar(e){{for(var t=Object.keys(e.props),n=0;n<t.length;n++){var o=t[n];if(o!=="children"&&o!=="key"){P(e),g("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",o),P(null);break}}e.ref!==null&&(P(e),g("Invalid attribute `ref` supplied to `React.Fragment`."),P(null))}}var $e={};function Ce(e,t,n,o,u,s){{var l=Ie(e);if(!l){var a="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(a+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var b=tr();b?a+=b:a+=me();var c;e===null?c="null":K(e)?c="array":e!==void 0&&e.$$typeof===f?(c="<"+(R(e.type)||"Unknown")+" />",a=" Did you accidentally export a JSX literal instead of a component?"):c=typeof e,g("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",c,a)}var d=rr(e,t,n,u,s);if(d==null)return d;if(l){var E=t.children;if(E!==void 0)if(o)if(K(E)){for(var S=0;S<E.length;S++)Re(E[S],e);Object.freeze&&Object.freeze(E)}else g("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Re(E,e)}if(k.call(t,"key")){var O=R(e),h=Object.keys(t).filter(function(fr){return fr!=="key"}),Z=h.length>0?"{key: someKey, "+h.join(": ..., ")+": ...}":"{key: someKey}";if(!$e[O+Z]){var cr=h.length>0?"{"+h.join(": ..., ")+": ...}":"{}";g(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,Z,O,cr,O),$e[O+Z]=!0}}return e===v?ar(d):or(d),d}}function ir(e,t,n){return Ce(e,t,n,!0)}function lr(e,t,n){return Ce(e,t,n,!1)}var ur=lr,sr=ir;B.Fragment=v,B.jsx=ur,B.jsxs=sr}()),B}var Oe;function Er(){return Oe||(Oe=1,process.env.NODE_ENV==="production"?U.exports=hr():U.exports=mr()),U.exports}Er();const i={white:"#FFFFFF",black:"#222222",gray50:"#FBFBFB",gray100:"#F7F8F9",gray200:"#EBEDF2",gray300:"#DADEE5",gray400:"#C6CBD3",gray500:"#BABFC9",gray600:"#A3A8B4",gray700:"#8A8F9D",gray800:"#6D717D",gray900:"#4A515D",blue100:"#F1F5FE",blue200:"#CEDBFF",blue300:"#A7BFFF",blue400:"#7EA1FF",blue500:"#5884FF",blue600:"#3369FF",blue700:"#2B59D9",blue800:"#244BB5",blue900:"#1D3C91",red50:"#FFF1EF",red100:"#FFACAD",red200:"#FF8182",red300:"#FA4549",red400:"#CF222E",red500:"#82071E",orange50:"#FFF1E5",orange100:"#FFD0AA",orange200:"#FFB37D",orange300:"#FF8E40",orange400:"#E16F24",orange500:"#953800",green50:"#EFFDEE",green100:"#8AE3A1",green200:"#4DD470",green300:"#1CB854",green400:"#149E53",green500:"#086A49",yellow50:"#FEF9E6",yellow100:"#FADD78",yellow200:"#F7CC33",yellow300:"#F7B200",yellow400:"#CB9D26",yellow500:"#956B00"};i.blue600,i.blue700,i.white,i.blue200,i.green300,i.green400,i.white,i.green50,i.red300,i.red400,i.white,i.red50,i.orange300,i.orange400,i.white,i.orange50,i.yellow300,i.yellow400,i.white,i.yellow50,i.gray900,i.black,i.black,i.gray300;N.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.1s linear;
+  transition-property: background-color, border-color;
+  cursor: pointer;
+  width: ${({$width:r})=>r};
+
+  color: ${i.white};
+  font-size: ${({$fontSize:r})=>r}rem;
+  font-weight: ${({$fontWeights:r})=>r[0]};
+  border-radius: ${({$borderRadius:r})=>r}rem;
+  padding-right: ${({$pr:r})=>r}rem;
+  padding-left: ${({$pl:r})=>r}rem;
+  height: ${({$height:r})=>r}px;
+  background-color: ${({$mainColor:r})=>r};
+
+  &:hover:not([disabled]) {
+    background-color: ${({$hoverColor:r})=>r};
+    font-weight: ${({$fontWeights:r})=>r[1]};
+  }
+
+  &:disabled {
+    background-color: ${({$disabledColor:r})=>r};
+  }
+`;N.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.1s linear;
+  transition-property: border-color, color, background-color;
+  cursor: pointer;
+  width: ${({$width:r})=>r};
+
+  background-color: ${({$isSelected:r,$mainColor:f})=>r?f:i.white};
+  color: ${({$mainColor:r,$isSelected:f})=>f?i.white:r};
+
+  border: 1px solid ${({$mainColor:r})=>r};
+  font-size: ${({$fontSize:r})=>r}rem;
+  font-weight: ${({$fontWeights:r})=>r[0]};
+  border-radius: ${({$borderRadius:r})=>r}rem;
+  padding-right: ${({$pr:r})=>r}rem;
+  padding-left: ${({$pl:r})=>r}rem;
+  height: ${({$height:r})=>r}px;
+
+  &:hover:not([disabled]) {
+    color: ${({$hoverColor:r})=>r};
+    border: 1px solid ${({$hoverColor:r})=>r};
+    font-weight: ${({$fontWeights:r})=>r[1]};
+    background-color: ${i.white};
+  }
+
+  &:disabled {
+    color: ${({$disabledColor:r})=>r};
+    border: 1px solid ${({$disabledColor:r})=>r};
+  }
+`;N.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.1s linear;
+  transition-property: border-color, color;
+  cursor: pointer;
+  width: ${({$width:r})=>r};
+
+  background-color: ${i.white};
+  color: ${({$mainColor:r})=>r};
+  border: 1px solid ${i.gray400};
+  font-size: ${({$fontSize:r})=>r}rem;
+  font-weight: ${({$fontWeights:r})=>r[0]};
+  border-radius: ${({$borderRadius:r})=>r}rem;
+  padding-right: ${({$pr:r})=>r}rem;
+  padding-left: ${({$pl:r})=>r}rem;
+  height: ${({$height:r})=>r}px;
+
+  &:hover:not([disabled]) {
+    color: ${({$hoverColor:r})=>r};
+    border: 1px solid ${i.gray600};
+    font-weight: ${({$fontWeights:r})=>r[1]};
+  }
+
+  &:disabled {
+    color: ${({$disabledColor:r})=>r};
+    border: 1px solid ${i.gray300};
+  }
+`;N.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.1s linear;
+  transition-property: border-color, color;
+  cursor: pointer;
+  width: ${({$width:r})=>r};
+
+  background-color: ${i.white};
+  color: ${({$mainColor:r,$isSelected:f})=>f?i.black:r};
+  border: none;
+  font-size: ${({$fontSize:r})=>r}rem;
+  font-weight: ${({$fontWeights:r})=>r[0]};
+  border-radius: ${({$borderRadius:r})=>r}rem;
+  padding-right: ${({$pr:r})=>r}rem;
+  padding-left: ${({$pl:r})=>r}rem;
+  height: ${({$height:r})=>r}px;
+
+  &:hover:not([disabled]) {
+    color: ${({$hoverColor:r})=>r};
+    font-weight: ${({$fontWeights:r})=>r[1]};
+  }
+
+  &:disabled {
+    color: ${({$disabledColor:r})=>r};
+  }
+`;exports.themeColors=i;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../lib/components/Button';
+export * from '../lib/styles/color.style';

package/dist/index.es.js

@@ -0,0 +1,820 @@
+"use client";
+import * as dr from "react";
+import N from "styled-components";
+function vr(r) {
+  if (r.__esModule) return r;
+  var d = r.default;
+  if (typeof d == "function") {
+    var E = function y() {
+      return this instanceof y ? Reflect.construct(d, arguments, this.constructor) : d.apply(this, arguments);
+    };
+    E.prototype = d.prototype;
+  } else E = {};
+  return Object.defineProperty(E, "__esModule", { value: !0 }), Object.keys(r).forEach(function(y) {
+    var $ = Object.getOwnPropertyDescriptor(r, y);
+    Object.defineProperty(E, y, $.get ? $ : {
+      enumerable: !0,
+      get: function() {
+        return r[y];
+      }
+    });
+  }), E;
+}
+var U = { exports: {} }, A = {};
+const Oe = /* @__PURE__ */ vr(dr);
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var we;
+function pr() {
+  if (we) return A;
+  we = 1;
+  var r = Oe, d = Symbol.for("react.element"), E = Symbol.for("react.fragment"), y = Object.prototype.hasOwnProperty, $ = r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, I = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function j(C, v, O) {
+    var h, _ = {}, w = null, W = null;
+    O !== void 0 && (w = "" + O), v.key !== void 0 && (w = "" + v.key), v.ref !== void 0 && (W = v.ref);
+    for (h in v) y.call(v, h) && !I.hasOwnProperty(h) && (_[h] = v[h]);
+    if (C && C.defaultProps) for (h in v = C.defaultProps, v) _[h] === void 0 && (_[h] = v[h]);
+    return { $$typeof: d, type: C, key: w, ref: W, props: _, _owner: $.current };
+  }
+  return A.Fragment = E, A.jsx = j, A.jsxs = j, A;
+}
+var B = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Fe;
+function gr() {
+  return Fe || (Fe = 1, process.env.NODE_ENV !== "production" && function() {
+    var r = Oe, d = Symbol.for("react.element"), E = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), $ = Symbol.for("react.strict_mode"), I = Symbol.for("react.profiler"), j = Symbol.for("react.provider"), C = Symbol.for("react.context"), v = Symbol.for("react.forward_ref"), O = Symbol.for("react.suspense"), h = Symbol.for("react.suspense_list"), _ = Symbol.for("react.memo"), w = Symbol.for("react.lazy"), W = Symbol.for("react.offscreen"), Q = Symbol.iterator, xe = "@@iterator";
+    function Pe(e) {
+      if (e === null || typeof e != "object")
+        return null;
+      var t = Q && e[Q] || e[xe];
+      return typeof t == "function" ? t : null;
+    }
+    var x = r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function p(e) {
+      {
+        for (var t = arguments.length, n = new Array(t > 1 ? t - 1 : 0), o = 1; o < t; o++)
+          n[o - 1] = arguments[o];
+        Se("error", e, n);
+      }
+    }
+    function Se(e, t, n) {
+      {
+        var o = x.ReactDebugCurrentFrame, u = o.getStackAddendum();
+        u !== "" && (t += "%s", n = n.concat([u]));
+        var s = n.map(function(i) {
+          return String(i);
+        });
+        s.unshift("Warning: " + t), Function.prototype.apply.call(console[e], console, s);
+      }
+    }
+    var je = !1, ke = !1, De = !1, Ae = !1, Be = !1, ee;
+    ee = Symbol.for("react.module.reference");
+    function Ie(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === y || e === I || Be || e === $ || e === O || e === h || Ae || e === W || je || ke || De || typeof e == "object" && e !== null && (e.$$typeof === w || e.$$typeof === _ || e.$$typeof === j || e.$$typeof === C || e.$$typeof === v || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      e.$$typeof === ee || e.getModuleId !== void 0));
+    }
+    function We(e, t, n) {
+      var o = e.displayName;
+      if (o)
+        return o;
+      var u = t.displayName || t.name || "";
+      return u !== "" ? n + "(" + u + ")" : n;
+    }
+    function re(e) {
+      return e.displayName || "Context";
+    }
+    function R(e) {
+      if (e == null)
+        return null;
+      if (typeof e.tag == "number" && p("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
+        return e.displayName || e.name || null;
+      if (typeof e == "string")
+        return e;
+      switch (e) {
+        case y:
+          return "Fragment";
+        case E:
+          return "Portal";
+        case I:
+          return "Profiler";
+        case $:
+          return "StrictMode";
+        case O:
+          return "Suspense";
+        case h:
+          return "SuspenseList";
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case C:
+            var t = e;
+            return re(t) + ".Consumer";
+          case j:
+            var n = e;
+            return re(n._context) + ".Provider";
+          case v:
+            return We(e, e.render, "ForwardRef");
+          case _:
+            var o = e.displayName || null;
+            return o !== null ? o : R(e.type) || "Memo";
+          case w: {
+            var u = e, s = u._payload, i = u._init;
+            try {
+              return R(i(s));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var F = Object.assign, k = 0, te, ne, oe, ae, ie, le, ue;
+    function se() {
+    }
+    se.__reactDisabledLog = !0;
+    function Ye() {
+      {
+        if (k === 0) {
+          te = console.log, ne = console.info, oe = console.warn, ae = console.error, ie = console.group, le = console.groupCollapsed, ue = console.groupEnd;
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            value: se,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: e,
+            log: e,
+            warn: e,
+            error: e,
+            group: e,
+            groupCollapsed: e,
+            groupEnd: e
+          });
+        }
+        k++;
+      }
+    }
+    function Me() {
+      {
+        if (k--, k === 0) {
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: F({}, e, {
+              value: te
+            }),
+            info: F({}, e, {
+              value: ne
+            }),
+            warn: F({}, e, {
+              value: oe
+            }),
+            error: F({}, e, {
+              value: ae
+            }),
+            group: F({}, e, {
+              value: ie
+            }),
+            groupCollapsed: F({}, e, {
+              value: le
+            }),
+            groupEnd: F({}, e, {
+              value: ue
+            })
+          });
+        }
+        k < 0 && p("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var J = x.ReactCurrentDispatcher, q;
+    function Y(e, t, n) {
+      {
+        if (q === void 0)
+          try {
+            throw Error();
+          } catch (u) {
+            var o = u.stack.trim().match(/\n( *(at )?)/);
+            q = o && o[1] || "";
+          }
+        return `
+` + q + e;
+      }
+    }
+    var z = !1, M;
+    {
+      var Le = typeof WeakMap == "function" ? WeakMap : Map;
+      M = new Le();
+    }
+    function ce(e, t) {
+      if (!e || z)
+        return "";
+      {
+        var n = M.get(e);
+        if (n !== void 0)
+          return n;
+      }
+      var o;
+      z = !0;
+      var u = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var s;
+      s = J.current, J.current = null, Ye();
+      try {
+        if (t) {
+          var i = function() {
+            throw Error();
+          };
+          if (Object.defineProperty(i.prototype, "props", {
+            set: function() {
+              throw Error();
+            }
+          }), typeof Reflect == "object" && Reflect.construct) {
+            try {
+              Reflect.construct(i, []);
+            } catch (b) {
+              o = b;
+            }
+            Reflect.construct(e, [], i);
+          } else {
+            try {
+              i.call();
+            } catch (b) {
+              o = b;
+            }
+            e.call(i.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (b) {
+            o = b;
+          }
+          e();
+        }
+      } catch (b) {
+        if (b && o && typeof b.stack == "string") {
+          for (var a = b.stack.split(`
+`), g = o.stack.split(`
+`), c = a.length - 1, f = g.length - 1; c >= 1 && f >= 0 && a[c] !== g[f]; )
+            f--;
+          for (; c >= 1 && f >= 0; c--, f--)
+            if (a[c] !== g[f]) {
+              if (c !== 1 || f !== 1)
+                do
+                  if (c--, f--, f < 0 || a[c] !== g[f]) {
+                    var m = `
+` + a[c].replace(" at new ", " at ");
+                    return e.displayName && m.includes("<anonymous>") && (m = m.replace("<anonymous>", e.displayName)), typeof e == "function" && M.set(e, m), m;
+                  }
+                while (c >= 1 && f >= 0);
+              break;
+            }
+        }
+      } finally {
+        z = !1, J.current = s, Me(), Error.prepareStackTrace = u;
+      }
+      var S = e ? e.displayName || e.name : "", T = S ? Y(S) : "";
+      return typeof e == "function" && M.set(e, T), T;
+    }
+    function Ve(e, t, n) {
+      return ce(e, !1);
+    }
+    function Ue(e) {
+      var t = e.prototype;
+      return !!(t && t.isReactComponent);
+    }
+    function L(e, t, n) {
+      if (e == null)
+        return "";
+      if (typeof e == "function")
+        return ce(e, Ue(e));
+      if (typeof e == "string")
+        return Y(e);
+      switch (e) {
+        case O:
+          return Y("Suspense");
+        case h:
+          return Y("SuspenseList");
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case v:
+            return Ve(e.render);
+          case _:
+            return L(e.type, t, n);
+          case w: {
+            var o = e, u = o._payload, s = o._init;
+            try {
+              return L(s(u), t, n);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var D = Object.prototype.hasOwnProperty, fe = {}, de = x.ReactDebugCurrentFrame;
+    function V(e) {
+      if (e) {
+        var t = e._owner, n = L(e.type, e._source, t ? t.type : null);
+        de.setExtraStackFrame(n);
+      } else
+        de.setExtraStackFrame(null);
+    }
+    function Ne(e, t, n, o, u) {
+      {
+        var s = Function.call.bind(D);
+        for (var i in e)
+          if (s(e, i)) {
+            var a = void 0;
+            try {
+              if (typeof e[i] != "function") {
+                var g = Error((o || "React class") + ": " + n + " type `" + i + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[i] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw g.name = "Invariant Violation", g;
+              }
+              a = e[i](t, i, o, n, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (c) {
+              a = c;
+            }
+            a && !(a instanceof Error) && (V(u), p("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", o || "React class", n, i, typeof a), V(null)), a instanceof Error && !(a.message in fe) && (fe[a.message] = !0, V(u), p("Failed %s type: %s", n, a.message), V(null));
+          }
+      }
+    }
+    var Je = Array.isArray;
+    function K(e) {
+      return Je(e);
+    }
+    function qe(e) {
+      {
+        var t = typeof Symbol == "function" && Symbol.toStringTag, n = t && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return n;
+      }
+    }
+    function ze(e) {
+      try {
+        return ve(e), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function ve(e) {
+      return "" + e;
+    }
+    function pe(e) {
+      if (ze(e))
+        return p("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", qe(e)), ve(e);
+    }
+    var ge = x.ReactCurrentOwner, Ke = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, be, he;
+    function Ge(e) {
+      if (D.call(e, "ref")) {
+        var t = Object.getOwnPropertyDescriptor(e, "ref").get;
+        if (t && t.isReactWarning)
+          return !1;
+      }
+      return e.ref !== void 0;
+    }
+    function Xe(e) {
+      if (D.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning)
+          return !1;
+      }
+      return e.key !== void 0;
+    }
+    function He(e, t) {
+      typeof e.ref == "string" && ge.current;
+    }
+    function Ze(e, t) {
+      {
+        var n = function() {
+          be || (be = !0, p("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", t));
+        };
+        n.isReactWarning = !0, Object.defineProperty(e, "key", {
+          get: n,
+          configurable: !0
+        });
+      }
+    }
+    function Qe(e, t) {
+      {
+        var n = function() {
+          he || (he = !0, p("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", t));
+        };
+        n.isReactWarning = !0, Object.defineProperty(e, "ref", {
+          get: n,
+          configurable: !0
+        });
+      }
+    }
+    var er = function(e, t, n, o, u, s, i) {
+      var a = {
+        // This tag allows us to uniquely identify this as a React Element
+        $$typeof: d,
+        // Built-in properties that belong on the element
+        type: e,
+        key: t,
+        ref: n,
+        props: i,
+        // Record the component responsible for creating this element.
+        _owner: s
+      };
+      return a._store = {}, Object.defineProperty(a._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: !1
+      }), Object.defineProperty(a, "_self", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: o
+      }), Object.defineProperty(a, "_source", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: u
+      }), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
+    };
+    function rr(e, t, n, o, u) {
+      {
+        var s, i = {}, a = null, g = null;
+        n !== void 0 && (pe(n), a = "" + n), Xe(t) && (pe(t.key), a = "" + t.key), Ge(t) && (g = t.ref, He(t, u));
+        for (s in t)
+          D.call(t, s) && !Ke.hasOwnProperty(s) && (i[s] = t[s]);
+        if (e && e.defaultProps) {
+          var c = e.defaultProps;
+          for (s in c)
+            i[s] === void 0 && (i[s] = c[s]);
+        }
+        if (a || g) {
+          var f = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
+          a && Ze(i, f), g && Qe(i, f);
+        }
+        return er(e, a, g, u, o, ge.current, i);
+      }
+    }
+    var G = x.ReactCurrentOwner, ye = x.ReactDebugCurrentFrame;
+    function P(e) {
+      if (e) {
+        var t = e._owner, n = L(e.type, e._source, t ? t.type : null);
+        ye.setExtraStackFrame(n);
+      } else
+        ye.setExtraStackFrame(null);
+    }
+    var X;
+    X = !1;
+    function H(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === d;
+    }
+    function me() {
+      {
+        if (G.current) {
+          var e = R(G.current.type);
+          if (e)
+            return `
+
+Check the render method of \`` + e + "`.";
+        }
+        return "";
+      }
+    }
+    function tr(e) {
+      return "";
+    }
+    var Ee = {};
+    function nr(e) {
+      {
+        var t = me();
+        if (!t) {
+          var n = typeof e == "string" ? e : e.displayName || e.name;
+          n && (t = `
+
+Check the top-level render call using <` + n + ">.");
+        }
+        return t;
+      }
+    }
+    function _e(e, t) {
+      {
+        if (!e._store || e._store.validated || e.key != null)
+          return;
+        e._store.validated = !0;
+        var n = nr(t);
+        if (Ee[n])
+          return;
+        Ee[n] = !0;
+        var o = "";
+        e && e._owner && e._owner !== G.current && (o = " It was passed a child from " + R(e._owner.type) + "."), P(e), p('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', n, o), P(null);
+      }
+    }
+    function Re(e, t) {
+      {
+        if (typeof e != "object")
+          return;
+        if (K(e))
+          for (var n = 0; n < e.length; n++) {
+            var o = e[n];
+            H(o) && _e(o, t);
+          }
+        else if (H(e))
+          e._store && (e._store.validated = !0);
+        else if (e) {
+          var u = Pe(e);
+          if (typeof u == "function" && u !== e.entries)
+            for (var s = u.call(e), i; !(i = s.next()).done; )
+              H(i.value) && _e(i.value, t);
+        }
+      }
+    }
+    function or(e) {
+      {
+        var t = e.type;
+        if (t == null || typeof t == "string")
+          return;
+        var n;
+        if (typeof t == "function")
+          n = t.propTypes;
+        else if (typeof t == "object" && (t.$$typeof === v || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        t.$$typeof === _))
+          n = t.propTypes;
+        else
+          return;
+        if (n) {
+          var o = R(t);
+          Ne(n, e.props, "prop", o, e);
+        } else if (t.PropTypes !== void 0 && !X) {
+          X = !0;
+          var u = R(t);
+          p("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", u || "Unknown");
+        }
+        typeof t.getDefaultProps == "function" && !t.getDefaultProps.isReactClassApproved && p("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function ar(e) {
+      {
+        for (var t = Object.keys(e.props), n = 0; n < t.length; n++) {
+          var o = t[n];
+          if (o !== "children" && o !== "key") {
+            P(e), p("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", o), P(null);
+            break;
+          }
+        }
+        e.ref !== null && (P(e), p("Invalid attribute `ref` supplied to `React.Fragment`."), P(null));
+      }
+    }
+    var $e = {};
+    function Ce(e, t, n, o, u, s) {
+      {
+        var i = Ie(e);
+        if (!i) {
+          var a = "";
+          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (a += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var g = tr();
+          g ? a += g : a += me();
+          var c;
+          e === null ? c = "null" : K(e) ? c = "array" : e !== void 0 && e.$$typeof === d ? (c = "<" + (R(e.type) || "Unknown") + " />", a = " Did you accidentally export a JSX literal instead of a component?") : c = typeof e, p("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", c, a);
+        }
+        var f = rr(e, t, n, u, s);
+        if (f == null)
+          return f;
+        if (i) {
+          var m = t.children;
+          if (m !== void 0)
+            if (o)
+              if (K(m)) {
+                for (var S = 0; S < m.length; S++)
+                  Re(m[S], e);
+                Object.freeze && Object.freeze(m);
+              } else
+                p("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+            else
+              Re(m, e);
+        }
+        if (D.call(t, "key")) {
+          var T = R(e), b = Object.keys(t).filter(function(fr) {
+            return fr !== "key";
+          }), Z = b.length > 0 ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!$e[T + Z]) {
+            var cr = b.length > 0 ? "{" + b.join(": ..., ") + ": ...}" : "{}";
+            p(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`, Z, T, cr, T), $e[T + Z] = !0;
+          }
+        }
+        return e === y ? ar(f) : or(f), f;
+      }
+    }
+    function ir(e, t, n) {
+      return Ce(e, t, n, !0);
+    }
+    function lr(e, t, n) {
+      return Ce(e, t, n, !1);
+    }
+    var ur = lr, sr = ir;
+    B.Fragment = y, B.jsx = ur, B.jsxs = sr;
+  }()), B;
+}
+var Te;
+function br() {
+  return Te || (Te = 1, process.env.NODE_ENV === "production" ? U.exports = pr() : U.exports = gr()), U.exports;
+}
+br();
+const l = {
+  white: "#FFFFFF",
+  black: "#222222",
+  gray50: "#FBFBFB",
+  gray100: "#F7F8F9",
+  gray200: "#EBEDF2",
+  gray300: "#DADEE5",
+  gray400: "#C6CBD3",
+  gray500: "#BABFC9",
+  gray600: "#A3A8B4",
+  gray700: "#8A8F9D",
+  gray800: "#6D717D",
+  gray900: "#4A515D",
+  blue100: "#F1F5FE",
+  blue200: "#CEDBFF",
+  blue300: "#A7BFFF",
+  blue400: "#7EA1FF",
+  blue500: "#5884FF",
+  blue600: "#3369FF",
+  blue700: "#2B59D9",
+  blue800: "#244BB5",
+  blue900: "#1D3C91",
+  red50: "#FFF1EF",
+  red100: "#FFACAD",
+  red200: "#FF8182",
+  red300: "#FA4549",
+  red400: "#CF222E",
+  red500: "#82071E",
+  orange50: "#FFF1E5",
+  orange100: "#FFD0AA",
+  orange200: "#FFB37D",
+  orange300: "#FF8E40",
+  orange400: "#E16F24",
+  orange500: "#953800",
+  green50: "#EFFDEE",
+  green100: "#8AE3A1",
+  green200: "#4DD470",
+  green300: "#1CB854",
+  green400: "#149E53",
+  green500: "#086A49",
+  yellow50: "#FEF9E6",
+  yellow100: "#FADD78",
+  yellow200: "#F7CC33",
+  yellow300: "#F7B200",
+  yellow400: "#CB9D26",
+  yellow500: "#956B00"
+};
+l.blue600, l.blue700, l.white, l.blue200, l.green300, l.green400, l.white, l.green50, l.red300, l.red400, l.white, l.red50, l.orange300, l.orange400, l.white, l.orange50, l.yellow300, l.yellow400, l.white, l.yellow50, l.gray900, l.black, l.black, l.gray300;
+N.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.1s linear;
+  transition-property: background-color, border-color;
+  cursor: pointer;
+  width: ${({ $width: r }) => r};
+
+  color: ${l.white};
+  font-size: ${({ $fontSize: r }) => r}rem;
+  font-weight: ${({ $fontWeights: r }) => r[0]};
+  border-radius: ${({ $borderRadius: r }) => r}rem;
+  padding-right: ${({ $pr: r }) => r}rem;
+  padding-left: ${({ $pl: r }) => r}rem;
+  height: ${({ $height: r }) => r}px;
+  background-color: ${({ $mainColor: r }) => r};
+
+  &:hover:not([disabled]) {
+    background-color: ${({ $hoverColor: r }) => r};
+    font-weight: ${({ $fontWeights: r }) => r[1]};
+  }
+
+  &:disabled {
+    background-color: ${({ $disabledColor: r }) => r};
+  }
+`;
+N.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.1s linear;
+  transition-property: border-color, color, background-color;
+  cursor: pointer;
+  width: ${({ $width: r }) => r};
+
+  background-color: ${({ $isSelected: r, $mainColor: d }) => r ? d : l.white};
+  color: ${({ $mainColor: r, $isSelected: d }) => d ? l.white : r};
+
+  border: 1px solid ${({ $mainColor: r }) => r};
+  font-size: ${({ $fontSize: r }) => r}rem;
+  font-weight: ${({ $fontWeights: r }) => r[0]};
+  border-radius: ${({ $borderRadius: r }) => r}rem;
+  padding-right: ${({ $pr: r }) => r}rem;
+  padding-left: ${({ $pl: r }) => r}rem;
+  height: ${({ $height: r }) => r}px;
+
+  &:hover:not([disabled]) {
+    color: ${({ $hoverColor: r }) => r};
+    border: 1px solid ${({ $hoverColor: r }) => r};
+    font-weight: ${({ $fontWeights: r }) => r[1]};
+    background-color: ${l.white};
+  }
+
+  &:disabled {
+    color: ${({ $disabledColor: r }) => r};
+    border: 1px solid ${({ $disabledColor: r }) => r};
+  }
+`;
+N.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.1s linear;
+  transition-property: border-color, color;
+  cursor: pointer;
+  width: ${({ $width: r }) => r};
+
+  background-color: ${l.white};
+  color: ${({ $mainColor: r }) => r};
+  border: 1px solid ${l.gray400};
+  font-size: ${({ $fontSize: r }) => r}rem;
+  font-weight: ${({ $fontWeights: r }) => r[0]};
+  border-radius: ${({ $borderRadius: r }) => r}rem;
+  padding-right: ${({ $pr: r }) => r}rem;
+  padding-left: ${({ $pl: r }) => r}rem;
+  height: ${({ $height: r }) => r}px;
+
+  &:hover:not([disabled]) {
+    color: ${({ $hoverColor: r }) => r};
+    border: 1px solid ${l.gray600};
+    font-weight: ${({ $fontWeights: r }) => r[1]};
+  }
+
+  &:disabled {
+    color: ${({ $disabledColor: r }) => r};
+    border: 1px solid ${l.gray300};
+  }
+`;
+N.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.1s linear;
+  transition-property: border-color, color;
+  cursor: pointer;
+  width: ${({ $width: r }) => r};
+
+  background-color: ${l.white};
+  color: ${({ $mainColor: r, $isSelected: d }) => d ? l.black : r};
+  border: none;
+  font-size: ${({ $fontSize: r }) => r}rem;
+  font-weight: ${({ $fontWeights: r }) => r[0]};
+  border-radius: ${({ $borderRadius: r }) => r}rem;
+  padding-right: ${({ $pr: r }) => r}rem;
+  padding-left: ${({ $pl: r }) => r}rem;
+  height: ${({ $height: r }) => r}px;
+
+  &:hover:not([disabled]) {
+    color: ${({ $hoverColor: r }) => r};
+    font-weight: ${({ $fontWeights: r }) => r[1]};
+  }
+
+  &:disabled {
+    color: ${({ $disabledColor: r }) => r};
+  }
+`;
+export {
+  l as themeColors
+};

package/dist/styles/color.style.d.ts

@@ -0,0 +1,48 @@
+export declare const themeColors: ThemeColors;
+export interface ThemeColors {
+    white: string;
+    black: string;
+    gray50: string;
+    gray100: string;
+    gray200: string;
+    gray300: string;
+    gray400: string;
+    gray500: string;
+    gray600: string;
+    gray700: string;
+    gray800: string;
+    gray900: string;
+    blue100: string;
+    blue200: string;
+    blue300: string;
+    blue400: string;
+    blue500: string;
+    blue600: string;
+    blue700: string;
+    blue800: string;
+    blue900: string;
+    red50: string;
+    red100: string;
+    red200: string;
+    red300: string;
+    red400: string;
+    red500: string;
+    orange50: string;
+    orange100: string;
+    orange200: string;
+    orange300: string;
+    orange400: string;
+    orange500: string;
+    green50: string;
+    green100: string;
+    green200: string;
+    green300: string;
+    green400: string;
+    green500: string;
+    yellow50: string;
+    yellow100: string;
+    yellow200: string;
+    yellow300: string;
+    yellow400: string;
+    yellow500: string;
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "enerdot-front-system",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "keywords": [
+    "enerdot-front-system",
+    "enerdot",
+    "react",
+    "design-system"
+  ],
+  "main": "dist/index.cjs.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.es.js",
+  "description": "enerdot frontend system",
+  "license": "ISC",
+  "files": [
+    "dist/**/*",
+    "!dist/vite.config.d.ts",
+    "!dist/logo.svg"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.14"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.14"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/node": "^22.10.5",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "globals": "^15.14.0",
+    "path": "^0.12.7",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.2",
+    "url": "^0.11.4",
+    "vite": "^6.0.5",
+    "vite-plugin-dts": "^4.4.0"
+  }
+}