@remember-web/primitive 0.1.11 → 0.1.13

package/dist/src/Badge/style.esm.js

@@ -1,29 +0,0 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import styled, { css } from 'styled-components';
-import { getTypographyStyles, secondary100, contents999 } from '@remember-web/mixin';
-
-var _templateObject, _templateObject2, _templateObject3;
-
-/**
- * pseudo로 사용시 data-badge-value attribue가 필요합니다.
- */
-var badgeCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  display: inline-block;\n  box-sizing: border-box;\n  line-height: 16px;\n  min-height: 8px;\n  background: ", ";\n  color: ", ";\n  border-radius: 8px;\n  padding: 1px 4px 0 4px;\n"])), getTypographyStyles('Subtitle2'), secondary100, contents999);
-
-/**
- * @param pseudo - default: 'after'
- * @param top - default: 0
- * @param right - default: 0
- */
-var getBadgePseudoCss = function getBadgePseudoCss() {
-  var pseudo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'after';
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$top = _ref.top,
-    top = _ref$top === void 0 ? 0 : _ref$top,
-    _ref$right = _ref.right,
-    right = _ref$right === void 0 ? 0 : _ref$right;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &[data-badge-value]::", " {\n    ", ";\n    content: attr(data-badge-value);\n    position: absolute;\n    top: ", ";\n    right: ", ";\n    transform: translate(50%, -50%);\n  }\n"])), pseudo, badgeCss, top, right);
-};
-var StyledBadge = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n"])), badgeCss);
-
-export { StyledBadge, badgeCss, getBadgePseudoCss };
-//# sourceMappingURL=style.esm.js.map

package/dist/src/Badge/style.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.esm.js","sources":["../../../src/Badge/style.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n  contents999,\n  getTypographyStyles,\n  secondary100,\n} from '@remember-web/mixin';\n\n/**\n * pseudo로 사용시 data-badge-value attribue가 필요합니다.\n */\nexport const badgeCss = css`\n  ${getTypographyStyles('Subtitle2')}\n\n  display: inline-block;\n  box-sizing: border-box;\n  line-height: 16px;\n  min-height: 8px;\n  background: ${secondary100};\n  color: ${contents999};\n  border-radius: 8px;\n  padding: 1px 4px 0 4px;\n`;\n\n/**\n * @param pseudo - default: 'after'\n * @param top - default: 0\n * @param right - default: 0\n */\nexport const getBadgePseudoCss = (\n  pseudo: 'after' | 'before' = 'after',\n  { top = 0, right = 0 } = {}\n) => css`\n  &[data-badge-value]::${pseudo} {\n    ${badgeCss};\n    content: attr(data-badge-value);\n    position: absolute;\n    top: ${top};\n    right: ${right};\n    transform: translate(50%, -50%);\n  }\n`;\n\nexport const StyledBadge = styled.span`\n  ${badgeCss};\n`;\n"],"names":["badgeCss","css","_templateObject","_taggedTemplateLiteral","getTypographyStyles","secondary100","contents999","getBadgePseudoCss","pseudo","arguments","length","undefined","_ref","_ref$top","top","_ref$right","right","_templateObject2","StyledBadge","styled","span","_templateObject3"],"mappings":";;;;;;AAOA;AACA;AACA;IACaA,QAAQ,GAAGC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CACvBC,CAAAA,MAAAA,EAAAA,mHAAAA,EAAAA,cAAAA,EAAAA,uDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,mBAAmB,CAAC,WAAW,CAAC,EAMpBC,YAAY,EACjBC,WAAW,EAGrB;;AAED;AACA;AACA;AACA;AACA;AACaC,IAAAA,iBAAiB,GAAG,SAApBA,iBAAiBA,GAAA;AAAA,EAAA,IAC5BC,MAA0B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,OAAO,CAAA;AAAA,EAAA,IAAAG,IAAA,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GACX,EAAE;IAAAI,QAAA,GAAAD,IAAA,CAAzBE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,QAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,QAAA;IAAAE,UAAA,GAAAH,IAAA,CAAEI,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,UAAA,CAAA;AAAA,EAAA,OACjBd,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAd,sBAAA,CACiBK,CAAAA,2BAAAA,EAAAA,UAAAA,EAAAA,6EAAAA,EAAAA,gBAAAA,EAAAA,gDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,MAAM,EACzBR,QAAQ,EAGHc,GAAG,EACDE,KAAK,CAAA,CAAA;AAAA,EAGjB;AAEYE,IAAAA,WAAW,GAAGC,MAAM,CAACC,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAlB,sBAAA,CAAA,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA,EAClCH,QAAQ;;;;"}

package/dist/src/Badge/types.d.ts

@@ -1,10 +0,0 @@
-import type { badgePseudo } from '../Badge/utils';
-export type BadgeValueProps = {
-    /**
-     * @default 99
-     */
-    max?: number;
-    current?: number;
-} | string;
-export type BadgeAttribute = Partial<ReturnType<(typeof badgePseudo)['getBadgeAttr']>>;
-//# sourceMappingURL=types.d.ts.map

package/dist/src/Badge/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/Badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,MAAM,MAAM,eAAe,GACvB;IACE;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GACD,MAAM,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,OAAO,CAClC,UAAU,CAAC,CAAC,OAAO,WAAW,CAAC,CAAC,cAAc,CAAC,CAAC,CACjD,CAAC"}

package/dist/src/Badge/utils.cjs.js

@@ -1,26 +0,0 @@
-'use strict';
-
-var style = require('./style.cjs.js');
-
-var getBadgeValue = function getBadgeValue(props) {
-  if (typeof props === 'string') {
-    return props;
-  }
-  var _props$max = props.max,
-    max = _props$max === void 0 ? 99 : _props$max,
-    _props$current = props.current,
-    current = _props$current === void 0 ? 0 : _props$current;
-  return current > max ? "".concat(max, "+") : "".concat(current);
-};
-var badgePseudo = {
-  getBadgePseudoCss: style.getBadgePseudoCss,
-  getBadgeAttr: function getBadgeAttr(props) {
-    return {
-      'data-badge-value': getBadgeValue(props)
-    };
-  }
-};
-
-exports.badgePseudo = badgePseudo;
-exports.getBadgeValue = getBadgeValue;
-//# sourceMappingURL=utils.cjs.js.map

package/dist/src/Badge/utils.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.cjs.js","sources":["../../../src/Badge/utils.ts"],"sourcesContent":["import type { BadgeValueProps } from '@/Badge/types';\nimport { getBadgePseudoCss } from '@/Badge/style';\n\nexport const getBadgeValue = (props: BadgeValueProps): string => {\n  if (typeof props === 'string') {\n    return props;\n  }\n\n  const { max = 99, current = 0 } = props;\n\n  return current > max ? `${max}+` : `${current}`;\n};\n\nexport const badgePseudo = {\n  getBadgePseudoCss,\n  getBadgeAttr: (props: BadgeValueProps) => ({\n    'data-badge-value': getBadgeValue(props),\n  }),\n};\n"],"names":["getBadgeValue","props","_props$max","max","_props$current","current","concat","badgePseudo","getBadgePseudoCss","getBadgeAttr"],"mappings":";;;;IAGaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAsB,EAAa;AAC/D,EAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;AAC7B,IAAA,OAAOA,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,IAAAC,UAAA,GAAkCD,KAAK,CAA/BE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,UAAA;IAAAE,cAAA,GAAkBH,KAAK,CAArBI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,cAAA,CAAA;EAE7B,OAAOC,OAAO,GAAGF,GAAG,GAAAG,EAAAA,CAAAA,MAAA,CAAMH,GAAG,EAAAG,GAAAA,CAAAA,GAAAA,EAAAA,CAAAA,MAAA,CAASD,OAAO,CAAE,CAAA;AACjD,EAAC;AAEM,IAAME,WAAW,GAAG;AACzBC,EAAAA,iBAAiB,EAAjBA,uBAAiB;EACjBC,YAAY,EAAE,SAAAA,YAAAA,CAACR,KAAsB,EAAA;IAAA,OAAM;MACzC,kBAAkB,EAAED,aAAa,CAACC,KAAK,CAAA;KACxC,CAAA;AAAA,GAAA;AACH;;;;;"}

package/dist/src/Badge/utils.d.ts

@@ -1,12 +0,0 @@
-import type { BadgeValueProps } from '../Badge/types';
-export declare const getBadgeValue: (props: BadgeValueProps) => string;
-export declare const badgePseudo: {
-    getBadgePseudoCss: (pseudo?: "after" | "before", { top, right }?: {
-        top?: number | undefined;
-        right?: number | undefined;
-    }) => import("styled-components").RuleSet<object>;
-    getBadgeAttr: (props: BadgeValueProps) => {
-        'data-badge-value': string;
-    };
-};
-//# sourceMappingURL=utils.d.ts.map

package/dist/src/Badge/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/Badge/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,eAAO,MAAM,aAAa,UAAW,eAAe,KAAG,MAQtD,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;0BAEA,eAAe;;;CAGtC,CAAC"}

package/dist/src/Badge/utils.esm.js

@@ -1,23 +0,0 @@
-import { getBadgePseudoCss } from './style.esm.js';
-
-var getBadgeValue = function getBadgeValue(props) {
-  if (typeof props === 'string') {
-    return props;
-  }
-  var _props$max = props.max,
-    max = _props$max === void 0 ? 99 : _props$max,
-    _props$current = props.current,
-    current = _props$current === void 0 ? 0 : _props$current;
-  return current > max ? "".concat(max, "+") : "".concat(current);
-};
-var badgePseudo = {
-  getBadgePseudoCss: getBadgePseudoCss,
-  getBadgeAttr: function getBadgeAttr(props) {
-    return {
-      'data-badge-value': getBadgeValue(props)
-    };
-  }
-};
-
-export { badgePseudo, getBadgeValue };
-//# sourceMappingURL=utils.esm.js.map

package/dist/src/Badge/utils.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.esm.js","sources":["../../../src/Badge/utils.ts"],"sourcesContent":["import type { BadgeValueProps } from '@/Badge/types';\nimport { getBadgePseudoCss } from '@/Badge/style';\n\nexport const getBadgeValue = (props: BadgeValueProps): string => {\n  if (typeof props === 'string') {\n    return props;\n  }\n\n  const { max = 99, current = 0 } = props;\n\n  return current > max ? `${max}+` : `${current}`;\n};\n\nexport const badgePseudo = {\n  getBadgePseudoCss,\n  getBadgeAttr: (props: BadgeValueProps) => ({\n    'data-badge-value': getBadgeValue(props),\n  }),\n};\n"],"names":["getBadgeValue","props","_props$max","max","_props$current","current","concat","badgePseudo","getBadgePseudoCss","getBadgeAttr"],"mappings":";;IAGaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAsB,EAAa;AAC/D,EAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;AAC7B,IAAA,OAAOA,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,IAAAC,UAAA,GAAkCD,KAAK,CAA/BE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,UAAA;IAAAE,cAAA,GAAkBH,KAAK,CAArBI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,cAAA,CAAA;EAE7B,OAAOC,OAAO,GAAGF,GAAG,GAAAG,EAAAA,CAAAA,MAAA,CAAMH,GAAG,EAAAG,GAAAA,CAAAA,GAAAA,EAAAA,CAAAA,MAAA,CAASD,OAAO,CAAE,CAAA;AACjD,EAAC;AAEM,IAAME,WAAW,GAAG;AACzBC,EAAAA,iBAAiB,EAAjBA,iBAAiB;EACjBC,YAAY,EAAE,SAAAA,YAAAA,CAACR,KAAsB,EAAA;IAAA,OAAM;MACzC,kBAAkB,EAAED,aAAa,CAACC,KAAK,CAAA;KACxC,CAAA;AAAA,GAAA;AACH;;;;"}

package/dist/src/Buttons/Button/const.cjs.js

@@ -1,59 +0,0 @@
-'use strict';
-
-var mixin = require('@remember-web/mixin');
-
-var BUTTON_SIZES = {
-  small: {
-    typography: 'Body2_M',
-    height: '32px',
-    minWidth: '68px',
-    padding: '0 16px'
-  },
-  medium: {
-    typography: 'Body1_M',
-    height: '36px',
-    minWidth: '78px',
-    padding: '0 20px'
-  },
-  large: {
-    typography: 'Headline4_M',
-    height: '44px',
-    minWidth: '108px',
-    padding: '0 20px'
-  },
-  xLarge: {
-    typography: 'Headline4_M',
-    height: '52px',
-    minWidth: '116px',
-    padding: '0 24px'
-  }
-};
-var BUTTON_COLORS = {
-  primary: {
-    backgroundColor: mixin.contents000,
-    color: mixin.contents999
-  },
-  outline: {
-    backgroundColor: 'transparent',
-    color: mixin.contents000,
-    borderColor: mixin.contents300
-  }
-};
-var SPINNER_SIZE_MAP = {
-  small: 'small',
-  medium: 'small',
-  large: 'medium',
-  xLarge: 'medium'
-};
-var ICON_GAP_MAP = {
-  small: '4px',
-  medium: '4px',
-  large: '8px',
-  xLarge: '8px'
-};
-
-exports.BUTTON_COLORS = BUTTON_COLORS;
-exports.BUTTON_SIZES = BUTTON_SIZES;
-exports.ICON_GAP_MAP = ICON_GAP_MAP;
-exports.SPINNER_SIZE_MAP = SPINNER_SIZE_MAP;
-//# sourceMappingURL=const.cjs.js.map

package/dist/src/Buttons/Button/const.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"const.cjs.js","sources":["../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import { contents000, contents300, contents999 } from '@remember-web/mixin';\n\nimport type { SpinnerSize } from '@/Common/Spinner/types';\n\nimport type { ButtonSize, ButtonVariant } from './types';\n\nexport const BUTTON_SIZES = {\n  small: {\n    typography: 'Body2_M',\n    height: '32px',\n    minWidth: '68px',\n    padding: '0 16px',\n  },\n  medium: {\n    typography: 'Body1_M',\n    height: '36px',\n    minWidth: '78px',\n    padding: '0 20px',\n  },\n  large: {\n    typography: 'Headline4_M',\n    height: '44px',\n    minWidth: '108px',\n    padding: '0 20px',\n  },\n  xLarge: {\n    typography: 'Headline4_M',\n    height: '52px',\n    minWidth: '116px',\n    padding: '0 24px',\n  },\n} as const satisfies Record<ButtonSize, unknown>;\n\nexport const BUTTON_COLORS = {\n  primary: {\n    backgroundColor: contents000,\n    color: contents999,\n  },\n  outline: {\n    backgroundColor: 'transparent',\n    color: contents000,\n    borderColor: contents300,\n  },\n} as const satisfies Record<ButtonVariant, unknown>;\n\nexport const SPINNER_SIZE_MAP = {\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n  xLarge: 'medium',\n} as const satisfies Record<ButtonSize, SpinnerSize>;\n\nexport const ICON_GAP_MAP = {\n  small: '4px',\n  medium: '4px',\n  large: '8px',\n  xLarge: '8px',\n} as const satisfies Record<ButtonSize, string>;\n"],"names":["BUTTON_SIZES","small","typography","height","minWidth","padding","medium","large","xLarge","BUTTON_COLORS","primary","backgroundColor","contents000","color","contents999","outline","borderColor","contents300","SPINNER_SIZE_MAP","ICON_GAP_MAP"],"mappings":";;;;AAMO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDC,EAAAA,MAAM,EAAE;AACNJ,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDE,EAAAA,KAAK,EAAE;AACLL,IAAAA,UAAU,EAAE,aAAa;AACzBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDG,EAAAA,MAAM,EAAE;AACNN,IAAAA,UAAU,EAAE,aAAa;AACzBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;AACX,GAAA;AACF,EAAgD;AAEzC,IAAMI,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAEC,iBAAW;AAC5BC,IAAAA,KAAK,EAAEC,iBAAAA;GACR;AACDC,EAAAA,OAAO,EAAE;AACPJ,IAAAA,eAAe,EAAE,aAAa;AAC9BE,IAAAA,KAAK,EAAED,iBAAW;AAClBI,IAAAA,WAAW,EAAEC,iBAAAA;AACf,GAAA;AACF,EAAmD;AAE5C,IAAMC,gBAAgB,GAAG;AAC9BjB,EAAAA,KAAK,EAAE,OAAO;AACdK,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAoD;AAE7C,IAAMW,YAAY,GAAG;AAC1BlB,EAAAA,KAAK,EAAE,KAAK;AACZK,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,MAAM,EAAE,KAAA;AACV;;;;;;;"}

package/dist/src/Buttons/Button/const.d.ts

@@ -1,50 +0,0 @@
-export declare const BUTTON_SIZES: {
-    readonly small: {
-        readonly typography: "Body2_M";
-        readonly height: "32px";
-        readonly minWidth: "68px";
-        readonly padding: "0 16px";
-    };
-    readonly medium: {
-        readonly typography: "Body1_M";
-        readonly height: "36px";
-        readonly minWidth: "78px";
-        readonly padding: "0 20px";
-    };
-    readonly large: {
-        readonly typography: "Headline4_M";
-        readonly height: "44px";
-        readonly minWidth: "108px";
-        readonly padding: "0 20px";
-    };
-    readonly xLarge: {
-        readonly typography: "Headline4_M";
-        readonly height: "52px";
-        readonly minWidth: "116px";
-        readonly padding: "0 24px";
-    };
-};
-export declare const BUTTON_COLORS: {
-    readonly primary: {
-        readonly backgroundColor: "var(--rui-contents000)";
-        readonly color: "var(--rui-contents999)";
-    };
-    readonly outline: {
-        readonly backgroundColor: "transparent";
-        readonly color: "var(--rui-contents000)";
-        readonly borderColor: "var(--rui-contents300)";
-    };
-};
-export declare const SPINNER_SIZE_MAP: {
-    readonly small: "small";
-    readonly medium: "small";
-    readonly large: "medium";
-    readonly xLarge: "medium";
-};
-export declare const ICON_GAP_MAP: {
-    readonly small: "4px";
-    readonly medium: "4px";
-    readonly large: "8px";
-    readonly xLarge: "8px";
-};
-//# sourceMappingURL=const.d.ts.map

package/dist/src/Buttons/Button/const.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../src/Buttons/Button/const.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;CAyBuB,CAAC;AAEjD,eAAO,MAAM,aAAa;;;;;;;;;;CAUyB,CAAC;AAEpD,eAAO,MAAM,gBAAgB;;;;;CAKuB,CAAC;AAErD,eAAO,MAAM,YAAY;;;;;CAKsB,CAAC"}

package/dist/src/Buttons/Button/const.esm.js

@@ -1,54 +0,0 @@
-import { contents000, contents999, contents300 } from '@remember-web/mixin';
-
-var BUTTON_SIZES = {
-  small: {
-    typography: 'Body2_M',
-    height: '32px',
-    minWidth: '68px',
-    padding: '0 16px'
-  },
-  medium: {
-    typography: 'Body1_M',
-    height: '36px',
-    minWidth: '78px',
-    padding: '0 20px'
-  },
-  large: {
-    typography: 'Headline4_M',
-    height: '44px',
-    minWidth: '108px',
-    padding: '0 20px'
-  },
-  xLarge: {
-    typography: 'Headline4_M',
-    height: '52px',
-    minWidth: '116px',
-    padding: '0 24px'
-  }
-};
-var BUTTON_COLORS = {
-  primary: {
-    backgroundColor: contents000,
-    color: contents999
-  },
-  outline: {
-    backgroundColor: 'transparent',
-    color: contents000,
-    borderColor: contents300
-  }
-};
-var SPINNER_SIZE_MAP = {
-  small: 'small',
-  medium: 'small',
-  large: 'medium',
-  xLarge: 'medium'
-};
-var ICON_GAP_MAP = {
-  small: '4px',
-  medium: '4px',
-  large: '8px',
-  xLarge: '8px'
-};
-
-export { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP, SPINNER_SIZE_MAP };
-//# sourceMappingURL=const.esm.js.map

package/dist/src/Buttons/Button/const.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"const.esm.js","sources":["../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import { contents000, contents300, contents999 } from '@remember-web/mixin';\n\nimport type { SpinnerSize } from '@/Common/Spinner/types';\n\nimport type { ButtonSize, ButtonVariant } from './types';\n\nexport const BUTTON_SIZES = {\n  small: {\n    typography: 'Body2_M',\n    height: '32px',\n    minWidth: '68px',\n    padding: '0 16px',\n  },\n  medium: {\n    typography: 'Body1_M',\n    height: '36px',\n    minWidth: '78px',\n    padding: '0 20px',\n  },\n  large: {\n    typography: 'Headline4_M',\n    height: '44px',\n    minWidth: '108px',\n    padding: '0 20px',\n  },\n  xLarge: {\n    typography: 'Headline4_M',\n    height: '52px',\n    minWidth: '116px',\n    padding: '0 24px',\n  },\n} as const satisfies Record<ButtonSize, unknown>;\n\nexport const BUTTON_COLORS = {\n  primary: {\n    backgroundColor: contents000,\n    color: contents999,\n  },\n  outline: {\n    backgroundColor: 'transparent',\n    color: contents000,\n    borderColor: contents300,\n  },\n} as const satisfies Record<ButtonVariant, unknown>;\n\nexport const SPINNER_SIZE_MAP = {\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n  xLarge: 'medium',\n} as const satisfies Record<ButtonSize, SpinnerSize>;\n\nexport const ICON_GAP_MAP = {\n  small: '4px',\n  medium: '4px',\n  large: '8px',\n  xLarge: '8px',\n} as const satisfies Record<ButtonSize, string>;\n"],"names":["BUTTON_SIZES","small","typography","height","minWidth","padding","medium","large","xLarge","BUTTON_COLORS","primary","backgroundColor","contents000","color","contents999","outline","borderColor","contents300","SPINNER_SIZE_MAP","ICON_GAP_MAP"],"mappings":";;AAMO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDC,EAAAA,MAAM,EAAE;AACNJ,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDE,EAAAA,KAAK,EAAE;AACLL,IAAAA,UAAU,EAAE,aAAa;AACzBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDG,EAAAA,MAAM,EAAE;AACNN,IAAAA,UAAU,EAAE,aAAa;AACzBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;AACX,GAAA;AACF,EAAgD;AAEzC,IAAMI,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAEC,WAAW;AAC5BC,IAAAA,KAAK,EAAEC,WAAAA;GACR;AACDC,EAAAA,OAAO,EAAE;AACPJ,IAAAA,eAAe,EAAE,aAAa;AAC9BE,IAAAA,KAAK,EAAED,WAAW;AAClBI,IAAAA,WAAW,EAAEC,WAAAA;AACf,GAAA;AACF,EAAmD;AAE5C,IAAMC,gBAAgB,GAAG;AAC9BjB,EAAAA,KAAK,EAAE,OAAO;AACdK,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAoD;AAE7C,IAAMW,YAAY,GAAG;AAC1BlB,EAAAA,KAAK,EAAE,KAAK;AACZK,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,MAAM,EAAE,KAAA;AACV;;;;"}

package/dist/src/Buttons/Button/index.cjs.js

@@ -1,62 +0,0 @@
-"use client";
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react = require('react');
-require('../../Common/Divider/index.cjs.js');
-require('../../Common/Flex/index.cjs.js');
-require('../../Common/Grid/index.cjs.js');
-var index$1 = require('../../Common/Spinner/index.cjs.js');
-require('../../Common/Typography/styles.cjs.js');
-var jsxRuntime = require('react/jsx-runtime');
-var _const = require('./const.cjs.js');
-var styles = require('./styles.cjs.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
-
-var _excluded = ["children", "color", "size", "variant", "layout", "isLoading", "filled", "icon", "iconPosition"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Button = function Button(_ref, ref) {
-  var children = _ref.children,
-    color = _ref.color,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'small' : _ref$size,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-    _ref$layout = _ref.layout,
-    layout = _ref$layout === void 0 ? 'block' : _ref$layout,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    _ref$filled = _ref.filled,
-    filled = _ref$filled === void 0 ? variant === 'primary' : _ref$filled,
-    icon = _ref.icon,
-    _ref$iconPosition = _ref.iconPosition,
-    iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
-    props = _objectWithoutProperties__default.default(_ref, _excluded);
-  return /*#__PURE__*/jsxRuntime.jsx(styles.StyledButton, _objectSpread(_objectSpread({
-    $color: color,
-    $size: size,
-    $variant: variant,
-    $layout: layout,
-    $isLoading: isLoading,
-    $filled: filled,
-    "aria-live": "polite",
-    "aria-busy": isLoading,
-    ref: ref
-  }, props), {}, {
-    children: isLoading ? /*#__PURE__*/jsxRuntime.jsx(index$1.Spinner, {
-      size: _const.SPINNER_SIZE_MAP[size]
-    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [iconPosition === 'left' && icon, children, iconPosition === 'right' && icon]
-    })
-  }));
-};
-var index = /*#__PURE__*/react.forwardRef(Button);
-
-module.exports = index;
-//# sourceMappingURL=index.cjs.js.map

package/dist/src/Buttons/Button/index.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/Buttons/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ElementType, ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\nimport type { As } from '@remember-web/shared';\n\nimport { Spinner } from '@/Common';\n\nimport { SPINNER_SIZE_MAP } from './const';\nimport { StyledButton } from './styles';\nimport type { ButtonProps } from './types';\n\nconst Button: ForwardRefRenderFunction<\n  HTMLButtonElement,\n  ButtonProps<'button'> & As<ElementType>\n> = (\n  {\n    children,\n    color,\n    size = 'small',\n    variant = 'primary',\n    layout = 'block',\n    isLoading = false,\n    filled = variant === 'primary',\n    icon,\n    iconPosition = 'left',\n    ...props\n  },\n  ref\n) => (\n  <StyledButton\n    $color={color}\n    $size={size}\n    $variant={variant}\n    $layout={layout}\n    $isLoading={isLoading}\n    $filled={filled}\n    aria-live=\"polite\"\n    aria-busy={isLoading}\n    ref={ref}\n    {...props}\n  >\n    {isLoading ? (\n      <Spinner size={SPINNER_SIZE_MAP[size]} />\n    ) : (\n      <>\n        {iconPosition === 'left' && icon}\n        {children}\n        {iconPosition === 'right' && icon}\n      </>\n    )}\n  </StyledButton>\n);\n\ntype ButtonComponentWithRef = <T extends ElementType = 'button'>(\n  props: { as?: T | null } & ButtonProps<T> & {\n      ref?: React.ComponentPropsWithRef<T>['ref'];\n    }\n) => React.ReactElement | null;\n\nexport default forwardRef(Button) as ButtonComponentWithRef;\n"],"names":["size","variant","layout","isLoading","filled","iconPosition","props","$color","$size","$variant","$layout","$isLoading","$filled","ref","children"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAYb;AAgBK;;;AATDA;;AACAC;;AACAC;;AACAC;;AACAC;;;AAEAC;AACGC;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AACA;AACA;AACAC;AAAS;AACAC;;AAG+B;AAEtCA;;AAKD;AACY;AASjB;;"}

package/dist/src/Buttons/Button/index.d.ts

@@ -1,10 +0,0 @@
-import type { ElementType } from 'react';
-import type { ButtonProps } from './types';
-type ButtonComponentWithRef = <T extends ElementType = 'button'>(props: {
-    as?: T | null;
-} & ButtonProps<T> & {
-    ref?: React.ComponentPropsWithRef<T>['ref'];
-}) => React.ReactElement | null;
-declare const _default: ButtonComponentWithRef;
-export default _default;
-//# sourceMappingURL=index.d.ts.map

package/dist/src/Buttons/Button/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Buttons/Button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAQnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA4C3C,KAAK,sBAAsB,GAAG,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAC7D,KAAK,EAAE;IAAE,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;CAC7C,KACA,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;;AAE/B,wBAA4D"}

package/dist/src/Buttons/Button/index.esm.js

@@ -1,55 +0,0 @@
-"use client";
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { forwardRef } from 'react';
-import '../../Common/Divider/index.esm.js';
-import '../../Common/Flex/index.esm.js';
-import '../../Common/Grid/index.esm.js';
-import { Spinner } from '../../Common/Spinner/index.esm.js';
-import '../../Common/Typography/styles.esm.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { SPINNER_SIZE_MAP } from './const.esm.js';
-import { StyledButton } from './styles.esm.js';
-
-var _excluded = ["children", "color", "size", "variant", "layout", "isLoading", "filled", "icon", "iconPosition"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Button = function Button(_ref, ref) {
-  var children = _ref.children,
-    color = _ref.color,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'small' : _ref$size,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-    _ref$layout = _ref.layout,
-    layout = _ref$layout === void 0 ? 'block' : _ref$layout,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    _ref$filled = _ref.filled,
-    filled = _ref$filled === void 0 ? variant === 'primary' : _ref$filled,
-    icon = _ref.icon,
-    _ref$iconPosition = _ref.iconPosition,
-    iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsx(StyledButton, _objectSpread(_objectSpread({
-    $color: color,
-    $size: size,
-    $variant: variant,
-    $layout: layout,
-    $isLoading: isLoading,
-    $filled: filled,
-    "aria-live": "polite",
-    "aria-busy": isLoading,
-    ref: ref
-  }, props), {}, {
-    children: isLoading ? /*#__PURE__*/jsx(Spinner, {
-      size: SPINNER_SIZE_MAP[size]
-    }) : /*#__PURE__*/jsxs(Fragment, {
-      children: [iconPosition === 'left' && icon, children, iconPosition === 'right' && icon]
-    })
-  }));
-};
-var index = /*#__PURE__*/forwardRef(Button);
-
-export { index as default };
-//# sourceMappingURL=index.esm.js.map

package/dist/src/Buttons/Button/index.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Buttons/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ElementType, ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\nimport type { As } from '@remember-web/shared';\n\nimport { Spinner } from '@/Common';\n\nimport { SPINNER_SIZE_MAP } from './const';\nimport { StyledButton } from './styles';\nimport type { ButtonProps } from './types';\n\nconst Button: ForwardRefRenderFunction<\n  HTMLButtonElement,\n  ButtonProps<'button'> & As<ElementType>\n> = (\n  {\n    children,\n    color,\n    size = 'small',\n    variant = 'primary',\n    layout = 'block',\n    isLoading = false,\n    filled = variant === 'primary',\n    icon,\n    iconPosition = 'left',\n    ...props\n  },\n  ref\n) => (\n  <StyledButton\n    $color={color}\n    $size={size}\n    $variant={variant}\n    $layout={layout}\n    $isLoading={isLoading}\n    $filled={filled}\n    aria-live=\"polite\"\n    aria-busy={isLoading}\n    ref={ref}\n    {...props}\n  >\n    {isLoading ? (\n      <Spinner size={SPINNER_SIZE_MAP[size]} />\n    ) : (\n      <>\n        {iconPosition === 'left' && icon}\n        {children}\n        {iconPosition === 'right' && icon}\n      </>\n    )}\n  </StyledButton>\n);\n\ntype ButtonComponentWithRef = <T extends ElementType = 'button'>(\n  props: { as?: T | null } & ButtonProps<T> & {\n      ref?: React.ComponentPropsWithRef<T>['ref'];\n    }\n) => React.ReactElement | null;\n\nexport default forwardRef(Button) as ButtonComponentWithRef;\n"],"names":["size","variant","layout","isLoading","filled","iconPosition","props","$color","$size","$variant","$layout","$isLoading","$filled","ref","children"],"mappings":";;;;;;;;;;;;;AAAa;AAAA;AAAA;AAYb;AAgBK;;;AATDA;;AACAC;;AACAC;;AACAC;;AACAC;;;AAEAC;AACGC;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AACA;AACA;AACAC;AAAS;AACAC;;AAG+B;AAEtCA;;AAKD;AACY;AASjB;;"}

package/dist/src/Buttons/Button/styles.cjs.js

@@ -1,33 +0,0 @@
-"use client";
-'use strict';
-
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var styled = require('styled-components');
-var mixin = require('@remember-web/mixin');
-var _const = require('./const.cjs.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-var _templateObject, _templateObject2, _templateObject3;
-var _excluded = ["$size", "$layout", "$color"];
-var StyledButton = styled__default.default.button(function (_ref) {
-  var _ref2;
-  var $size = _ref.$size,
-    $layout = _ref.$layout,
-    $color = _ref.$color,
-    props = _objectWithoutProperties__default.default(_ref, _excluded);
-  return [// 공용 스타일
-  styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n      all: unset;\n      appearance: none;\n\n      box-sizing: border-box;\n      cursor: pointer;\n      position: relative;\n      overflow: hidden;\n      user-select: none;\n      -webkit-tap-highlight-color: transparent;\n      -webkit-user-select: none;\n\n      display: ", ";\n      flex-shrink: 0;\n      align-items: center;\n      justify-content: center;\n      gap: ", ";\n\n      ", "\n      text-align: center;\n\n      width: fit-content;\n      ", "\n      min-width: ", ";\n      height: ", ";\n      padding: ", ";\n      border-radius: 4px;\n\n      color: ", ";\n\n      &:focus-visible:not(:disabled) {\n        outline: 2px solid ", ";\n        outline-offset: 2px;\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n\n        &::before {\n          display: none;\n        }\n      }\n\n      &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-color: ", ";\n        opacity: 0;\n        pointer-events: none;\n\n        transition: opacity 0.2s;\n      }\n      @media (hover: hover) {\n        &:hover::before {\n          opacity: 0.1;\n        }\n      }\n      &:active::before {\n        opacity: 0.2;\n      }\n    "])), $layout === 'inline' ? 'inline-flex' : 'flex', _const.ICON_GAP_MAP[$size], mixin.getTypographyStyles(_const.BUTTON_SIZES[$size].typography), $layout === 'fullBlock' && "width: 100%;", _const.BUTTON_SIZES[$size].minWidth, _const.BUTTON_SIZES[$size].height, _const.BUTTON_SIZES[$size].padding, (_ref2 = props.$variant.startsWith('outline') ? $color : null) !== null && _ref2 !== void 0 ? _ref2 : _const.BUTTON_COLORS[props.$variant].color, mixin.primary100, mixin.primary200),
-  // primary 스타일
-  props.$variant === 'primary' && styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n        background-color: ", ";\n        &:disabled {\n          background-color: ", ";\n        }\n        &::before {\n          background-color: ", ";\n        }\n      "])), $color !== null && $color !== void 0 ? $color : _const.BUTTON_COLORS[props.$variant].backgroundColor, mixin.disabled, mixin.primary200),
-  // outline 스타일
-  props.$variant === 'outline' && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n        background-color: ", ";\n        border: 1px solid ", ";\n        &:disabled {\n          border-color: ", ";\n          color: ", ";\n        }\n        &::before {\n          background-color: ", ";\n        }\n      "])), props.$filled ? mixin.bg100 : _const.BUTTON_COLORS[props.$variant].backgroundColor, $color !== null && $color !== void 0 ? $color : _const.BUTTON_COLORS[props.$variant].borderColor, mixin.disabled, mixin.disabled, $color !== null && $color !== void 0 ? $color : mixin.primary100)];
-});
-
-exports.StyledButton = StyledButton;
-//# sourceMappingURL=styles.cjs.js.map

package/dist/src/Buttons/Button/styles.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Buttons/Button/styles.ts"],"sourcesContent":["'use client';\n\nimport type { DataAttributes } from 'styled-components';\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  disabled,\n  getTypographyStyles,\n  primary100,\n  primary200,\n} from '@remember-web/mixin';\n\nimport { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';\nimport type { ButtonStyleProps } from './types';\n\nexport const StyledButton = styled.button<ButtonStyleProps & DataAttributes>(\n  ({ $size, $layout, $color, ...props }) => [\n    // 공용 스타일\n    css`\n      all: unset;\n      appearance: none;\n\n      box-sizing: border-box;\n      cursor: pointer;\n      position: relative;\n      overflow: hidden;\n      user-select: none;\n      -webkit-tap-highlight-color: transparent;\n      -webkit-user-select: none;\n\n      display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};\n      flex-shrink: 0;\n      align-items: center;\n      justify-content: center;\n      gap: ${ICON_GAP_MAP[$size]};\n\n      ${getTypographyStyles(BUTTON_SIZES[$size].typography)}\n      text-align: center;\n\n      width: fit-content;\n      ${$layout === 'fullBlock' && `width: 100%;`}\n      min-width: ${BUTTON_SIZES[$size].minWidth};\n      height: ${BUTTON_SIZES[$size].height};\n      padding: ${BUTTON_SIZES[$size].padding};\n      border-radius: 4px;\n\n      color: ${(props.$variant.startsWith('outline') ? $color : null) ??\n      BUTTON_COLORS[props.$variant].color};\n\n      &:focus-visible:not(:disabled) {\n        outline: 2px solid ${primary100};\n        outline-offset: 2px;\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n\n        &::before {\n          display: none;\n        }\n      }\n\n      &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-color: ${primary200};\n        opacity: 0;\n        pointer-events: none;\n\n        transition: opacity 0.2s;\n      }\n      @media (hover: hover) {\n        &:hover::before {\n          opacity: 0.1;\n        }\n      }\n      &:active::before {\n        opacity: 0.2;\n      }\n    `,\n\n    // primary 스타일\n    props.$variant === 'primary' &&\n      css`\n        background-color: ${$color ??\n        BUTTON_COLORS[props.$variant].backgroundColor};\n        &:disabled {\n          background-color: ${disabled};\n        }\n        &::before {\n          background-color: ${primary200};\n        }\n      `,\n\n    // outline 스타일\n    props.$variant === 'outline' &&\n      css`\n        background-color: ${props.$filled\n          ? bg100\n          : BUTTON_COLORS[props.$variant].backgroundColor};\n        border: 1px solid ${$color ?? BUTTON_COLORS[props.$variant].borderColor};\n        &:disabled {\n          border-color: ${disabled};\n          color: ${disabled};\n        }\n        &::before {\n          background-color: ${$color ?? primary100};\n        }\n      `,\n  ]\n);\n"],"names":["props","css"],"mappings":";;;;;;;;;;;;;;;AAAa;AAAA;AAeN;AACL;AAAA;;;AAA8BA;AAAK;AAEjCC;AAmEA;AACAD;AAYA;;AAeD;;"}

package/dist/src/Buttons/Button/styles.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { DataAttributes } from 'styled-components';
-import type { ButtonStyleProps } from './types';
-export declare const StyledButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonStyleProps & DataAttributes>>;
-//# sourceMappingURL=styles.d.ts.map

package/dist/src/Buttons/Button/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Buttons/Button/styles.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAWxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,YAAY,0PAmGxB,CAAC"}

package/dist/src/Buttons/Button/styles.esm.js

@@ -1,25 +0,0 @@
-"use client";
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import styled, { css } from 'styled-components';
-import { getTypographyStyles, primary100, primary200, disabled, bg100 } from '@remember-web/mixin';
-import { ICON_GAP_MAP, BUTTON_SIZES, BUTTON_COLORS } from './const.esm.js';
-
-var _templateObject, _templateObject2, _templateObject3;
-var _excluded = ["$size", "$layout", "$color"];
-var StyledButton = styled.button(function (_ref) {
-  var _ref2;
-  var $size = _ref.$size,
-    $layout = _ref.$layout,
-    $color = _ref.$color,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return [// 공용 스타일
-  css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      all: unset;\n      appearance: none;\n\n      box-sizing: border-box;\n      cursor: pointer;\n      position: relative;\n      overflow: hidden;\n      user-select: none;\n      -webkit-tap-highlight-color: transparent;\n      -webkit-user-select: none;\n\n      display: ", ";\n      flex-shrink: 0;\n      align-items: center;\n      justify-content: center;\n      gap: ", ";\n\n      ", "\n      text-align: center;\n\n      width: fit-content;\n      ", "\n      min-width: ", ";\n      height: ", ";\n      padding: ", ";\n      border-radius: 4px;\n\n      color: ", ";\n\n      &:focus-visible:not(:disabled) {\n        outline: 2px solid ", ";\n        outline-offset: 2px;\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n\n        &::before {\n          display: none;\n        }\n      }\n\n      &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-color: ", ";\n        opacity: 0;\n        pointer-events: none;\n\n        transition: opacity 0.2s;\n      }\n      @media (hover: hover) {\n        &:hover::before {\n          opacity: 0.1;\n        }\n      }\n      &:active::before {\n        opacity: 0.2;\n      }\n    "])), $layout === 'inline' ? 'inline-flex' : 'flex', ICON_GAP_MAP[$size], getTypographyStyles(BUTTON_SIZES[$size].typography), $layout === 'fullBlock' && "width: 100%;", BUTTON_SIZES[$size].minWidth, BUTTON_SIZES[$size].height, BUTTON_SIZES[$size].padding, (_ref2 = props.$variant.startsWith('outline') ? $color : null) !== null && _ref2 !== void 0 ? _ref2 : BUTTON_COLORS[props.$variant].color, primary100, primary200),
-  // primary 스타일
-  props.$variant === 'primary' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        background-color: ", ";\n        &:disabled {\n          background-color: ", ";\n        }\n        &::before {\n          background-color: ", ";\n        }\n      "])), $color !== null && $color !== void 0 ? $color : BUTTON_COLORS[props.$variant].backgroundColor, disabled, primary200),
-  // outline 스타일
-  props.$variant === 'outline' && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        background-color: ", ";\n        border: 1px solid ", ";\n        &:disabled {\n          border-color: ", ";\n          color: ", ";\n        }\n        &::before {\n          background-color: ", ";\n        }\n      "])), props.$filled ? bg100 : BUTTON_COLORS[props.$variant].backgroundColor, $color !== null && $color !== void 0 ? $color : BUTTON_COLORS[props.$variant].borderColor, disabled, disabled, $color !== null && $color !== void 0 ? $color : primary100)];
-});
-
-export { StyledButton };
-//# sourceMappingURL=styles.esm.js.map

package/dist/src/Buttons/Button/styles.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.esm.js","sources":["../../../../src/Buttons/Button/styles.ts"],"sourcesContent":["'use client';\n\nimport type { DataAttributes } from 'styled-components';\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  disabled,\n  getTypographyStyles,\n  primary100,\n  primary200,\n} from '@remember-web/mixin';\n\nimport { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';\nimport type { ButtonStyleProps } from './types';\n\nexport const StyledButton = styled.button<ButtonStyleProps & DataAttributes>(\n  ({ $size, $layout, $color, ...props }) => [\n    // 공용 스타일\n    css`\n      all: unset;\n      appearance: none;\n\n      box-sizing: border-box;\n      cursor: pointer;\n      position: relative;\n      overflow: hidden;\n      user-select: none;\n      -webkit-tap-highlight-color: transparent;\n      -webkit-user-select: none;\n\n      display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};\n      flex-shrink: 0;\n      align-items: center;\n      justify-content: center;\n      gap: ${ICON_GAP_MAP[$size]};\n\n      ${getTypographyStyles(BUTTON_SIZES[$size].typography)}\n      text-align: center;\n\n      width: fit-content;\n      ${$layout === 'fullBlock' && `width: 100%;`}\n      min-width: ${BUTTON_SIZES[$size].minWidth};\n      height: ${BUTTON_SIZES[$size].height};\n      padding: ${BUTTON_SIZES[$size].padding};\n      border-radius: 4px;\n\n      color: ${(props.$variant.startsWith('outline') ? $color : null) ??\n      BUTTON_COLORS[props.$variant].color};\n\n      &:focus-visible:not(:disabled) {\n        outline: 2px solid ${primary100};\n        outline-offset: 2px;\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n\n        &::before {\n          display: none;\n        }\n      }\n\n      &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-color: ${primary200};\n        opacity: 0;\n        pointer-events: none;\n\n        transition: opacity 0.2s;\n      }\n      @media (hover: hover) {\n        &:hover::before {\n          opacity: 0.1;\n        }\n      }\n      &:active::before {\n        opacity: 0.2;\n      }\n    `,\n\n    // primary 스타일\n    props.$variant === 'primary' &&\n      css`\n        background-color: ${$color ??\n        BUTTON_COLORS[props.$variant].backgroundColor};\n        &:disabled {\n          background-color: ${disabled};\n        }\n        &::before {\n          background-color: ${primary200};\n        }\n      `,\n\n    // outline 스타일\n    props.$variant === 'outline' &&\n      css`\n        background-color: ${props.$filled\n          ? bg100\n          : BUTTON_COLORS[props.$variant].backgroundColor};\n        border: 1px solid ${$color ?? BUTTON_COLORS[props.$variant].borderColor};\n        &:disabled {\n          border-color: ${disabled};\n          color: ${disabled};\n        }\n        &::before {\n          background-color: ${$color ?? primary100};\n        }\n      `,\n  ]\n);\n"],"names":["props","css"],"mappings":";;;;;;;AAAa;AAAA;AAeN;AACL;AAAA;;;AAA8BA;AAAK;AAEjCC;AAmEA;AACAD;AAYA;;AAeD;;"}

package/dist/src/Buttons/Button/types.d.ts

@@ -1,22 +0,0 @@
-import type { ElementType } from 'react';
-import type { ConvertTransientProps } from '@remember-web/shared';
-import type { ColorVariable } from '@remember-web/mixin';
-export type ButtonSize = 'small' | 'medium' | 'large' | 'xLarge';
-export type ButtonVariant = 'primary' | 'outline';
-export type ButtonLayout = 'inline' | 'block' | 'fullBlock';
-export type ButtonColor = ColorVariable | string;
-export interface ButtonStyleProps {
-    $size: ButtonSize;
-    $color?: ButtonColor;
-    $variant: ButtonVariant;
-    $layout: ButtonLayout;
-    $isLoading: boolean;
-    $filled?: boolean;
-}
-type ConvertProps = ConvertTransientProps<Partial<ButtonStyleProps>>;
-export type ButtonProps<AsT extends ElementType> = Omit<React.ComponentPropsWithoutRef<AsT>, keyof ButtonStyleProps | 'icon' | 'iconPosition'> & ConvertProps & {
-    icon?: React.ReactNode;
-    iconPosition?: 'left' | 'right';
-};
-export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/src/Buttons/Button/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Buttons/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEjE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,aAAa,CAAC;IACxB,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,KAAK,YAAY,GAAG,qBAAqB,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,WAAW,CAAC,GAAG,SAAS,WAAW,IAAI,IAAI,CACrD,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EACnC,MAAM,gBAAgB,GAAG,MAAM,GAAG,cAAc,CACjD,GACC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACjC,CAAC"}

package/dist/src/Buttons/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Button } from './Button';
-//# sourceMappingURL=index.d.ts.map

package/dist/src/Buttons/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Buttons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}