npm - @remember-web/primitive - Versions diffs - 0.0.0-alpha.6 → 0.0.0-alpha.7 - Mend

@remember-web/primitive 0.0.0-alpha.6 → 0.0.0-alpha.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

package/dist/primitive/src/Avatars/Avatar/index.cjs CHANGED Viewed

@@ -3,8 +3,8 @@
 var react = require('react');
 var mixin = require('@remember-web/mixin');
-var styles = require('./styles.cjs');
 var icon = require('@remember-web/icon');
+var styles = require('./styles.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var Avatar = function Avatar(_ref, ref) {

package/dist/primitive/src/Avatars/Avatar/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","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';\n\nimport ~~type~~ { ~~StyledAvatarProps~~ } from '~~@/Avatars~~/~~Avatar/styles~~';\nimport { ~~StyledAvatar~~ } from '~~@/Avatars~~/~~Avatar~~/styles';\nimport { ~~IconAvatarEmpty~~ } from '~~@remember-web~~/~~icon~~';\nimport ~~type~~ { ~~ConvertTransientProps~~ } from '~~@remember-web~~/~~shared~~/~~types/~~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;;"}
1	+ {"version":3,"file":"index.cjs","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.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithoutRef } from 'react';
-import type { StyledAvatarProps } from '@/Avatars/Avatar/styles';
 import type { ConvertTransientProps } from '@remember-web/shared/types/styles';
+import type { StyledAvatarProps } from '@/Avatars/Avatar/styles';
 export type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> & ComponentPropsWithoutRef<'div'>;
 declare const _default: import("react").ForwardRefExoticComponent<Partial<ConvertTransientProps<StyledAvatarProps>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;

package/dist/primitive/src/Avatars/Avatar/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Avatars/Avatar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAA4B,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EAAE,~~iBAAiB~~,EAAE,MAAM,~~yBAAyB~~,CAAC;~~AAGjE~~,OAAO,KAAK,EAAE,~~qBAAqB~~,EAAE,MAAM,~~mCAAmC~~,CAAC;~~AAE/E~~,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,GACzE,wBAAwB,CAAC,KAAK,CAAC,CAAC;;AA4BlC,wBAAkC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Avatars/Avatar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAA4B,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAE/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,GACzE,wBAAwB,CAAC,KAAK,CAAC,CAAC;;AA4BlC,wBAAkC"}

package/dist/primitive/src/Avatars/Avatar/index.mjs CHANGED Viewed

@@ -1,8 +1,8 @@
 "use client";
 import { forwardRef } from 'react';
 import { bg200, divider } from '@remember-web/mixin';
-import { StyledAvatar } from './styles.mjs';
 import { IconAvatarEmpty } from '@remember-web/icon';
+import { StyledAvatar } from './styles.mjs';
 import { jsx } from 'react/jsx-runtime';
 var Avatar = function Avatar(_ref, ref) {

package/dist/primitive/src/Avatars/Avatar/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","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';\n\nimport ~~type~~ { ~~StyledAvatarProps~~ } from '~~@/Avatars~~/~~Avatar/styles~~';\nimport { ~~StyledAvatar~~ } from '~~@/Avatars~~/~~Avatar~~/styles';\nimport { ~~IconAvatarEmpty~~ } from '~~@remember-web~~/~~icon~~';\nimport ~~type~~ { ~~ConvertTransientProps~~ } from '~~@remember-web~~/~~shared~~/~~types/~~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;;"}
1	+ {"version":3,"file":"index.mjs","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 CHANGED Viewed

@@ -15,7 +15,10 @@ var avatarSize = {
   xsmall: 24,
   xxsmall: 20
 };
-var StyledAvatar = styled__default.default.div(function (_ref) {
+var StyledAvatar = styled__default.default.div.withConfig({
+  displayName: "styles__StyledAvatar",
+  componentId: "sc-1ksua8m-0"
+})(function (_ref) {
   var $size = _ref.$size,
     $border = _ref.$border,
     $backgroundColor = _ref.$backgroundColor,

package/dist/primitive/src/Avatars/Avatar/styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.cjs","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~~;;;;;"}
1	+ {"version":3,"file":"styles.cjs","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","withConfig","displayName","componentId","_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;IAaYC,YAAY,GAAGC,uBAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,sBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,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,CAAKvB,UAAU,CAACe,KAAK,CAAC,EAAI,IAAA,CAAA;AAC/BS,IAAAA,QAAQ,KAAAD,MAAA,CAAKvB,UAAU,CAACe,KAAK,CAAC,EAAI,IAAA,CAAA;AAClCU,IAAAA,SAAS,KAAAF,MAAA,CAAKvB,UAAU,CAACe,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,CAAC;;;;;"}

package/dist/primitive/src/Avatars/Avatar/styles.mjs CHANGED Viewed

@@ -9,7 +9,10 @@ var avatarSize = {
   xsmall: 24,
   xxsmall: 20
 };
-var StyledAvatar = styled.div(function (_ref) {
+var StyledAvatar = styled.div.withConfig({
+  displayName: "styles__StyledAvatar",
+  componentId: "sc-1ksua8m-0"
+})(function (_ref) {
   var $size = _ref.$size,
     $border = _ref.$border,
     $backgroundColor = _ref.$backgroundColor,

package/dist/primitive/src/Avatars/Avatar/styles.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.mjs","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~~;;;;"}
1	+ {"version":3,"file":"styles.mjs","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","withConfig","displayName","componentId","_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;IAaYC,YAAY,GAAGC,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,sBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,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,CAAKvB,UAAU,CAACe,KAAK,CAAC,EAAI,IAAA,CAAA;AAC/BS,IAAAA,QAAQ,KAAAD,MAAA,CAAKvB,UAAU,CAACe,KAAK,CAAC,EAAI,IAAA,CAAA;AAClCU,IAAAA,SAAS,KAAAF,MAAA,CAAKvB,UAAU,CAACe,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,CAAC;;;;"}

package/dist/primitive/src/Badge/style.cjs CHANGED Viewed

@@ -1,20 +1,16 @@
 '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);
+var badgeCss = styled.css(["", " display:inline-block;box-sizing:border-box;line-height:16px;min-height:8px;background:", ";color:", ";border-radius:8px;padding:1px 4px 0 4px;"], mixin.getTypographyStyles('Subtitle2'), mixin.secondary100, mixin.contents999);
 /**
  * @param pseudo - default: 'after'
@@ -28,9 +24,12 @@ var getBadgePseudoCss = function getBadgePseudoCss() {
     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);
+  return styled.css(["&[data-badge-value]::", "{", ";content:attr(data-badge-value);position:absolute;top:", ";right:", ";transform:translate(50%,-50%);}"], pseudo, badgeCss, top, right);
 };
-var StyledBadge = styled__default.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  ", ";\n"])), badgeCss);
+var StyledBadge = styled__default.default.span.withConfig({
+  displayName: "style__StyledBadge",
+  componentId: "sc-1si6bqw-0"
+})(["", ";"], badgeCss);
 exports.StyledBadge = StyledBadge;
 exports.badgeCss = badgeCss;

package/dist/primitive/src/Badge/style.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"style.cjs","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;;;;;;"}
1	+ {"version":3,"file":"style.cjs","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","getTypographyStyles","secondary100","contents999","getBadgePseudoCss","pseudo","arguments","length","undefined","_ref","_ref$top","top","_ref$right","right","StyledBadge","styled","span","withConfig","displayName","componentId"],"mappings":";;;;;;;;;AAOA;AACA;AACA;AACaA,IAAAA,QAAQ,GAAGC,UAAG,CACvBC,CAAAA,EAAAA,EAAAA,yFAAAA,EAAAA,SAAAA,EAAAA,2CAAAA,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;EAAA,OACjBZ,UAAG,0IACiBK,MAAM,EACzBN,QAAQ,EAGHY,GAAG,EACDE,KAAK,CAAA,CAAA;AAAA,EAGjB;IAEYC,WAAW,GAAGC,uBAAM,CAACC,IAAI,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,oBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,GAAA,CAAA,EAClCpB,QAAQ;;;;;;"}

package/dist/primitive/src/Badge/style.mjs CHANGED Viewed

@@ -1,13 +1,10 @@
-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);
+var badgeCss = css(["", " display:inline-block;box-sizing:border-box;line-height:16px;min-height:8px;background:", ";color:", ";border-radius:8px;padding:1px 4px 0 4px;"], getTypographyStyles('Subtitle2'), secondary100, contents999);
 /**
  * @param pseudo - default: 'after'
@@ -21,9 +18,12 @@ var getBadgePseudoCss = function getBadgePseudoCss() {
     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);
+  return css(["&[data-badge-value]::", "{", ";content:attr(data-badge-value);position:absolute;top:", ";right:", ";transform:translate(50%,-50%);}"], pseudo, badgeCss, top, right);
 };
-var StyledBadge = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n"])), badgeCss);
+var StyledBadge = styled.span.withConfig({
+  displayName: "style__StyledBadge",
+  componentId: "sc-1si6bqw-0"
+})(["", ";"], badgeCss);
 export { StyledBadge, badgeCss, getBadgePseudoCss };
 //# sourceMappingURL=style.mjs.map

package/dist/primitive/src/Badge/style.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"style.mjs","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;;;;"}
1	+ {"version":3,"file":"style.mjs","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","getTypographyStyles","secondary100","contents999","getBadgePseudoCss","pseudo","arguments","length","undefined","_ref","_ref$top","top","_ref$right","right","StyledBadge","styled","span","withConfig","displayName","componentId"],"mappings":";;;AAOA;AACA;AACA;AACaA,IAAAA,QAAQ,GAAGC,GAAG,CACvBC,CAAAA,EAAAA,EAAAA,yFAAAA,EAAAA,SAAAA,EAAAA,2CAAAA,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;EAAA,OACjBZ,GAAG,0IACiBK,MAAM,EACzBN,QAAQ,EAGHY,GAAG,EACDE,KAAK,CAAA,CAAA;AAAA,EAGjB;IAEYC,WAAW,GAAGC,MAAM,CAACC,IAAI,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,oBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,GAAA,CAAA,EAClCpB,QAAQ;;;;"}

package/dist/primitive/src/Buttons/Button/Button.stories.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ declare const meta: {
         as?: T | null | undefined;
     } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<T>>, "icon" | keyof import("@/Buttons/Button/types").ButtonStyleProps | "iconPosition"> & import("@remember-web/shared/types").ConvertTransientProps<Partial<import("@/Buttons/Button/types").ButtonStyleProps>> & {
         icon?: import("react").ReactNode;
-        iconPosition?: "left" | "right" | undefined;
+        iconPosition?: "right" | "left" | undefined;
     } & {
         ref?: import("react").ComponentPropsWithRef<T>["ref"] | undefined;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/dist/primitive/src/Buttons/Button/styles.cjs CHANGED Viewed

@@ -1,7 +1,6 @@
 "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');
@@ -9,24 +8,25 @@ var _const = require('./const.cjs');
 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 StyledButton = styled__default.default.button.withConfig({
+  displayName: "styles__StyledButton",
+  componentId: "sc-1b3cj3-0"
+})(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),
+  styled.css(["all:unset;appearance:none;box-sizing:border-box;cursor:pointer;position:relative;overflow:hidden;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;display:", ";flex-shrink:0;align-items:center;justify-content:center;gap:", ";", " text-align:center;width:fit-content;", " min-width:", ";height:", ";padding:", ";border-radius:4px;color:", ";&:focus-visible:not(:disabled){outline:2px solid ", ";outline-offset:2px;}&:disabled{cursor:not-allowed;&::before{display:none;}}&::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-color:", ";opacity:0;pointer-events:none;transition:opacity 0.2s;}@media (hover:hover){&:hover::before{opacity:0.1;}}&:active::before{opacity:0.2;}"], $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),
+  props.$variant === 'primary' && styled.css(["background-color:", ";&:disabled{background-color:", ";}&::before{background-color:", ";}"], $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)];
+  props.$variant === 'outline' && styled.css(["background-color:", ";border:1px solid ", ";&:disabled{border-color:", ";color:", ";}&::before{background-color:", ";}"], 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;

package/dist/primitive/src/Buttons/Button/styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.cjs","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;;"}
1	+ {"version":3,"file":"styles.cjs","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;;;;AAgB4B;AACvC;AAAA;;;AAA8BA;AAAK;AAEjCC;AAmEA;;AAaA;;AAeD;;"}

package/dist/primitive/src/Buttons/Button/styles.mjs CHANGED Viewed

@@ -1,24 +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.mjs';
-var _templateObject, _templateObject2, _templateObject3;
 var _excluded = ["$size", "$layout", "$color"];
-var StyledButton = styled.button(function (_ref) {
+var StyledButton = styled.button.withConfig({
+  displayName: "styles__StyledButton",
+  componentId: "sc-1b3cj3-0"
+})(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),
+  css(["all:unset;appearance:none;box-sizing:border-box;cursor:pointer;position:relative;overflow:hidden;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;display:", ";flex-shrink:0;align-items:center;justify-content:center;gap:", ";", " text-align:center;width:fit-content;", " min-width:", ";height:", ";padding:", ";border-radius:4px;color:", ";&:focus-visible:not(:disabled){outline:2px solid ", ";outline-offset:2px;}&:disabled{cursor:not-allowed;&::before{display:none;}}&::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-color:", ";opacity:0;pointer-events:none;transition:opacity 0.2s;}@media (hover:hover){&:hover::before{opacity:0.1;}}&:active::before{opacity:0.2;}"], $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),
+  props.$variant === 'primary' && css(["background-color:", ";&:disabled{background-color:", ";}&::before{background-color:", ";}"], $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)];
+  props.$variant === 'outline' && css(["background-color:", ";border:1px solid ", ";&:disabled{border-color:", ";color:", ";}&::before{background-color:", ";}"], 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 };

package/dist/primitive/src/Buttons/Button/styles.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.mjs","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;;"}
1	+ {"version":3,"file":"styles.mjs","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;;;;AAgB4B;AACvC;AAAA;;;AAA8BA;AAAK;AAEjCC;AAmEA;;AAaA;;AAeD;;"}

package/dist/primitive/src/Common/Divider/index.cjs CHANGED Viewed

@@ -2,7 +2,6 @@
 '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');
@@ -29,14 +28,15 @@ 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)(_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 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 _ref$color = _ref.color,
     color = _ref$color === void 0 ? mixin.divider : _ref$color;
   return color;

package/dist/primitive/src/Common/Divider/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","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;;"}
1	+ {"version":3,"file":"index.cjs","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;AAWb;;;AAAqD;AAC/B;AAAGA;AAAe;AAAY;;AAYpD;AACA;AACA;AACA;;;AAC4E;;"}

package/dist/primitive/src/Common/Divider/index.mjs CHANGED Viewed

@@ -1,15 +1,16 @@
 "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)(_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 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 _ref$color = _ref.color,
     color = _ref$color === void 0 ? divider : _ref$color;
   return color;

package/dist/primitive/src/Common/Divider/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","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;;"}
1	+ {"version":3,"file":"index.mjs","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;AAWb;;;AAAqD;AAC/B;AAAGA;AAAe;AAAY;;AAYpD;AACA;AACA;AACA;;;AAC4E;;"}

package/dist/primitive/src/Common/Flex/index.cjs CHANGED Viewed

@@ -3,7 +3,6 @@
 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');
@@ -11,14 +10,15 @@ 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(function (_ref) {
+var StyledFlex = styled__default.default.div.withConfig({
+  displayName: "Flex__StyledFlex",
+  componentId: "sc-1m493gs-0"
+})(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(function (_ref) {
     $width = _ref$$width === void 0 ? 'auto' : _ref$$width,
     _ref$$height = _ref.$height,
     $height = _ref$$height === void 0 ? 'auto' : _ref$$height;
-  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);
+  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);
 });
 /**

package/dist/primitive/src/Common/Flex/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","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;;"}
1	+ {"version":3,"file":"index.cjs","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;AAkBb;;;AAA6B;AAC3B;AACEA;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;AAAgB;AAWE;;AAItB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACiB;;;;;;;;AASZC;AAAK;AAGNC;AACAH;AACAC;AACAL;AACAG;AACAJ;AACAE;AACAC;;AAEA;;"}

package/dist/primitive/src/Common/Flex/index.mjs CHANGED Viewed

@@ -1,15 +1,16 @@
 "use client";
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 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(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.div(function (_ref) {
+var StyledFlex = styled.div.withConfig({
+  displayName: "Flex__StyledFlex",
+  componentId: "sc-1m493gs-0"
+})(function (_ref) {
   var _ref$$align = _ref.$align,
     $align = _ref$$align === void 0 ? 'center' : _ref$$align,
     _ref$$direction = _ref.$direction,
@@ -24,7 +25,7 @@ var StyledFlex = styled.div(function (_ref) {
     $width = _ref$$width === void 0 ? 'auto' : _ref$$width,
     _ref$$height = _ref.$height,
     $height = _ref$$height === void 0 ? 'auto' : _ref$$height;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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);
+  return 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);
 });
 /**

package/dist/primitive/src/Common/Flex/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","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;;"}
1	+ {"version":3,"file":"index.mjs","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;AAkBb;;;AAA6B;AAC3B;AACEA;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;AAAgB;AAWE;;AAItB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACiB;;;;;;;;AASZC;AAAK;AAGNC;AACAH;AACAC;AACAL;AACAG;AACAJ;AACAE;AACAC;;AAEA;;"}

package/dist/primitive/src/Common/Grid/index.cjs CHANGED Viewed

@@ -2,20 +2,20 @@
 'use strict';
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 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 StyledGrid = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  box-sizing: border-box;\n  display: grid;\n  width: ", ";\n  height: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  grid-auto-flow: ", ";\n  grid-template-columns: ", ";\n  gap: ", ";\n  column-gap: ", ";\n  row-gap: ", ";\n"])), function (_ref) {
+var StyledGrid = styled__default.default.div.withConfig({
+  displayName: "Grid__StyledGrid",
+  componentId: "sc-1wy0ax8-0"
+})(["box-sizing:border-box;display:grid;width:", ";height:", ";align-items:", ";justify-content:", ";grid-auto-flow:", ";grid-template-columns:", ";gap:", ";column-gap:", ";row-gap:", ";"], function (_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100%' : _ref$width;
   return width;