@remember-web/primitive 0.0.0-alpha.9 → 0.1.0

package/dist/primitive/src/Avatars/Avatar/{index.cjs → index.cjs.js}

@@ -4,7 +4,7 @@
 var react = require('react');
 var mixin = require('@remember-web/mixin');
 var icon = require('@remember-web/icon');
-var styles = require('./styles.cjs');
+var styles = require('./styles.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 var Avatar = function Avatar(_ref, ref) {
@@ -39,4 +39,4 @@ var Avatar = function Avatar(_ref, ref) {
 var index = /*#__PURE__*/react.forwardRef(Avatar);
 
 module.exports = index;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.js.map

package/dist/primitive/src/Avatars/Avatar/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport type { ForwardRefRenderFunction, ComponentPropsWithoutRef } from 'react';\nimport { bg200, divider } from '@remember-web/mixin';\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport { StyledAvatar } from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &\n  ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n  {\n    size = 'medium',\n    backgroundColor = bg200,\n    border = { color: divider, width: '1px' },\n    rounded = true,\n    imageUrl,\n    children,\n  }: AvatarProps,\n  ref\n) => (\n  <StyledAvatar\n    ref={ref}\n    $size={size}\n    $backgroundColor={backgroundColor}\n    $border={border}\n    $rounded={rounded}\n  >\n    {imageUrl ? (\n      <img src={imageUrl} loading=\"lazy\" alt=\"avatar\" />\n    ) : (\n      children ?? <IconAvatarEmpty size=\"100%\" />\n    )}\n  </StyledAvatar>\n);\n\nexport default forwardRef(Avatar);\n"],"names":["size","backgroundColor","color","width","rounded","ref","$size","$backgroundColor","$border","$rounded","src","loading","alt"],"mappings":";;;;;;;;;AAcA;AASK;AAPDA;;AACAC;;;AACWC;AAAgBC;AAAa;;AACxCC;;;;AAOAC;AACAC;AACAC;AACAC;AACAC;;AAGOC;AAAeC;AAAeC;;AAENZ;;AAC9B;AACY;AAGjB;;"}

package/dist/primitive/src/Avatars/Avatar/{index.js → index.esm.js}

@@ -2,7 +2,7 @@
 import { forwardRef } from 'react';
 import { bg200, divider } from '@remember-web/mixin';
 import { IconAvatarEmpty } from '@remember-web/icon';
-import { StyledAvatar } from './styles.js';
+import { StyledAvatar } from './styles.esm.js';
 import { jsx } from 'react/jsx-runtime';
 
 var Avatar = function Avatar(_ref, ref) {
@@ -37,4 +37,4 @@ var Avatar = function Avatar(_ref, ref) {
 var index = /*#__PURE__*/forwardRef(Avatar);
 
 export { index as default };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.esm.js.map

package/dist/primitive/src/Avatars/Avatar/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport type { ForwardRefRenderFunction, ComponentPropsWithoutRef } from 'react';\nimport { bg200, divider } from '@remember-web/mixin';\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport { StyledAvatar } from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &\n  ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n  {\n    size = 'medium',\n    backgroundColor = bg200,\n    border = { color: divider, width: '1px' },\n    rounded = true,\n    imageUrl,\n    children,\n  }: AvatarProps,\n  ref\n) => (\n  <StyledAvatar\n    ref={ref}\n    $size={size}\n    $backgroundColor={backgroundColor}\n    $border={border}\n    $rounded={rounded}\n  >\n    {imageUrl ? (\n      <img src={imageUrl} loading=\"lazy\" alt=\"avatar\" />\n    ) : (\n      children ?? <IconAvatarEmpty size=\"100%\" />\n    )}\n  </StyledAvatar>\n);\n\nexport default forwardRef(Avatar);\n"],"names":["size","backgroundColor","color","width","rounded","ref","$size","$backgroundColor","$border","$rounded","src","loading","alt"],"mappings":";;;;;;;AAcA;AASK;AAPDA;;AACAC;;;AACWC;AAAgBC;AAAa;;AACxCC;;;;AAOAC;AACAC;AACAC;AACAC;AACAC;;AAGOC;AAAeC;AAAeC;;AAENZ;;AAC9B;AACY;AAGjB;;"}

package/dist/primitive/src/Avatars/Avatar/{styles.cjs → styles.cjs.js}

@@ -15,10 +15,7 @@ var avatarSize = {
   xsmall: 24,
   xxsmall: 20
 };
-var StyledAvatar = styled__default.default.div.withConfig({
-  displayName: "styles__StyledAvatar",
-  componentId: "sc-1ksua8m-0"
-})(function (_ref) {
+var StyledAvatar = styled__default.default.div(function (_ref) {
   var $size = _ref.$size,
     $border = _ref.$border,
     $backgroundColor = _ref.$backgroundColor,
@@ -45,4 +42,4 @@ var StyledAvatar = styled__default.default.div.withConfig({
 
 exports.StyledAvatar = StyledAvatar;
 exports.avatarSize = avatarSize;
-//# sourceMappingURL=styles.cjs.map
+//# sourceMappingURL=styles.cjs.js.map

package/dist/primitive/src/Avatars/Avatar/styles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { CSSProperties } from 'react';\n\nexport const avatarSize = {\n  xxlarge: 64,\n  xlarge: 56,\n  large: 48,\n  medium: 40,\n  small: 32,\n  xsmall: 24,\n  xxsmall: 20,\n};\n\nexport interface StyledAvatarProps {\n  $size: keyof typeof avatarSize;\n  $border?: {\n    width?: NonNullable<CSSProperties['borderWidth']>;\n    color?: NonNullable<CSSProperties['borderColor']>;\n  };\n  $rounded?: boolean;\n  $imageUrl?: string;\n  $backgroundColor?: CSSProperties['backgroundColor'];\n}\n\nexport const StyledAvatar = styled.div<StyledAvatarProps>(\n  ({ $size, $border, $backgroundColor, $rounded }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: `${avatarSize[$size]}px`,\n    maxWidth: `${avatarSize[$size]}px`,\n    maxHeight: `${avatarSize[$size]}px`,\n    aspectRatio: '1 / 1',\n    boxSizing: 'border-box',\n    border: $border ? `${$border.width} solid ${$border.color}` : 'none',\n    borderRadius: $rounded ? '50%' : 'none',\n\n    backgroundColor: $backgroundColor,\n\n    contain: 'strict',\n\n    img: {\n      width: '100%',\n      height: '100%',\n    },\n  })\n);\n"],"names":["avatarSize","xxlarge","xlarge","large","medium","small","xsmall","xxsmall","StyledAvatar","styled","div","_ref","$size","$border","$backgroundColor","$rounded","display","alignItems","justifyContent","width","concat","maxWidth","maxHeight","aspectRatio","boxSizing","border","color","borderRadius","backgroundColor","contain","img","height"],"mappings":";;;;;;;;AAGO,IAAMA,UAAU,GAAG;AACxBC,EAAAA,OAAO,EAAE,EAAE;AACXC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,OAAO,EAAE,EAAA;AACX,EAAC;AAaM,IAAMC,YAAY,GAAGC,uBAAM,CAACC,GAAG,CACpC,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,gBAAgB,GAAAH,IAAA,CAAhBG,gBAAgB;IAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ,CAAA;EAAA,OAAQ;AACnDC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,QAAQ;AACxBC,IAAAA,KAAK,KAAAC,MAAA,CAAKpB,UAAU,CAACY,KAAK,CAAC,EAAI,IAAA,CAAA;AAC/BS,IAAAA,QAAQ,KAAAD,MAAA,CAAKpB,UAAU,CAACY,KAAK,CAAC,EAAI,IAAA,CAAA;AAClCU,IAAAA,SAAS,KAAAF,MAAA,CAAKpB,UAAU,CAACY,KAAK,CAAC,EAAI,IAAA,CAAA;AACnCW,IAAAA,WAAW,EAAE,OAAO;AACpBC,IAAAA,SAAS,EAAE,YAAY;AACvBC,IAAAA,MAAM,EAAEZ,OAAO,GAAAO,EAAAA,CAAAA,MAAA,CAAMP,OAAO,CAACM,KAAK,EAAA,SAAA,CAAA,CAAAC,MAAA,CAAUP,OAAO,CAACa,KAAK,IAAK,MAAM;AACpEC,IAAAA,YAAY,EAAEZ,QAAQ,GAAG,KAAK,GAAG,MAAM;AAEvCa,IAAAA,eAAe,EAAEd,gBAAgB;AAEjCe,IAAAA,OAAO,EAAE,QAAQ;AAEjBC,IAAAA,GAAG,EAAE;AACHX,MAAAA,KAAK,EAAE,MAAM;AACbY,MAAAA,MAAM,EAAE,MAAA;AACV,KAAA;GACD,CAAA;AAAA,CACH;;;;;"}

package/dist/primitive/src/Avatars/Avatar/{styles.js → styles.esm.js}

@@ -9,10 +9,7 @@ var avatarSize = {
   xsmall: 24,
   xxsmall: 20
 };
-var StyledAvatar = styled.div.withConfig({
-  displayName: "styles__StyledAvatar",
-  componentId: "sc-1ksua8m-0"
-})(function (_ref) {
+var StyledAvatar = styled.div(function (_ref) {
   var $size = _ref.$size,
     $border = _ref.$border,
     $backgroundColor = _ref.$backgroundColor,
@@ -38,4 +35,4 @@ var StyledAvatar = styled.div.withConfig({
 });
 
 export { StyledAvatar, avatarSize };
-//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=styles.esm.js.map

package/dist/primitive/src/Avatars/Avatar/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { CSSProperties } from 'react';\n\nexport const avatarSize = {\n  xxlarge: 64,\n  xlarge: 56,\n  large: 48,\n  medium: 40,\n  small: 32,\n  xsmall: 24,\n  xxsmall: 20,\n};\n\nexport interface StyledAvatarProps {\n  $size: keyof typeof avatarSize;\n  $border?: {\n    width?: NonNullable<CSSProperties['borderWidth']>;\n    color?: NonNullable<CSSProperties['borderColor']>;\n  };\n  $rounded?: boolean;\n  $imageUrl?: string;\n  $backgroundColor?: CSSProperties['backgroundColor'];\n}\n\nexport const StyledAvatar = styled.div<StyledAvatarProps>(\n  ({ $size, $border, $backgroundColor, $rounded }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: `${avatarSize[$size]}px`,\n    maxWidth: `${avatarSize[$size]}px`,\n    maxHeight: `${avatarSize[$size]}px`,\n    aspectRatio: '1 / 1',\n    boxSizing: 'border-box',\n    border: $border ? `${$border.width} solid ${$border.color}` : 'none',\n    borderRadius: $rounded ? '50%' : 'none',\n\n    backgroundColor: $backgroundColor,\n\n    contain: 'strict',\n\n    img: {\n      width: '100%',\n      height: '100%',\n    },\n  })\n);\n"],"names":["avatarSize","xxlarge","xlarge","large","medium","small","xsmall","xxsmall","StyledAvatar","styled","div","_ref","$size","$border","$backgroundColor","$rounded","display","alignItems","justifyContent","width","concat","maxWidth","maxHeight","aspectRatio","boxSizing","border","color","borderRadius","backgroundColor","contain","img","height"],"mappings":";;AAGO,IAAMA,UAAU,GAAG;AACxBC,EAAAA,OAAO,EAAE,EAAE;AACXC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,OAAO,EAAE,EAAA;AACX,EAAC;AAaM,IAAMC,YAAY,GAAGC,MAAM,CAACC,GAAG,CACpC,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,gBAAgB,GAAAH,IAAA,CAAhBG,gBAAgB;IAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ,CAAA;EAAA,OAAQ;AACnDC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,QAAQ;AACxBC,IAAAA,KAAK,KAAAC,MAAA,CAAKpB,UAAU,CAACY,KAAK,CAAC,EAAI,IAAA,CAAA;AAC/BS,IAAAA,QAAQ,KAAAD,MAAA,CAAKpB,UAAU,CAACY,KAAK,CAAC,EAAI,IAAA,CAAA;AAClCU,IAAAA,SAAS,KAAAF,MAAA,CAAKpB,UAAU,CAACY,KAAK,CAAC,EAAI,IAAA,CAAA;AACnCW,IAAAA,WAAW,EAAE,OAAO;AACpBC,IAAAA,SAAS,EAAE,YAAY;AACvBC,IAAAA,MAAM,EAAEZ,OAAO,GAAAO,EAAAA,CAAAA,MAAA,CAAMP,OAAO,CAACM,KAAK,EAAA,SAAA,CAAA,CAAAC,MAAA,CAAUP,OAAO,CAACa,KAAK,IAAK,MAAM;AACpEC,IAAAA,YAAY,EAAEZ,QAAQ,GAAG,KAAK,GAAG,MAAM;AAEvCa,IAAAA,eAAe,EAAEd,gBAAgB;AAEjCe,IAAAA,OAAO,EAAE,QAAQ;AAEjBC,IAAAA,GAAG,EAAE;AACHX,MAAAA,KAAK,EAAE,MAAM;AACbY,MAAAA,MAAM,EAAE,MAAA;AACV,KAAA;GACD,CAAA;AAAA,CACH;;;;"}

package/dist/primitive/src/Badge/{Badge.cjs → Badge.cjs.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var style = require('./style.cjs');
-var utils = require('./utils.cjs');
+var style = require('./style.cjs.js');
+var utils = require('./utils.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function Badge(_ref) {
@@ -12,4 +12,4 @@ function Badge(_ref) {
 }
 
 exports.Badge = Badge;
-//# sourceMappingURL=Badge.cjs.map
+//# sourceMappingURL=Badge.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.cjs.js","sources":["../../../../src/Badge/Badge.tsx"],"sourcesContent":["import { StyledBadge } from '@/Badge/style';\nimport type { BadgeValueProps } from '@/Badge/types';\nimport { getBadgeValue } from '@/Badge/utils';\n\nexport type BadgeProps = { value: BadgeValueProps };\n\nexport function Badge({ value }: BadgeProps) {\n  return <StyledBadge>{getBadgeValue(value)}</StyledBadge>;\n}\n"],"names":["Badge","_ref","value","_jsx","StyledBadge","children","getBadgeValue"],"mappings":";;;;;;AAMO,SAASA,KAAKA,CAAAC,IAAA,EAAwB;AAAA,EAAA,IAArBC,KAAK,GAAAD,IAAA,CAALC,KAAK,CAAA;EAC3B,oBAAOC,cAAA,CAACC,iBAAW,EAAA;IAAAC,QAAA,EAAEC,mBAAa,CAACJ,KAAK,CAAA;AAAC,GAAc,CAAC,CAAA;AAC1D;;;;"}

package/dist/primitive/src/Badge/{Badge.js → Badge.esm.js}

@@ -1,5 +1,5 @@
-import { StyledBadge } from './style.js';
-import { getBadgeValue } from './utils.js';
+import { StyledBadge } from './style.esm.js';
+import { getBadgeValue } from './utils.esm.js';
 import { jsx } from 'react/jsx-runtime';
 
 function Badge(_ref) {
@@ -10,4 +10,4 @@ function Badge(_ref) {
 }
 
 export { Badge };
-//# sourceMappingURL=Badge.js.map
+//# sourceMappingURL=Badge.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.esm.js","sources":["../../../../src/Badge/Badge.tsx"],"sourcesContent":["import { StyledBadge } from '@/Badge/style';\nimport type { BadgeValueProps } from '@/Badge/types';\nimport { getBadgeValue } from '@/Badge/utils';\n\nexport type BadgeProps = { value: BadgeValueProps };\n\nexport function Badge({ value }: BadgeProps) {\n  return <StyledBadge>{getBadgeValue(value)}</StyledBadge>;\n}\n"],"names":["Badge","_ref","value","_jsx","StyledBadge","children","getBadgeValue"],"mappings":";;;;AAMO,SAASA,KAAKA,CAAAC,IAAA,EAAwB;AAAA,EAAA,IAArBC,KAAK,GAAAD,IAAA,CAALC,KAAK,CAAA;EAC3B,oBAAOC,GAAA,CAACC,WAAW,EAAA;IAAAC,QAAA,EAAEC,aAAa,CAACJ,KAAK,CAAA;AAAC,GAAc,CAAC,CAAA;AAC1D;;;;"}

package/dist/primitive/src/Badge/style.cjs.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var mixin = require('@remember-web/mixin');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+var _templateObject, _templateObject2, _templateObject3;
+
+/**
+ * pseudo로 사용시 data-badge-value attribue가 필요합니다.
+ */
+var badgeCss = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\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"])), mixin.getTypographyStyles('Subtitle2'), mixin.secondary100, mixin.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 styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\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__default.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  ", ";\n"])), badgeCss);
+
+exports.StyledBadge = StyledBadge;
+exports.badgeCss = badgeCss;
+exports.getBadgePseudoCss = getBadgePseudoCss;
+//# sourceMappingURL=style.cjs.js.map

package/dist/primitive/src/Badge/style.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.cjs.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,UAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CACvBC,CAAAA,MAAAA,EAAAA,mHAAAA,EAAAA,cAAAA,EAAAA,uDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,yBAAmB,CAAC,WAAW,CAAC,EAMpBC,kBAAY,EACjBC,iBAAW,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,UAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAd,uCAAA,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,uBAAM,CAACC,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAlB,uCAAA,CAAA,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA,EAClCH,QAAQ;;;;;;"}

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

@@ -0,0 +1,29 @@
+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/primitive/src/Badge/style.esm.js.map

@@ -0,0 +1 @@
+{"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/primitive/src/Badge/{utils.cjs → utils.cjs.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var style = require('./style.cjs');
+var style = require('./style.cjs.js');
 
 var getBadgeValue = function getBadgeValue(props) {
   if (typeof props === 'string') {
@@ -23,4 +23,4 @@ var badgePseudo = {
 
 exports.badgePseudo = badgePseudo;
 exports.getBadgeValue = getBadgeValue;
-//# sourceMappingURL=utils.cjs.map
+//# sourceMappingURL=utils.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs.js","sources":["../../../../src/Badge/utils.ts"],"sourcesContent":["import type { BadgeValueProps } from '@/Badge/types';\n\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":";;;;IAIaA,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/primitive/src/Badge/{utils.js → utils.esm.js}

@@ -1,4 +1,4 @@
-import { getBadgePseudoCss } from './style.js';
+import { getBadgePseudoCss } from './style.esm.js';
 
 var getBadgeValue = function getBadgeValue(props) {
   if (typeof props === 'string') {
@@ -20,4 +20,4 @@ var badgePseudo = {
 };
 
 export { badgePseudo, getBadgeValue };
-//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.esm.js","sources":["../../../../src/Badge/utils.ts"],"sourcesContent":["import type { BadgeValueProps } from '@/Badge/types';\n\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":";;IAIaA,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/primitive/src/Buttons/Button/{const.cjs → const.cjs.js}

@@ -56,4 +56,4 @@ 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.map
+//# sourceMappingURL=const.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"const.cjs.js","sources":["../../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import type { SpinnerSize } from '@/Common/Spinner/types';\nimport { contents000, contents300, contents999 } from '@remember-web/mixin';\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":";;;;AAKO,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/primitive/src/Buttons/Button/{const.js → const.esm.js}

@@ -51,4 +51,4 @@ var ICON_GAP_MAP = {
 };
 
 export { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP, SPINNER_SIZE_MAP };
-//# sourceMappingURL=const.js.map
+//# sourceMappingURL=const.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"const.esm.js","sources":["../../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import type { SpinnerSize } from '@/Common/Spinner/types';\nimport { contents000, contents300, contents999 } from '@remember-web/mixin';\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":";;AAKO,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/primitive/src/Buttons/Button/{index.cjs → index.cjs.js}

@@ -4,14 +4,14 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var react = require('react');
-require('../../Common/Divider/index.cjs');
-require('../../Common/Flex/index.cjs');
-require('../../Common/Grid/index.cjs');
-var index$1 = require('../../Common/Spinner/index.cjs');
-require('../../Common/Typography/styles.cjs');
+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');
-var styles = require('./styles.cjs');
+var _const = require('./const.cjs.js');
+var styles = require('./styles.cjs.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -59,4 +59,4 @@ var Button = function Button(_ref, ref) {
 var index = /*#__PURE__*/react.forwardRef(Button);
 
 module.exports = index;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"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';\n\nimport type { As } from '@remember-web/shared/types';\nimport { Spinner } from '@/Common';\n\nimport { SPINNER_SIZE_MAP } from './const';\nimport { StyledButton } from './styles';\nimport type { ButtonProps, ButtonSize } 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/primitive/src/Buttons/Button/{index.js → index.esm.js}

@@ -2,14 +2,14 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
-import '../../Common/Divider/index.js';
-import '../../Common/Flex/index.js';
-import '../../Common/Grid/index.js';
-import { Spinner } from '../../Common/Spinner/index.js';
-import '../../Common/Typography/styles.js';
+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.js';
-import { StyledButton } from './styles.js';
+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; }
@@ -52,4 +52,4 @@ var Button = function Button(_ref, ref) {
 var index = /*#__PURE__*/forwardRef(Button);
 
 export { index as default };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"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';\n\nimport type { As } from '@remember-web/shared/types';\nimport { Spinner } from '@/Common';\n\nimport { SPINNER_SIZE_MAP } from './const';\nimport { StyledButton } from './styles';\nimport type { ButtonProps, ButtonSize } 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/primitive/src/Buttons/Button/styles.cjs.js

@@ -0,0 +1,33 @@
+"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/primitive/src/Buttons/Button/styles.cjs.js.map

@@ -0,0 +1 @@
+{"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';\n\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;AAgBN;AACL;AAAA;;;AAA8BA;AAAK;AAEjCC;AAmEA;AACAD;AAYA;;AAeD;;"}

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

@@ -0,0 +1,25 @@
+"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/primitive/src/Buttons/Button/styles.esm.js.map

@@ -0,0 +1 @@
+{"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';\n\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;AAgBN;AACL;AAAA;;;AAA8BA;AAAK;AAEjCC;AAmEA;AACAD;AAYA;;AAeD;;"}

package/dist/primitive/src/Common/Divider/{index.cjs → index.cjs.js}

@@ -2,6 +2,7 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
@@ -28,15 +29,14 @@ function _interopNamespace(e) {
 }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
+var _templateObject;
 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 StyledDivider = styled__default.default(SeparatorPrimitive__namespace.Root).withConfig({
-  displayName: "Divider__StyledDivider",
-  componentId: "sc-2smn3n-0"
-})(["background-color:", ";&[data-orientation='horizontal']{height:1px;width:100%;}&[data-orientation='vertical']{height:100%;width:1px;}"], function (_ref) {
+var StyledDivider = styled__default.default(SeparatorPrimitive__namespace.Root)(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  background-color: ", ";\n  &[data-orientation='horizontal'] {\n    height: 1px;\n    width: 100%;\n  }\n\n  &[data-orientation='vertical'] {\n    height: 100%;\n    width: 1px;\n  }\n"])), function (_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? mixin.divider : _ref$color;
   return color;
@@ -51,4 +51,4 @@ var Divider = function Divider(props) {
 };
 
 exports.Divider = Divider;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.js.map

package/dist/primitive/src/Common/Divider/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Common/Divider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport styled from 'styled-components';\n\nimport { divider } from '@remember-web/mixin';\n\nexport interface DividerProps extends SeparatorPrimitive.SeparatorProps {\n  color?: string;\n}\n\nconst StyledDivider = styled(SeparatorPrimitive.Root)<DividerProps>`\n  background-color: ${({ color = divider }) => color};\n  &[data-orientation='horizontal'] {\n    height: 1px;\n    width: 100%;\n  }\n\n  &[data-orientation='vertical'] {\n    height: 100%;\n    width: 1px;\n  }\n`;\n\n/**\n * @prop {\"horizontal\" | \"vertical\"} orientation - default: \"horizontal\"\n * @prop {boolean} decorative - pure한 장식 컴포넌트 여부. true일 경우 웹 접근성 속성에서 제거됨.\n */\nexport const Divider = (props: DividerProps) => <StyledDivider {...props} />;\n"],"names":["color"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AACsB;AAAGA;AAAe;AAAY;;AAYpD;AACA;AACA;AACA;;;AAC4E;;"}

package/dist/primitive/src/Common/Divider/{index.js → index.esm.js}

@@ -1,16 +1,15 @@
 "use client";
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import styled from 'styled-components';
 import { divider } from '@remember-web/mixin';
 import { jsx } from 'react/jsx-runtime';
 
+var _templateObject;
 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 StyledDivider = styled(SeparatorPrimitive.Root).withConfig({
-  displayName: "Divider__StyledDivider",
-  componentId: "sc-2smn3n-0"
-})(["background-color:", ";&[data-orientation='horizontal']{height:1px;width:100%;}&[data-orientation='vertical']{height:100%;width:1px;}"], function (_ref) {
+var StyledDivider = styled(SeparatorPrimitive.Root)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  &[data-orientation='horizontal'] {\n    height: 1px;\n    width: 100%;\n  }\n\n  &[data-orientation='vertical'] {\n    height: 100%;\n    width: 1px;\n  }\n"])), function (_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? divider : _ref$color;
   return color;
@@ -25,4 +24,4 @@ var Divider = function Divider(props) {
 };
 
 export { Divider };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.esm.js.map

package/dist/primitive/src/Common/Divider/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Common/Divider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport styled from 'styled-components';\n\nimport { divider } from '@remember-web/mixin';\n\nexport interface DividerProps extends SeparatorPrimitive.SeparatorProps {\n  color?: string;\n}\n\nconst StyledDivider = styled(SeparatorPrimitive.Root)<DividerProps>`\n  background-color: ${({ color = divider }) => color};\n  &[data-orientation='horizontal'] {\n    height: 1px;\n    width: 100%;\n  }\n\n  &[data-orientation='vertical'] {\n    height: 100%;\n    width: 1px;\n  }\n`;\n\n/**\n * @prop {\"horizontal\" | \"vertical\"} orientation - default: \"horizontal\"\n * @prop {boolean} decorative - pure한 장식 컴포넌트 여부. true일 경우 웹 접근성 속성에서 제거됨.\n */\nexport const Divider = (props: DividerProps) => <StyledDivider {...props} />;\n"],"names":["color"],"mappings":";;;;;;;;AAAa;AAAA;AAAA;AAWb;AACsB;AAAGA;AAAe;AAAY;;AAYpD;AACA;AACA;AACA;;;AAC4E;;"}

package/dist/primitive/src/Common/Flex/{index.cjs → index.cjs.js}

@@ -3,6 +3,7 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -10,15 +11,14 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 var _excluded = ["as", "width", "height", "direction", "gap", "align", "justify", "wrap"];
+var _templateObject;
 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 StyledFlex = styled__default.default.div.withConfig({
-  displayName: "Flex__StyledFlex",
-  componentId: "sc-1m493gs-0"
-})(function (_ref) {
+var StyledFlex = styled__default.default.div(function (_ref) {
   var _ref$$align = _ref.$align,
     $align = _ref$$align === void 0 ? 'center' : _ref$$align,
     _ref$$direction = _ref.$direction,
@@ -33,7 +33,7 @@ var StyledFlex = styled__default.default.div.withConfig({
     $width = _ref$$width === void 0 ? 'auto' : _ref$$width,
     _ref$$height = _ref.$height,
     $height = _ref$$height === void 0 ? 'auto' : _ref$$height;
-  return styled.css(["box-sizing:border-box;display:flex;width:", ";height:", ";gap:", ";align-items:", ";justify-content:", ";flex-direction:", ";flex-wrap:", ";"], typeof $width === 'number' ? "".concat($width, "px") : $width, typeof $height === 'number' ? "".concat($height, "px") : $height, typeof $gap === 'number' ? "".concat($gap, "px") : $gap, $align, $justify, $direction, $wrap);
+  return styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n    box-sizing: border-box;\n    display: flex;\n    width: ", ";\n    height: ", ";\n\n    gap: ", ";\n    align-items: ", ";\n    justify-content: ", ";\n    flex-direction: ", ";\n    flex-wrap: ", ";\n  "])), typeof $width === 'number' ? "".concat($width, "px") : $width, typeof $height === 'number' ? "".concat($height, "px") : $height, typeof $gap === 'number' ? "".concat($gap, "px") : $gap, $align, $justify, $direction, $wrap);
 });
 
 /**
@@ -68,4 +68,4 @@ var Flex = function Flex(_ref2) {
 };
 
 exports.Flex = Flex;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.js.map

package/dist/primitive/src/Common/Flex/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Common/Flex/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, ElementType, HTMLAttributes } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\n\nexport interface FlexProps extends HTMLAttributes<HTMLDivElement> {\n  as?: ElementType;\n  $align?: CSSProperties['alignItems'];\n  $direction?: CSSProperties['flexDirection'];\n  $justify?: CSSProperties['justifyContent'];\n  $wrap?: CSSProperties['flexWrap'];\n  $gap?: string | number;\n  $width?: string | number;\n  $height?: string | number;\n}\n\nconst StyledFlex = styled.div<Partial<FlexProps>>(\n  ({\n    $align = 'center',\n    $direction = 'row',\n    $justify = 'center',\n    $wrap = 'nowrap',\n    $gap = 0,\n    $width = 'auto',\n    $height = 'auto',\n  }) => css`\n    box-sizing: border-box;\n    display: flex;\n    width: ${typeof $width === 'number' ? `${$width}px` : $width};\n    height: ${typeof $height === 'number' ? `${$height}px` : $height};\n\n    gap: ${typeof $gap === 'number' ? `${$gap}px` : $gap};\n    align-items: ${$align};\n    justify-content: ${$justify};\n    flex-direction: ${$direction};\n    flex-wrap: ${$wrap};\n  `\n);\n\n/**\n * @prop {string} width\n * @prop {string} height\n * @prop {string} gap\n * @prop {CSSProperties['alignItems']} align\n * @prop {CSSProperties['justifyContent']} justify\n * @prop {CSSProperties['flexDirection']} direction\n * @prop {CSSProperties['flexWrap']} wrap\n */\nexport const Flex = ({\n  as,\n  width,\n  height,\n  direction,\n  gap,\n  align,\n  justify,\n  wrap,\n  ...props\n}: ConvertTransientProps<FlexProps>) => (\n  <StyledFlex\n    as={as}\n    $width={width}\n    $height={height}\n    $direction={direction}\n    $gap={gap}\n    $align={align}\n    $justify={justify}\n    $wrap={wrap}\n    {...props}\n  />\n);\n"],"names":["$align","$direction","$justify","$wrap","$gap","$width","$height","props","as"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAkBb;AACE;AACEA;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AAWkB;;AAItB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACiB;;;;;;;;AASZC;AAAK;AAGNC;AACAH;AACAC;AACAL;AACAG;AACAJ;AACAE;AACAC;;AAEA;;"}