@remember-web/primitive 0.1.18 → 0.1.19

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

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

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

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

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

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

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

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

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

@@ -14,7 +14,7 @@ import { StyledButton } from './styles.esm.js';
 var _excluded = ["children", "color", "size", "variant", "layout", "isLoading", "filled", "icon", "iconPosition"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Button = function Button(_ref, ref) {
+var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     color = _ref.color,
     _ref$size = _ref.size,
@@ -48,8 +48,7 @@ var Button = function Button(_ref, ref) {
       children: [iconPosition === 'left' && icon, children, iconPosition === 'right' && icon]
     })
   }));
-};
-var index = /*#__PURE__*/forwardRef(Button);
+});
 
-export { index as default };
+export { Button as default };
 //# sourceMappingURL=index.esm.js.map

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

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

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

@@ -3,8 +3,8 @@
 
 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 styled = require('styled-components');
 var _const = require('./const.cjs.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

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

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

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

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

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

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

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

@@ -1,8 +1,8 @@
 "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 styled, { css } from 'styled-components';
 import { ICON_GAP_MAP, BUTTON_SIZES, BUTTON_COLORS } from './const.esm.js';
 
 var _templateObject, _templateObject2, _templateObject3;

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

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

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

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

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

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

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

@@ -4,6 +4,7 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var react = require('react');
 var styled = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -14,7 +15,7 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWith
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _excluded = ["as", "width", "height", "direction", "gap", "align", "justify", "wrap"];
+var _excluded = ["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; }
@@ -45,9 +46,9 @@ var StyledFlex = styled__default.default.div(function (_ref) {
  * @prop {CSSProperties['flexDirection']} direction
  * @prop {CSSProperties['flexWrap']} wrap
  */
-var Flex = function Flex(_ref2) {
-  var as = _ref2.as,
-    width = _ref2.width,
+
+var Flex = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
+  var width = _ref2.width,
     height = _ref2.height,
     direction = _ref2.direction,
     gap = _ref2.gap,
@@ -56,7 +57,7 @@ var Flex = function Flex(_ref2) {
     wrap = _ref2.wrap,
     props = _objectWithoutProperties__default.default(_ref2, _excluded);
   return /*#__PURE__*/jsxRuntime.jsx(StyledFlex, _objectSpread({
-    as: as,
+    ref: ref,
     $width: width,
     $height: height,
     $direction: direction,
@@ -65,7 +66,7 @@ var Flex = function Flex(_ref2) {
     $justify: justify,
     $wrap: wrap
   }, props));
-};
+});
 
-exports.Flex = Flex;
+module.exports = Flex;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +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';\nimport type { ConvertTransientProps } from '@remember-web/shared';\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;AAiBb;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;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Common/Flex/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport type { CSSProperties, ComponentProps, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\nimport type { PolymorphicComponent } from 'styled-components';\nimport styled, { css } from 'styled-components';\n\nexport interface FlexStyledProps extends ComponentProps<'div'> {\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<FlexStyledProps>>(\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 */\n\nconst Flex = forwardRef(function (\n  { width, height, direction, gap, align, justify, wrap, ...props }: FlexProps,\n  ref: ForwardedRef<HTMLDivElement | null>\n) {\n  return (\n    <StyledFlex\n      ref={ref}\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}) as PolymorphicComponent<'web', FlexProps>;\n\ntype FlexProps = ConvertTransientProps<FlexStyledProps>;\n\nexport default Flex;\n"],"names":["$align","$direction","$justify","$wrap","$gap","$width","$height","Flex","props","ref"],"mappings":";;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAkBb;AACE;AACEA;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AAWkB;;AAItB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEMC;AAGJ;;;;;;;AAF0DC;AAG1D;AAEIC;AACAJ;AACAC;AACAL;AACAG;AACAJ;AACAE;AACAC;;AAIN;;"}

package/dist/src/Common/Flex/index.d.ts

@@ -1,7 +1,7 @@
-import type { CSSProperties, ElementType, HTMLAttributes } from 'react';
 import type { ConvertTransientProps } from '@remember-web/shared';
-export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
-    as?: ElementType;
+import type { CSSProperties, ComponentProps } from 'react';
+import type { PolymorphicComponent } from 'styled-components';
+export interface FlexStyledProps extends ComponentProps<'div'> {
     $align?: CSSProperties['alignItems'];
     $direction?: CSSProperties['flexDirection'];
     $justify?: CSSProperties['justifyContent'];
@@ -19,5 +19,6 @@ export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
  * @prop {CSSProperties['flexDirection']} direction
  * @prop {CSSProperties['flexWrap']} wrap
  */
-export declare const Flex: ({ as, width, height, direction, gap, align, justify, wrap, ...props }: ConvertTransientProps<FlexProps>) => import("react/jsx-runtime").JSX.Element;
+declare const Flex: PolymorphicComponent<"web", ConvertTransientProps<FlexStyledProps>>;
+export default Flex;
 //# sourceMappingURL=index.d.ts.map

package/dist/src/Common/Flex/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Flex/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,MAAM,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAyBD;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI,0EAUd,sBAAsB,SAAS,CAAC,4CAYlC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Flex/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAgB,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG9D,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC5D,MAAM,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAyBD;;;;;;;;GAQG;AAEH,QAAA,MAAM,IAAI,qEAiBkC,CAAC;AAI7C,eAAe,IAAI,CAAC"}

package/dist/src/Common/Flex/index.esm.js

@@ -2,10 +2,11 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["as", "width", "height", "direction", "gap", "align", "justify", "wrap"];
+var _excluded = ["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; }
@@ -36,9 +37,9 @@ var StyledFlex = styled.div(function (_ref) {
  * @prop {CSSProperties['flexDirection']} direction
  * @prop {CSSProperties['flexWrap']} wrap
  */
-var Flex = function Flex(_ref2) {
-  var as = _ref2.as,
-    width = _ref2.width,
+
+var Flex = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var width = _ref2.width,
     height = _ref2.height,
     direction = _ref2.direction,
     gap = _ref2.gap,
@@ -47,7 +48,7 @@ var Flex = function Flex(_ref2) {
     wrap = _ref2.wrap,
     props = _objectWithoutProperties(_ref2, _excluded);
   return /*#__PURE__*/jsx(StyledFlex, _objectSpread({
-    as: as,
+    ref: ref,
     $width: width,
     $height: height,
     $direction: direction,
@@ -56,7 +57,7 @@ var Flex = function Flex(_ref2) {
     $justify: justify,
     $wrap: wrap
   }, props));
-};
+});
 
-export { Flex };
+export { Flex as default };
 //# sourceMappingURL=index.esm.js.map

package/dist/src/Common/Flex/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Flex/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, ElementType, HTMLAttributes } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { ConvertTransientProps } from '@remember-web/shared';\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;AAiBb;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;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Flex/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport type { CSSProperties, ComponentProps, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\nimport type { PolymorphicComponent } from 'styled-components';\nimport styled, { css } from 'styled-components';\n\nexport interface FlexStyledProps extends ComponentProps<'div'> {\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<FlexStyledProps>>(\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 */\n\nconst Flex = forwardRef(function (\n  { width, height, direction, gap, align, justify, wrap, ...props }: FlexProps,\n  ref: ForwardedRef<HTMLDivElement | null>\n) {\n  return (\n    <StyledFlex\n      ref={ref}\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}) as PolymorphicComponent<'web', FlexProps>;\n\ntype FlexProps = ConvertTransientProps<FlexStyledProps>;\n\nexport default Flex;\n"],"names":["$align","$direction","$justify","$wrap","$gap","$width","$height","Flex","props","ref"],"mappings":";;;;;;;;AAAa;AAAA;AAAA;AAAA;AAkBb;AACE;AACEA;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AAWkB;;AAItB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEMC;AAGJ;;;;;;;AAF0DC;AAG1D;AAEIC;AACAJ;AACAC;AACAL;AACAG;AACAJ;AACAE;AACAC;;AAIN;;"}

package/dist/src/Common/Grid/index.cjs.js

@@ -54,6 +54,7 @@ var StyledGrid = styled__default.default.div(_templateObject || (_templateObject
 });
 
 /**
+ * @deprecated
  * @prop {string} width
  * @prop {string} height
  * @prop {CSSProperties['alignItems']} align

package/dist/src/Common/Grid/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/Common/Grid/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, HTMLAttributes } from 'react';\nimport styled from 'styled-components';\n\nexport interface GridProps extends HTMLAttributes<HTMLDivElement> {\n  width?: string;\n  height?: string;\n  align?: CSSProperties['alignItems'];\n  justify?: CSSProperties['justifyContent'];\n  flow?: CSSProperties['gridAutoFlow'];\n  columns?: number;\n  gap?: string;\n  columnGap?: string;\n  rowGap?: string;\n}\n\nconst StyledGrid = styled.div<Partial<GridProps>>`\n  box-sizing: border-box;\n  display: grid;\n  width: ${({ width = '100%' }) => width};\n  height: ${({ height = '100%' }) => height};\n  align-items: ${({ align = 'center' }) => align};\n  justify-content: ${({ justify = 'center' }) => justify};\n  grid-auto-flow: ${({ flow = 'center' }) => flow};\n  grid-template-columns: ${({ columns = 1 }) => `repeat(${columns}, 1fr)`};\n  gap: ${({ gap = '0px' }) => gap};\n  column-gap: ${({ columnGap = '0px' }) => columnGap};\n  row-gap: ${({ rowGap = '0px' }) => rowGap};\n`;\n\n/**\n * @prop {string} width\n * @prop {string} height\n * @prop {CSSProperties['alignItems']} align\n * @prop {CSSProperties['justifyContent']} justify\n * @prop {CSSProperties['gridAutoFlow']} flow\n * @prop {number} columns\n * @prop {string} gap\n * @prop {string} columnGap\n * @prop {string} rowGap\n */\nexport const Grid = (props: GridProps) => <StyledGrid {...props} />;\n"],"names":["width","height","align","justify","flow","columns","gap","columnGap","rowGap"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAiBb;AAGW;AAAGA;AAAc;AAAY;AAC5B;AAAGC;AAAe;AAAa;AAC1B;AAAGC;AAAgB;AAAY;AAC3B;AAAGC;AAAkB;AAAc;AACpC;AAAGC;AAAe;AAAW;AACtB;AAAGC;;AAAmC;AACxD;AAAGC;AAAW;AAAU;AACjB;AAAGC;AAAiB;AAAgB;AACvC;AAAGC;AAAc;AAAa;;AAG3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACmE;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Common/Grid/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, HTMLAttributes } from 'react';\nimport styled from 'styled-components';\n\nexport interface GridProps extends HTMLAttributes<HTMLDivElement> {\n  width?: string;\n  height?: string;\n  align?: CSSProperties['alignItems'];\n  justify?: CSSProperties['justifyContent'];\n  flow?: CSSProperties['gridAutoFlow'];\n  columns?: number;\n  gap?: string;\n  columnGap?: string;\n  rowGap?: string;\n}\n\nconst StyledGrid = styled.div<Partial<GridProps>>`\n  box-sizing: border-box;\n  display: grid;\n  width: ${({ width = '100%' }) => width};\n  height: ${({ height = '100%' }) => height};\n  align-items: ${({ align = 'center' }) => align};\n  justify-content: ${({ justify = 'center' }) => justify};\n  grid-auto-flow: ${({ flow = 'center' }) => flow};\n  grid-template-columns: ${({ columns = 1 }) => `repeat(${columns}, 1fr)`};\n  gap: ${({ gap = '0px' }) => gap};\n  column-gap: ${({ columnGap = '0px' }) => columnGap};\n  row-gap: ${({ rowGap = '0px' }) => rowGap};\n`;\n\n/**\n * @deprecated\n * @prop {string} width\n * @prop {string} height\n * @prop {CSSProperties['alignItems']} align\n * @prop {CSSProperties['justifyContent']} justify\n * @prop {CSSProperties['gridAutoFlow']} flow\n * @prop {number} columns\n * @prop {string} gap\n * @prop {string} columnGap\n * @prop {string} rowGap\n */\nexport const Grid = (props: GridProps) => <StyledGrid {...props} />;\n"],"names":["width","height","align","justify","flow","columns","gap","columnGap","rowGap"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAiBb;AAGW;AAAGA;AAAc;AAAY;AAC5B;AAAGC;AAAe;AAAa;AAC1B;AAAGC;AAAgB;AAAY;AAC3B;AAAGC;AAAkB;AAAc;AACpC;AAAGC;AAAe;AAAW;AACtB;AAAGC;;AAAmC;AACxD;AAAGC;AAAW;AAAU;AACjB;AAAGC;AAAiB;AAAgB;AACvC;AAAGC;AAAc;AAAa;;AAG3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACmE;;"}

package/dist/src/Common/Grid/index.d.ts

@@ -11,6 +11,7 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
     rowGap?: string;
 }
 /**
+ * @deprecated
  * @prop {string} width
  * @prop {string} height
  * @prop {CSSProperties['alignItems']} align

package/dist/src/Common/Grid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Grid/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG3D,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC1C,IAAI,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAgBD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,IAAI,UAAW,SAAS,4CAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Grid/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG3D,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC1C,IAAI,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAgBD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI,UAAW,SAAS,4CAA8B,CAAC"}

package/dist/src/Common/Grid/index.esm.js

@@ -46,6 +46,7 @@ var StyledGrid = styled.div(_templateObject || (_templateObject = _taggedTemplat
 });
 
 /**
+ * @deprecated
  * @prop {string} width
  * @prop {string} height
  * @prop {CSSProperties['alignItems']} align

package/dist/src/Common/Grid/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Grid/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, HTMLAttributes } from 'react';\nimport styled from 'styled-components';\n\nexport interface GridProps extends HTMLAttributes<HTMLDivElement> {\n  width?: string;\n  height?: string;\n  align?: CSSProperties['alignItems'];\n  justify?: CSSProperties['justifyContent'];\n  flow?: CSSProperties['gridAutoFlow'];\n  columns?: number;\n  gap?: string;\n  columnGap?: string;\n  rowGap?: string;\n}\n\nconst StyledGrid = styled.div<Partial<GridProps>>`\n  box-sizing: border-box;\n  display: grid;\n  width: ${({ width = '100%' }) => width};\n  height: ${({ height = '100%' }) => height};\n  align-items: ${({ align = 'center' }) => align};\n  justify-content: ${({ justify = 'center' }) => justify};\n  grid-auto-flow: ${({ flow = 'center' }) => flow};\n  grid-template-columns: ${({ columns = 1 }) => `repeat(${columns}, 1fr)`};\n  gap: ${({ gap = '0px' }) => gap};\n  column-gap: ${({ columnGap = '0px' }) => columnGap};\n  row-gap: ${({ rowGap = '0px' }) => rowGap};\n`;\n\n/**\n * @prop {string} width\n * @prop {string} height\n * @prop {CSSProperties['alignItems']} align\n * @prop {CSSProperties['justifyContent']} justify\n * @prop {CSSProperties['gridAutoFlow']} flow\n * @prop {number} columns\n * @prop {string} gap\n * @prop {string} columnGap\n * @prop {string} rowGap\n */\nexport const Grid = (props: GridProps) => <StyledGrid {...props} />;\n"],"names":["width","height","align","justify","flow","columns","gap","columnGap","rowGap"],"mappings":";;;;;;AAAa;AAAA;AAAA;AAiBb;AAGW;AAAGA;AAAc;AAAY;AAC5B;AAAGC;AAAe;AAAa;AAC1B;AAAGC;AAAgB;AAAY;AAC3B;AAAGC;AAAkB;AAAc;AACpC;AAAGC;AAAe;AAAW;AACtB;AAAGC;;AAAmC;AACxD;AAAGC;AAAW;AAAU;AACjB;AAAGC;AAAiB;AAAgB;AACvC;AAAGC;AAAc;AAAa;;AAG3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACmE;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Grid/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, HTMLAttributes } from 'react';\nimport styled from 'styled-components';\n\nexport interface GridProps extends HTMLAttributes<HTMLDivElement> {\n  width?: string;\n  height?: string;\n  align?: CSSProperties['alignItems'];\n  justify?: CSSProperties['justifyContent'];\n  flow?: CSSProperties['gridAutoFlow'];\n  columns?: number;\n  gap?: string;\n  columnGap?: string;\n  rowGap?: string;\n}\n\nconst StyledGrid = styled.div<Partial<GridProps>>`\n  box-sizing: border-box;\n  display: grid;\n  width: ${({ width = '100%' }) => width};\n  height: ${({ height = '100%' }) => height};\n  align-items: ${({ align = 'center' }) => align};\n  justify-content: ${({ justify = 'center' }) => justify};\n  grid-auto-flow: ${({ flow = 'center' }) => flow};\n  grid-template-columns: ${({ columns = 1 }) => `repeat(${columns}, 1fr)`};\n  gap: ${({ gap = '0px' }) => gap};\n  column-gap: ${({ columnGap = '0px' }) => columnGap};\n  row-gap: ${({ rowGap = '0px' }) => rowGap};\n`;\n\n/**\n * @deprecated\n * @prop {string} width\n * @prop {string} height\n * @prop {CSSProperties['alignItems']} align\n * @prop {CSSProperties['justifyContent']} justify\n * @prop {CSSProperties['gridAutoFlow']} flow\n * @prop {number} columns\n * @prop {string} gap\n * @prop {string} columnGap\n * @prop {string} rowGap\n */\nexport const Grid = (props: GridProps) => <StyledGrid {...props} />;\n"],"names":["width","height","align","justify","flow","columns","gap","columnGap","rowGap"],"mappings":";;;;;;AAAa;AAAA;AAAA;AAiBb;AAGW;AAAGA;AAAc;AAAY;AAC5B;AAAGC;AAAe;AAAa;AAC1B;AAAGC;AAAgB;AAAY;AAC3B;AAAGC;AAAkB;AAAc;AACpC;AAAGC;AAAe;AAAW;AACtB;AAAGC;;AAAmC;AACxD;AAAGC;AAAW;AAAU;AACjB;AAAGC;AAAiB;AAAgB;AACvC;AAAGC;AAAc;AAAa;;AAG3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACmE;;"}

package/dist/src/Common/Typography/index.cjs.js

@@ -12,12 +12,11 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
 
-var _excluded = ["variant", "as", "color", "children", "ellipsis", "maxWidth"];
+var _excluded = ["variant", "color", "children", "ellipsis", "maxWidth"];
 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 Typography = function Typography(_ref, ref) {
+var Typography = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var variant = _ref.variant,
-    as = _ref.as,
     color = _ref.color,
     children = _ref.children,
     ellipsis = _ref.ellipsis,
@@ -25,7 +24,6 @@ var Typography = function Typography(_ref, ref) {
     props = _objectWithoutProperties__default.default(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsx(styles.StyledTypography, _objectSpread(_objectSpread({
     ref: ref,
-    as: as,
     $variant: variant,
     $color: color,
     $ellipsis: ellipsis,
@@ -33,8 +31,7 @@ var Typography = function Typography(_ref, ref) {
   }, props), {}, {
     children: children
   }));
-};
-var Typography$1 = /*#__PURE__*/react.forwardRef(Typography);
+});
 
-module.exports = Typography$1;
+module.exports = Typography;
 //# sourceMappingURL=index.cjs.js.map

package/dist/src/Common/Typography/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/Common/Typography/index.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentPropsWithRef,\n  CSSProperties,\n  ElementType,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\nimport { type TypographyStyle } from '@remember-web/mixin';\n\nimport { StyledTypography } from './styles';\n\nconst Typography = <T extends ElementType>(\n  {\n    variant,\n    as,\n    color,\n    children,\n    ellipsis,\n    maxWidth,\n    ...props\n  }: TypographyProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <StyledTypography\n    ref={ref}\n    as={as}\n    $variant={variant}\n    $color={color}\n    $ellipsis={ellipsis}\n    $maxWidth={maxWidth}\n    {...props}\n  >\n    {children}\n  </StyledTypography>\n);\n\ntype TypographyProps<T extends ElementType> = {\n  variant: TypographyStyle;\n  as?: T;\n  color?: string;\n  children?: ReactNode;\n  ellipsis?: number;\n  maxWidth?: CSSProperties['maxWidth'];\n} & ComponentPropsWithoutRef<T>;\n\ntype TypographyComponentWithRef = <T extends ElementType = 'div'>(\n  props: TypographyProps<T> & { ref?: ComponentPropsWithRef<T>['ref'] }\n) => ReactElement | null;\n\nexport default forwardRef(Typography) as TypographyComponentWithRef;\n"],"names":["props","ref","as","$variant","$color","$ellipsis","$maxWidth","children"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAeb;AAUsC;;;;;;AAF/BA;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AACQ;AAgBrB;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Common/Typography/index.tsx"],"sourcesContent":["'use client';\n\nimport { type TypographyStyle } from '@remember-web/mixin';\nimport type {\n  CSSProperties,\n  ComponentProps,\n  ForwardedRef,\n  ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\nimport type { PolymorphicComponent } from 'styled-components';\n\nimport { StyledTypography } from './styles';\n\nconst Typography = forwardRef(function (\n  { variant, color, children, ellipsis, maxWidth, ...props }: TypographyProps,\n  ref: ForwardedRef<HTMLDivElement | null>\n) {\n  return (\n    <StyledTypography\n      ref={ref}\n      $variant={variant}\n      $color={color}\n      $ellipsis={ellipsis}\n      $maxWidth={maxWidth}\n      {...props}\n    >\n      {children}\n    </StyledTypography>\n  );\n}) as PolymorphicComponent<'web', TypographyProps>;\n\ntype TypographyProps = {\n  variant: TypographyStyle;\n  color?: string;\n  children?: ReactNode;\n  ellipsis?: number;\n  maxWidth?: CSSProperties['maxWidth'];\n} & ComponentProps<'div'>;\n\nexport default Typography;\n"],"names":["Typography","props","ref","$variant","$color","$ellipsis","$maxWidth","children"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAcPA;AAGJ;;;;;AAFmDC;AAGnD;AAEIC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AAGf;;"}

package/dist/src/Common/Typography/index.d.ts

@@ -1,16 +1,13 @@
-import type { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties, ElementType, ReactElement, ReactNode } from 'react';
 import { type TypographyStyle } from '@remember-web/mixin';
-type TypographyProps<T extends ElementType> = {
+import type { CSSProperties, ComponentProps, ReactNode } from 'react';
+import type { PolymorphicComponent } from 'styled-components';
+declare const Typography: PolymorphicComponent<"web", TypographyProps>;
+type TypographyProps = {
     variant: TypographyStyle;
-    as?: T;
     color?: string;
     children?: ReactNode;
     ellipsis?: number;
     maxWidth?: CSSProperties['maxWidth'];
-} & ComponentPropsWithoutRef<T>;
-type TypographyComponentWithRef = <T extends ElementType = 'div'>(props: TypographyProps<T> & {
-    ref?: ComponentPropsWithRef<T>['ref'];
-}) => ReactElement | null;
-declare const _default: TypographyComponentWithRef;
-export default _default;
+} & ComponentProps<'div'>;
+export default Typography;
 //# sourceMappingURL=index.d.ts.map

package/dist/src/Common/Typography/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Typography/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,wBAAwB,EACxB,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AA6B3D,KAAK,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI;IAC5C,OAAO,EAAE,eAAe,CAAC;IACzB,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACtC,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAEhC,KAAK,0BAA0B,GAAG,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAC9D,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;CAAE,KAClE,YAAY,GAAG,IAAI,CAAC;;AAEzB,wBAAoE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Typography/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EAEd,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAI9D,QAAA,MAAM,UAAU,8CAgBkC,CAAC;AAEnD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,eAAe,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACtC,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1B,eAAe,UAAU,CAAC"}

package/dist/src/Common/Typography/index.esm.js

@@ -5,12 +5,11 @@ import { forwardRef } from 'react';
 import { StyledTypography } from './styles.esm.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["variant", "as", "color", "children", "ellipsis", "maxWidth"];
+var _excluded = ["variant", "color", "children", "ellipsis", "maxWidth"];
 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 Typography = function Typography(_ref, ref) {
+var Typography = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var variant = _ref.variant,
-    as = _ref.as,
     color = _ref.color,
     children = _ref.children,
     ellipsis = _ref.ellipsis,
@@ -18,7 +17,6 @@ var Typography = function Typography(_ref, ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(StyledTypography, _objectSpread(_objectSpread({
     ref: ref,
-    as: as,
     $variant: variant,
     $color: color,
     $ellipsis: ellipsis,
@@ -26,8 +24,7 @@ var Typography = function Typography(_ref, ref) {
   }, props), {}, {
     children: children
   }));
-};
-var Typography$1 = /*#__PURE__*/forwardRef(Typography);
+});
 
-export { Typography$1 as default };
+export { Typography as default };
 //# sourceMappingURL=index.esm.js.map

package/dist/src/Common/Typography/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Typography/index.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentPropsWithRef,\n  CSSProperties,\n  ElementType,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\nimport { type TypographyStyle } from '@remember-web/mixin';\n\nimport { StyledTypography } from './styles';\n\nconst Typography = <T extends ElementType>(\n  {\n    variant,\n    as,\n    color,\n    children,\n    ellipsis,\n    maxWidth,\n    ...props\n  }: TypographyProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <StyledTypography\n    ref={ref}\n    as={as}\n    $variant={variant}\n    $color={color}\n    $ellipsis={ellipsis}\n    $maxWidth={maxWidth}\n    {...props}\n  >\n    {children}\n  </StyledTypography>\n);\n\ntype TypographyProps<T extends ElementType> = {\n  variant: TypographyStyle;\n  as?: T;\n  color?: string;\n  children?: ReactNode;\n  ellipsis?: number;\n  maxWidth?: CSSProperties['maxWidth'];\n} & ComponentPropsWithoutRef<T>;\n\ntype TypographyComponentWithRef = <T extends ElementType = 'div'>(\n  props: TypographyProps<T> & { ref?: ComponentPropsWithRef<T>['ref'] }\n) => ReactElement | null;\n\nexport default forwardRef(Typography) as TypographyComponentWithRef;\n"],"names":["props","ref","as","$variant","$color","$ellipsis","$maxWidth","children"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAeb;AAUsC;;;;;;AAF/BA;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AACQ;AAgBrB;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Typography/index.tsx"],"sourcesContent":["'use client';\n\nimport { type TypographyStyle } from '@remember-web/mixin';\nimport type {\n  CSSProperties,\n  ComponentProps,\n  ForwardedRef,\n  ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\nimport type { PolymorphicComponent } from 'styled-components';\n\nimport { StyledTypography } from './styles';\n\nconst Typography = forwardRef(function (\n  { variant, color, children, ellipsis, maxWidth, ...props }: TypographyProps,\n  ref: ForwardedRef<HTMLDivElement | null>\n) {\n  return (\n    <StyledTypography\n      ref={ref}\n      $variant={variant}\n      $color={color}\n      $ellipsis={ellipsis}\n      $maxWidth={maxWidth}\n      {...props}\n    >\n      {children}\n    </StyledTypography>\n  );\n}) as PolymorphicComponent<'web', TypographyProps>;\n\ntype TypographyProps = {\n  variant: TypographyStyle;\n  color?: string;\n  children?: ReactNode;\n  ellipsis?: number;\n  maxWidth?: CSSProperties['maxWidth'];\n} & ComponentProps<'div'>;\n\nexport default Typography;\n"],"names":["Typography","props","ref","$variant","$color","$ellipsis","$maxWidth","children"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAcPA;AAGJ;;;;;AAFmDC;AAGnD;AAEIC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AAGf;;"}

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

@@ -1,5 +1,5 @@
 export * from './Divider';
-export * from './Flex';
+export { default as Flex } from './Flex';
 export * from './Grid';
 export * from './Spinner';
 export { default as Typography } from './Typography';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Common/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,4BAA4B;AAC5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Common/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,4BAA4B;AAC5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/src/Modals/Dialog/index.cjs.js

@@ -45,7 +45,7 @@ Dialog.Content = function (_ref2) {
     props = _objectWithoutProperties__default.default(_ref2, _excluded2);
   return /*#__PURE__*/jsxRuntime.jsxs(DialogPrimitive.Portal, {
     children: [dimmed && /*#__PURE__*/jsxRuntime.jsx(styles.StyledOverlay, {}), /*#__PURE__*/jsxRuntime.jsx(styles.DialogContent, _objectSpread(_objectSpread({}, props), {}, {
-      children: /*#__PURE__*/jsxRuntime.jsx(index.Flex, {
+      children: /*#__PURE__*/jsxRuntime.jsx(index, {
         direction: "column",
         align: "center",
         children: children

package/dist/src/Modals/Dialog/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/Modals/Dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';\nimport { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';\nimport { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';\n\nimport { Flex } from '@/Common/Flex';\n\nimport {\n  DialogContent,\n  DialogDescription,\n  DialogIcon,\n  DialogTitle,\n  IconButton,\n  StyledOverlay,\n} from './styles';\n\ninterface ContentProps extends DialogContentProps {\n  children: React.ReactNode;\n  dimmed?: boolean;\n}\n\n/**\n * @prop {React.ReactNode} children\n * @prop {boolean} open\n * @prop {boolean} defaultOpen\n * @prop {(open: boolean) => void} onOpenChange\n * @prop {boolean} modal\n * @prop {string} id\n */\nexport function Dialog({ children, ...props }: DialogProps) {\n  return <Root {...props}>{children}</Root>;\n}\n\n/**\n * @prop {boolean} dimmed\n * @see https://www.radix-ui.com/docs/primitives/components/dialog\n */\nDialog.Content = ({ children, dimmed = true, ...props }: ContentProps) => (\n  <Portal>\n    {dimmed && <StyledOverlay />}\n    <DialogContent {...props}>\n      <Flex direction=\"column\" align=\"center\">\n        {children}\n      </Flex>\n    </DialogContent>\n  </Portal>\n);\n\nDialog.HeadIcon = ({ type = 'alert' }: { type?: 'alert' | 'confirm' }) => (\n  <DialogIcon>\n    {type === 'alert' && <PictogramAlert size={40} />}\n    {type === 'confirm' && <PictogramCheck size={40} />}\n  </DialogIcon>\n);\n\nDialog.CloseIcon = () => (\n  <Close asChild>\n    <IconButton type=\"button\" aria-label=\"Close\">\n      <IconClose size=\"small\" />\n    </IconButton>\n  </Close>\n);\n\nDialog.Title = ({ children }: { children: React.ReactNode }) => (\n  <DialogTitle>{children}</DialogTitle>\n);\n\nDialog.Description = ({ children }: { children: React.ReactNode }) => (\n  <DialogDescription>{children}</DialogDescription>\n);\n\nDialog.Trigger = Trigger;\nDialog.Close = Close;\n"],"names":["props","children","Dialog","dimmed","direction","align","type","size"],"mappings":";;;;;;;;;;;;;;;;AAAa;;AAAA;AAAA;AAsBb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AAAqD;AAAtBA;;AACdC;AAAW;AACnC;;AAEA;AACA;AACA;AACA;AACAC;AAAiB;;AAAaC;AAAkBH;;AACvCC;;AAGGG;AAAmBC;AAAcJ;;AAEhC;AACO;AACT;AAGXC;AAAkB;AAAGI;;AACRL;AAC4BM;;AACEA;AAAS;AAAG;AACxC;AAGfL;;;;AAEgBI;AAAc;;AACbC;;;AACA;AACP;AAGVL;AAAe;;AACDD;AAAU;AAAe;AAGvCC;AAAqB;;AACDD;AAAU;AAAqB;AAGnDC;AACAA;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Modals/Dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';\nimport { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';\nimport { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';\n\nimport Flex from '@/Common/Flex';\n\nimport {\n  DialogContent,\n  DialogDescription,\n  DialogIcon,\n  DialogTitle,\n  IconButton,\n  StyledOverlay,\n} from './styles';\n\ninterface ContentProps extends DialogContentProps {\n  children: React.ReactNode;\n  dimmed?: boolean;\n}\n\n/**\n * @prop {React.ReactNode} children\n * @prop {boolean} open\n * @prop {boolean} defaultOpen\n * @prop {(open: boolean) => void} onOpenChange\n * @prop {boolean} modal\n * @prop {string} id\n */\nexport function Dialog({ children, ...props }: DialogProps) {\n  return <Root {...props}>{children}</Root>;\n}\n\n/**\n * @prop {boolean} dimmed\n * @see https://www.radix-ui.com/docs/primitives/components/dialog\n */\nDialog.Content = ({ children, dimmed = true, ...props }: ContentProps) => (\n  <Portal>\n    {dimmed && <StyledOverlay />}\n    <DialogContent {...props}>\n      <Flex direction=\"column\" align=\"center\">\n        {children}\n      </Flex>\n    </DialogContent>\n  </Portal>\n);\n\nDialog.HeadIcon = ({ type = 'alert' }: { type?: 'alert' | 'confirm' }) => (\n  <DialogIcon>\n    {type === 'alert' && <PictogramAlert size={40} />}\n    {type === 'confirm' && <PictogramCheck size={40} />}\n  </DialogIcon>\n);\n\nDialog.CloseIcon = () => (\n  <Close asChild>\n    <IconButton type=\"button\" aria-label=\"Close\">\n      <IconClose size=\"small\" />\n    </IconButton>\n  </Close>\n);\n\nDialog.Title = ({ children }: { children: React.ReactNode }) => (\n  <DialogTitle>{children}</DialogTitle>\n);\n\nDialog.Description = ({ children }: { children: React.ReactNode }) => (\n  <DialogDescription>{children}</DialogDescription>\n);\n\nDialog.Trigger = Trigger;\nDialog.Close = Close;\n"],"names":["props","children","Dialog","dimmed","direction","align","type","size"],"mappings":";;;;;;;;;;;;;;;;AAAa;;AAAA;AAAA;AAsBb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AAAqD;AAAtBA;;AACdC;AAAW;AACnC;;AAEA;AACA;AACA;AACA;AACAC;AAAiB;;AAAaC;AAAkBH;;AACvCC;;AAGGG;AAAmBC;AAAcJ;;AAEhC;AACO;AACT;AAGXC;AAAkB;AAAGI;;AACRL;AAC4BM;;AACEA;AAAS;AAAG;AACxC;AAGfL;;;;AAEgBI;AAAc;;AACbC;;;AACA;AACP;AAGVL;AAAe;;AACDD;AAAU;AAAe;AAGvCC;AAAqB;;AACDD;AAAU;AAAqB;AAGnDC;AACAA;;"}

package/dist/src/Modals/Dialog/index.esm.js

@@ -3,7 +3,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { Root, Portal, Close, Trigger } from '@radix-ui/react-dialog';
 import { PictogramAlert, PictogramCheck, IconClose } from '@remember-web/icon';
-import { Flex } from '../../Common/Flex/index.esm.js';
+import Flex from '../../Common/Flex/index.esm.js';
 import { StyledOverlay, DialogContent, DialogIcon, IconButton, DialogTitle, DialogDescription } from './styles.esm.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/src/Modals/Dialog/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Modals/Dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';\nimport { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';\nimport { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';\n\nimport { Flex } from '@/Common/Flex';\n\nimport {\n  DialogContent,\n  DialogDescription,\n  DialogIcon,\n  DialogTitle,\n  IconButton,\n  StyledOverlay,\n} from './styles';\n\ninterface ContentProps extends DialogContentProps {\n  children: React.ReactNode;\n  dimmed?: boolean;\n}\n\n/**\n * @prop {React.ReactNode} children\n * @prop {boolean} open\n * @prop {boolean} defaultOpen\n * @prop {(open: boolean) => void} onOpenChange\n * @prop {boolean} modal\n * @prop {string} id\n */\nexport function Dialog({ children, ...props }: DialogProps) {\n  return <Root {...props}>{children}</Root>;\n}\n\n/**\n * @prop {boolean} dimmed\n * @see https://www.radix-ui.com/docs/primitives/components/dialog\n */\nDialog.Content = ({ children, dimmed = true, ...props }: ContentProps) => (\n  <Portal>\n    {dimmed && <StyledOverlay />}\n    <DialogContent {...props}>\n      <Flex direction=\"column\" align=\"center\">\n        {children}\n      </Flex>\n    </DialogContent>\n  </Portal>\n);\n\nDialog.HeadIcon = ({ type = 'alert' }: { type?: 'alert' | 'confirm' }) => (\n  <DialogIcon>\n    {type === 'alert' && <PictogramAlert size={40} />}\n    {type === 'confirm' && <PictogramCheck size={40} />}\n  </DialogIcon>\n);\n\nDialog.CloseIcon = () => (\n  <Close asChild>\n    <IconButton type=\"button\" aria-label=\"Close\">\n      <IconClose size=\"small\" />\n    </IconButton>\n  </Close>\n);\n\nDialog.Title = ({ children }: { children: React.ReactNode }) => (\n  <DialogTitle>{children}</DialogTitle>\n);\n\nDialog.Description = ({ children }: { children: React.ReactNode }) => (\n  <DialogDescription>{children}</DialogDescription>\n);\n\nDialog.Trigger = Trigger;\nDialog.Close = Close;\n"],"names":["props","children","Dialog","dimmed","direction","align","type","size"],"mappings":";;;;;;;;;AAAa;;AAAA;AAAA;AAsBb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AAAqD;AAAtBA;;AACdC;AAAW;AACnC;;AAEA;AACA;AACA;AACA;AACAC;AAAiB;;AAAaC;AAAkBH;;AACvCC;;AAGGG;AAAmBC;AAAcJ;;AAEhC;AACO;AACT;AAGXC;AAAkB;AAAGI;;AACRL;AAC4BM;;AACEA;AAAS;AAAG;AACxC;AAGfL;;;;AAEgBI;AAAc;;AACbC;;;AACA;AACP;AAGVL;AAAe;;AACDD;AAAU;AAAe;AAGvCC;AAAqB;;AACDD;AAAU;AAAqB;AAGnDC;AACAA;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Modals/Dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';\nimport { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';\nimport { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';\n\nimport Flex from '@/Common/Flex';\n\nimport {\n  DialogContent,\n  DialogDescription,\n  DialogIcon,\n  DialogTitle,\n  IconButton,\n  StyledOverlay,\n} from './styles';\n\ninterface ContentProps extends DialogContentProps {\n  children: React.ReactNode;\n  dimmed?: boolean;\n}\n\n/**\n * @prop {React.ReactNode} children\n * @prop {boolean} open\n * @prop {boolean} defaultOpen\n * @prop {(open: boolean) => void} onOpenChange\n * @prop {boolean} modal\n * @prop {string} id\n */\nexport function Dialog({ children, ...props }: DialogProps) {\n  return <Root {...props}>{children}</Root>;\n}\n\n/**\n * @prop {boolean} dimmed\n * @see https://www.radix-ui.com/docs/primitives/components/dialog\n */\nDialog.Content = ({ children, dimmed = true, ...props }: ContentProps) => (\n  <Portal>\n    {dimmed && <StyledOverlay />}\n    <DialogContent {...props}>\n      <Flex direction=\"column\" align=\"center\">\n        {children}\n      </Flex>\n    </DialogContent>\n  </Portal>\n);\n\nDialog.HeadIcon = ({ type = 'alert' }: { type?: 'alert' | 'confirm' }) => (\n  <DialogIcon>\n    {type === 'alert' && <PictogramAlert size={40} />}\n    {type === 'confirm' && <PictogramCheck size={40} />}\n  </DialogIcon>\n);\n\nDialog.CloseIcon = () => (\n  <Close asChild>\n    <IconButton type=\"button\" aria-label=\"Close\">\n      <IconClose size=\"small\" />\n    </IconButton>\n  </Close>\n);\n\nDialog.Title = ({ children }: { children: React.ReactNode }) => (\n  <DialogTitle>{children}</DialogTitle>\n);\n\nDialog.Description = ({ children }: { children: React.ReactNode }) => (\n  <DialogDescription>{children}</DialogDescription>\n);\n\nDialog.Trigger = Trigger;\nDialog.Close = Close;\n"],"names":["props","children","Dialog","dimmed","direction","align","type","size"],"mappings":";;;;;;;;;AAAa;;AAAA;AAAA;AAsBb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AAAqD;AAAtBA;;AACdC;AAAW;AACnC;;AAEA;AACA;AACA;AACA;AACAC;AAAiB;;AAAaC;AAAkBH;;AACvCC;;AAGGG;AAAmBC;AAAcJ;;AAEhC;AACO;AACT;AAGXC;AAAkB;AAAGI;;AACRL;AAC4BM;;AACEA;AAAS;AAAG;AACxC;AAGfL;;;;AAEgBI;AAAc;;AACbC;;;AACA;AACP;AAGVL;AAAe;;AACDD;AAAU;AAAe;AAGvCC;AAAqB;;AACDD;AAAU;AAAqB;AAGnDC;AACAA;;"}

package/dist/src/Paginations/CompactPagination/index.cjs.js

@@ -72,7 +72,7 @@ function CompactPagination(_ref) {
         color: getArrowButtonColor(isPrevPageDisabled),
         "aria-hidden": "true"
       })
-    }), /*#__PURE__*/jsxRuntime.jsxs(index.Flex, {
+    }), /*#__PURE__*/jsxRuntime.jsxs(index, {
       gap: "4px",
       style: {
         minWidth: '44px',

package/dist/src/Paginations/CompactPagination/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/Paginations/CompactPagination/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';\nimport { contents000, contents300 } from '@remember-web/mixin';\n\nimport { Flex } from '@/Common/Flex';\n\nimport {\n  ArrowButton,\n  CompactPaginationContainer,\n  CurrentPage,\n} from '../styles';\nimport type { CompactPaginationProps } from '../types';\nimport usePagination from '../usePagination';\n\nexport function CompactPagination({\n  activePage = 1,\n  totalItemCount = 0,\n  onChangePage,\n  itemCountPerPage,\n  infinite = false,\n  className,\n}: CompactPaginationProps) {\n  const {\n    totalLastPage,\n    prevPage,\n    nextPage,\n    isPrevPageDisabled,\n    isNextPageDisabled,\n  } = usePagination({\n    activePage,\n    totalItemCount,\n    pageRangeDisplayed: 1,\n    itemCountPerPage,\n  });\n\n  const iconColor = (disabled: boolean) =>\n    disabled ? contents300 : contents000;\n\n  const onClickPrevPage = () => {\n    const prevPageToGo =\n      activePage === 1 && infinite ? totalLastPage : prevPage;\n    onChangePage(prevPageToGo);\n  };\n\n  const onClickNextPage = () => {\n    const nextPageToGo =\n      activePage === totalLastPage && infinite ? 1 : nextPage;\n    onChangePage(nextPageToGo);\n  };\n\n  const hasOnlyOnePage = totalLastPage === 1;\n\n  const getArrowButtonDisabled = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return true;\n    }\n    if (infinite) {\n      return false;\n    }\n    return disabled;\n  };\n\n  const getArrowButtonColor = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return contents300;\n    }\n    if (infinite) {\n      return contents000;\n    }\n    return iconColor(disabled);\n  };\n\n  return (\n    <CompactPaginationContainer\n      className={className}\n      role=\"navigation\"\n      aria-label=\"페이지네이션\"\n    >\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isPrevPageDisabled)}\n        onClick={onClickPrevPage}\n        aria-label=\"이전 페이지로 이동\"\n      >\n        <IconArrow2Left\n          size=\"small\"\n          color={getArrowButtonColor(isPrevPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n      <Flex gap=\"4px\" style={{ minWidth: '44px', userSelect: 'none' }}>\n        <CurrentPage>{activePage}</CurrentPage>/ {totalLastPage}\n      </Flex>\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isNextPageDisabled)}\n        onClick={onClickNextPage}\n        aria-label=\"다음 페이지로 이동\"\n      >\n        <IconArrow2Right\n          size=\"small\"\n          color={getArrowButtonColor(isNextPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n    </CompactPaginationContainer>\n  );\n}\n"],"names":["activePage","totalItemCount","infinite","pageRangeDisplayed","itemCountPerPage","className","role","disabled","onClick","size","color","gap","style","minWidth","userSelect","children"],"mappings":";;;;;;;;;;AAeO;AAOoB;AANzBA;;AACAC;;;;AAGAC;;;AAUEF;AACAC;AACAE;AACAC;AACF;;;;;;AAEA;AAAoC;AACE;AAEtC;;;;AAMA;;;;AAMA;AAEA;AACE;AACE;AACF;AACA;AACE;AACF;AACA;;AAGF;AACE;AACE;AACF;AACA;AACE;AACF;;;;AAMEC;AACAC;AACA;;AAGEC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEEC;AAAUC;AAASC;AAAkBC;;;AAC7BC;;AAA2C;AAGvDR;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AACU;AAGpB;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Paginations/CompactPagination/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';\nimport { contents000, contents300 } from '@remember-web/mixin';\n\nimport Flex from '@/Common/Flex';\n\nimport {\n  ArrowButton,\n  CompactPaginationContainer,\n  CurrentPage,\n} from '../styles';\nimport type { CompactPaginationProps } from '../types';\nimport usePagination from '../usePagination';\n\nexport function CompactPagination({\n  activePage = 1,\n  totalItemCount = 0,\n  onChangePage,\n  itemCountPerPage,\n  infinite = false,\n  className,\n}: CompactPaginationProps) {\n  const {\n    totalLastPage,\n    prevPage,\n    nextPage,\n    isPrevPageDisabled,\n    isNextPageDisabled,\n  } = usePagination({\n    activePage,\n    totalItemCount,\n    pageRangeDisplayed: 1,\n    itemCountPerPage,\n  });\n\n  const iconColor = (disabled: boolean) =>\n    disabled ? contents300 : contents000;\n\n  const onClickPrevPage = () => {\n    const prevPageToGo =\n      activePage === 1 && infinite ? totalLastPage : prevPage;\n    onChangePage(prevPageToGo);\n  };\n\n  const onClickNextPage = () => {\n    const nextPageToGo =\n      activePage === totalLastPage && infinite ? 1 : nextPage;\n    onChangePage(nextPageToGo);\n  };\n\n  const hasOnlyOnePage = totalLastPage === 1;\n\n  const getArrowButtonDisabled = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return true;\n    }\n    if (infinite) {\n      return false;\n    }\n    return disabled;\n  };\n\n  const getArrowButtonColor = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return contents300;\n    }\n    if (infinite) {\n      return contents000;\n    }\n    return iconColor(disabled);\n  };\n\n  return (\n    <CompactPaginationContainer\n      className={className}\n      role=\"navigation\"\n      aria-label=\"페이지네이션\"\n    >\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isPrevPageDisabled)}\n        onClick={onClickPrevPage}\n        aria-label=\"이전 페이지로 이동\"\n      >\n        <IconArrow2Left\n          size=\"small\"\n          color={getArrowButtonColor(isPrevPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n      <Flex gap=\"4px\" style={{ minWidth: '44px', userSelect: 'none' }}>\n        <CurrentPage>{activePage}</CurrentPage>/ {totalLastPage}\n      </Flex>\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isNextPageDisabled)}\n        onClick={onClickNextPage}\n        aria-label=\"다음 페이지로 이동\"\n      >\n        <IconArrow2Right\n          size=\"small\"\n          color={getArrowButtonColor(isNextPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n    </CompactPaginationContainer>\n  );\n}\n"],"names":["activePage","totalItemCount","infinite","pageRangeDisplayed","itemCountPerPage","className","role","disabled","onClick","size","color","gap","style","minWidth","userSelect","children"],"mappings":";;;;;;;;;;AAeO;AAOoB;AANzBA;;AACAC;;;;AAGAC;;;AAUEF;AACAC;AACAE;AACAC;AACF;;;;;;AAEA;AAAoC;AACE;AAEtC;;;;AAMA;;;;AAMA;AAEA;AACE;AACE;AACF;AACA;AACE;AACF;AACA;;AAGF;AACE;AACE;AACF;AACA;AACE;AACF;;;;AAMEC;AACAC;AACA;;AAGEC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEEC;AAAUC;AAASC;AAAkBC;;;AAC7BC;;AAA2C;AAGvDR;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AACU;AAGpB;;"}

package/dist/src/Paginations/CompactPagination/index.esm.js

@@ -1,7 +1,7 @@
 "use client";
 import { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';
 import { contents300, contents000 } from '@remember-web/mixin';
-import { Flex } from '../../Common/Flex/index.esm.js';
+import Flex from '../../Common/Flex/index.esm.js';
 import { CompactPaginationContainer, ArrowButton, CurrentPage } from '../styles.esm.js';
 import usePagination from '../usePagination.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/src/Paginations/CompactPagination/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Paginations/CompactPagination/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';\nimport { contents000, contents300 } from '@remember-web/mixin';\n\nimport { Flex } from '@/Common/Flex';\n\nimport {\n  ArrowButton,\n  CompactPaginationContainer,\n  CurrentPage,\n} from '../styles';\nimport type { CompactPaginationProps } from '../types';\nimport usePagination from '../usePagination';\n\nexport function CompactPagination({\n  activePage = 1,\n  totalItemCount = 0,\n  onChangePage,\n  itemCountPerPage,\n  infinite = false,\n  className,\n}: CompactPaginationProps) {\n  const {\n    totalLastPage,\n    prevPage,\n    nextPage,\n    isPrevPageDisabled,\n    isNextPageDisabled,\n  } = usePagination({\n    activePage,\n    totalItemCount,\n    pageRangeDisplayed: 1,\n    itemCountPerPage,\n  });\n\n  const iconColor = (disabled: boolean) =>\n    disabled ? contents300 : contents000;\n\n  const onClickPrevPage = () => {\n    const prevPageToGo =\n      activePage === 1 && infinite ? totalLastPage : prevPage;\n    onChangePage(prevPageToGo);\n  };\n\n  const onClickNextPage = () => {\n    const nextPageToGo =\n      activePage === totalLastPage && infinite ? 1 : nextPage;\n    onChangePage(nextPageToGo);\n  };\n\n  const hasOnlyOnePage = totalLastPage === 1;\n\n  const getArrowButtonDisabled = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return true;\n    }\n    if (infinite) {\n      return false;\n    }\n    return disabled;\n  };\n\n  const getArrowButtonColor = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return contents300;\n    }\n    if (infinite) {\n      return contents000;\n    }\n    return iconColor(disabled);\n  };\n\n  return (\n    <CompactPaginationContainer\n      className={className}\n      role=\"navigation\"\n      aria-label=\"페이지네이션\"\n    >\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isPrevPageDisabled)}\n        onClick={onClickPrevPage}\n        aria-label=\"이전 페이지로 이동\"\n      >\n        <IconArrow2Left\n          size=\"small\"\n          color={getArrowButtonColor(isPrevPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n      <Flex gap=\"4px\" style={{ minWidth: '44px', userSelect: 'none' }}>\n        <CurrentPage>{activePage}</CurrentPage>/ {totalLastPage}\n      </Flex>\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isNextPageDisabled)}\n        onClick={onClickNextPage}\n        aria-label=\"다음 페이지로 이동\"\n      >\n        <IconArrow2Right\n          size=\"small\"\n          color={getArrowButtonColor(isNextPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n    </CompactPaginationContainer>\n  );\n}\n"],"names":["activePage","totalItemCount","infinite","pageRangeDisplayed","itemCountPerPage","className","role","disabled","onClick","size","color","gap","style","minWidth","userSelect","children"],"mappings":";;;;;;;;AAeO;AAOoB;AANzBA;;AACAC;;;;AAGAC;;;AAUEF;AACAC;AACAE;AACAC;AACF;;;;;;AAEA;AAAoC;AACE;AAEtC;;;;AAMA;;;;AAMA;AAEA;AACE;AACE;AACF;AACA;AACE;AACF;AACA;;AAGF;AACE;AACE;AACF;AACA;AACE;AACF;;;;AAMEC;AACAC;AACA;;AAGEC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEEC;AAAUC;AAASC;AAAkBC;;;AAC7BC;;AAA2C;AAGvDR;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AACU;AAGpB;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Paginations/CompactPagination/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';\nimport { contents000, contents300 } from '@remember-web/mixin';\n\nimport Flex from '@/Common/Flex';\n\nimport {\n  ArrowButton,\n  CompactPaginationContainer,\n  CurrentPage,\n} from '../styles';\nimport type { CompactPaginationProps } from '../types';\nimport usePagination from '../usePagination';\n\nexport function CompactPagination({\n  activePage = 1,\n  totalItemCount = 0,\n  onChangePage,\n  itemCountPerPage,\n  infinite = false,\n  className,\n}: CompactPaginationProps) {\n  const {\n    totalLastPage,\n    prevPage,\n    nextPage,\n    isPrevPageDisabled,\n    isNextPageDisabled,\n  } = usePagination({\n    activePage,\n    totalItemCount,\n    pageRangeDisplayed: 1,\n    itemCountPerPage,\n  });\n\n  const iconColor = (disabled: boolean) =>\n    disabled ? contents300 : contents000;\n\n  const onClickPrevPage = () => {\n    const prevPageToGo =\n      activePage === 1 && infinite ? totalLastPage : prevPage;\n    onChangePage(prevPageToGo);\n  };\n\n  const onClickNextPage = () => {\n    const nextPageToGo =\n      activePage === totalLastPage && infinite ? 1 : nextPage;\n    onChangePage(nextPageToGo);\n  };\n\n  const hasOnlyOnePage = totalLastPage === 1;\n\n  const getArrowButtonDisabled = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return true;\n    }\n    if (infinite) {\n      return false;\n    }\n    return disabled;\n  };\n\n  const getArrowButtonColor = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return contents300;\n    }\n    if (infinite) {\n      return contents000;\n    }\n    return iconColor(disabled);\n  };\n\n  return (\n    <CompactPaginationContainer\n      className={className}\n      role=\"navigation\"\n      aria-label=\"페이지네이션\"\n    >\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isPrevPageDisabled)}\n        onClick={onClickPrevPage}\n        aria-label=\"이전 페이지로 이동\"\n      >\n        <IconArrow2Left\n          size=\"small\"\n          color={getArrowButtonColor(isPrevPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n      <Flex gap=\"4px\" style={{ minWidth: '44px', userSelect: 'none' }}>\n        <CurrentPage>{activePage}</CurrentPage>/ {totalLastPage}\n      </Flex>\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isNextPageDisabled)}\n        onClick={onClickNextPage}\n        aria-label=\"다음 페이지로 이동\"\n      >\n        <IconArrow2Right\n          size=\"small\"\n          color={getArrowButtonColor(isNextPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n    </CompactPaginationContainer>\n  );\n}\n"],"names":["activePage","totalItemCount","infinite","pageRangeDisplayed","itemCountPerPage","className","role","disabled","onClick","size","color","gap","style","minWidth","userSelect","children"],"mappings":";;;;;;;;AAeO;AAOoB;AANzBA;;AACAC;;;;AAGAC;;;AAUEF;AACAC;AACAE;AACAC;AACF;;;;;;AAEA;AAAoC;AACE;AAEtC;;;;AAMA;;;;AAMA;AAEA;AACE;AACE;AACF;AACA;AACE;AACF;AACA;;AAGF;AACE;AACE;AACF;AACA;AACE;AACF;;;;AAMEC;AACAC;AACA;;AAGEC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEEC;AAAUC;AAASC;AAAkBC;;;AAC7BC;;AAA2C;AAGvDR;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AACU;AAGpB;;"}

package/dist/src/index.cjs.js

@@ -6,11 +6,11 @@ var index$1 = require('./Buttons/Button/index.cjs.js');
 var utils = require('./Badge/utils.cjs.js');
 var Badge = require('./Badge/Badge.cjs.js');
 var style = require('./Badge/style.cjs.js');
-var index$3 = require('./Common/Divider/index.cjs.js');
-var index$4 = require('./Common/Flex/index.cjs.js');
+var index$4 = require('./Common/Divider/index.cjs.js');
+var index$2 = require('./Common/Flex/index.cjs.js');
 var index$5 = require('./Common/Grid/index.cjs.js');
 var index$6 = require('./Common/Spinner/index.cjs.js');
-var index$2 = require('./Common/Typography/index.cjs.js');
+var index$3 = require('./Common/Typography/index.cjs.js');
 var styles$1 = require('./Common/Typography/styles.cjs.js');
 var Checkbox = require('./Control/Checkbox.cjs.js');
 var Toggle = require('./Control/Toggle.cjs.js');
@@ -39,11 +39,11 @@ exports.Button = index$1;
 exports.badgePseudo = utils.badgePseudo;
 exports.Badge = Badge.Badge;
 exports.getBadgePseudoCss = style.getBadgePseudoCss;
-exports.Divider = index$3.Divider;
-exports.Flex = index$4.Flex;
+exports.Divider = index$4.Divider;
+exports.Flex = index$2;
 exports.Grid = index$5.Grid;
 exports.Spinner = index$6.Spinner;
-exports.Typography = index$2;
+exports.Typography = index$3;
 exports.StyledTypography = styles$1.StyledTypography;
 exports.Checkbox = Checkbox.Checkbox;
 exports._Checkbox = Checkbox._Checkbox;

package/dist/src/index.esm.js

@@ -5,7 +5,7 @@ export { badgePseudo } from './Badge/utils.esm.js';
 export { Badge } from './Badge/Badge.esm.js';
 export { getBadgePseudoCss } from './Badge/style.esm.js';
 export { Divider } from './Common/Divider/index.esm.js';
-export { Flex } from './Common/Flex/index.esm.js';
+export { default as Flex } from './Common/Flex/index.esm.js';
 export { Grid } from './Common/Grid/index.esm.js';
 export { Spinner } from './Common/Spinner/index.esm.js';
 export { default as Typography } from './Common/Typography/index.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",
@@ -44,7 +44,7 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@remember-web/icon": "^0.1.9",
     "@remember-web/mixin": "^0.1.15",
-    "@remember-web/shared": "^0.1.0"
+    "@remember-web/shared": "^0.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",

package/src/Buttons/Button/Button.stories.tsx

@@ -56,7 +56,7 @@ export const AnchorButton: Story = {
       isIconName(iconString) &&
       createElement(getIconComponentFromName(iconString));
 
-    return <Button {...args} icon={iconElement} as="a" href="#" />;
+    return <Button {...(args as any)} icon={iconElement} as="a" href="#" />;
   },
 };
 

package/src/Buttons/Button/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import type { ElementType, ForwardRefRenderFunction } from 'react';
+import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
-import type { As } from '@remember-web/shared';
+import { type PolymorphicComponent } from 'styled-components';
 
 import { Spinner } from '@/Common';
 
@@ -10,10 +10,7 @@ import { SPINNER_SIZE_MAP } from './const';
 import { StyledButton } from './styles';
 import type { ButtonProps } from './types';
 
-const Button: ForwardRefRenderFunction<
-  HTMLButtonElement,
-  ButtonProps<'button'> & As<ElementType>
-> = (
+const Button = forwardRef(function (
   {
     children,
     color,
@@ -25,37 +22,33 @@ const Button: ForwardRefRenderFunction<
     icon,
     iconPosition = 'left',
     ...props
-  },
-  ref
-) => (
-  <StyledButton
-    $color={color}
-    $size={size}
-    $variant={variant}
-    $layout={layout}
-    $isLoading={isLoading}
-    $filled={filled}
-    aria-live="polite"
-    aria-busy={isLoading}
-    ref={ref}
-    {...props}
-  >
-    {isLoading ? (
-      <Spinner size={SPINNER_SIZE_MAP[size]} />
-    ) : (
-      <>
-        {iconPosition === 'left' && icon}
-        {children}
-        {iconPosition === 'right' && icon}
-      </>
-    )}
-  </StyledButton>
-);
+  }: ButtonProps,
+  ref: ForwardedRef<HTMLButtonElement | null>
+) {
+  return (
+    <StyledButton
+      $color={color}
+      $size={size}
+      $variant={variant}
+      $layout={layout}
+      $isLoading={isLoading}
+      $filled={filled}
+      aria-live="polite"
+      aria-busy={isLoading}
+      ref={ref}
+      {...props}
+    >
+      {isLoading ? (
+        <Spinner size={SPINNER_SIZE_MAP[size]} />
+      ) : (
+        <>
+          {iconPosition === 'left' && icon}
+          {children}
+          {iconPosition === 'right' && icon}
+        </>
+      )}
+    </StyledButton>
+  );
+}) as PolymorphicComponent<'web', ButtonProps>;
 
-type ButtonComponentWithRef = <T extends ElementType = 'button'>(
-  props: { as?: T | null } & ButtonProps<T> & {
-      ref?: React.ComponentPropsWithRef<T>['ref'];
-    }
-) => React.ReactElement | null;
-
-export default forwardRef(Button) as ButtonComponentWithRef;
+export default Button;

package/src/Buttons/Button/styles.ts

@@ -1,7 +1,5 @@
 'use client';
 
-import type { DataAttributes } from 'styled-components';
-import styled, { css } from 'styled-components';
 import {
   bg100,
   disabled,
@@ -9,11 +7,12 @@ import {
   primary100,
   primary200,
 } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
 
 import { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';
 import type { ButtonStyleProps } from './types';
 
-export const StyledButton = styled.button<ButtonStyleProps & DataAttributes>(
+export const StyledButton = styled.button<ButtonStyleProps>(
   ({ $size, $layout, $color, ...props }) => [
     // 공용 스타일
     css`

package/src/Buttons/Button/types.ts

@@ -1,6 +1,6 @@
-import type { ElementType } from 'react';
-import type { ConvertTransientProps } from '@remember-web/shared';
 import type { ColorVariable } from '@remember-web/mixin';
+import type { ConvertTransientProps } from '@remember-web/shared';
+import type { ComponentProps } from 'react';
 
 export type ButtonSize = 'small' | 'medium' | 'large' | 'xLarge';
 
@@ -19,13 +19,7 @@ export interface ButtonStyleProps {
   $filled?: boolean;
 }
 
-type ConvertProps = ConvertTransientProps<Partial<ButtonStyleProps>>;
-
-export type ButtonProps<AsT extends ElementType> = Omit<
-  React.ComponentPropsWithoutRef<AsT>,
-  keyof ButtonStyleProps | 'icon' | 'iconPosition'
-> &
-  ConvertProps & {
-    icon?: React.ReactNode;
-    iconPosition?: 'left' | 'right';
-  };
+export type ButtonProps = ConvertTransientProps<Partial<ButtonStyleProps>> & {
+  icon?: React.ReactNode;
+  iconPosition?: 'left' | 'right';
+} & ComponentProps<'button'>;

package/src/Common/Divider/Divider.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Flex } from '../Flex';
+import Flex from '../Flex';
 import { Divider } from './index';
 
 type Story = StoryObj<typeof Divider>;

package/src/Common/Flex/index.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import type { CSSProperties, ElementType, HTMLAttributes } from 'react';
-import styled, { css } from 'styled-components';
 import type { ConvertTransientProps } from '@remember-web/shared';
+import type { CSSProperties, ComponentProps, ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+import type { PolymorphicComponent } from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
-  as?: ElementType;
+export interface FlexStyledProps extends ComponentProps<'div'> {
   $align?: CSSProperties['alignItems'];
   $direction?: CSSProperties['flexDirection'];
   $justify?: CSSProperties['justifyContent'];
@@ -15,7 +16,7 @@ export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
   $height?: string | number;
 }
 
-const StyledFlex = styled.div<Partial<FlexProps>>(
+const StyledFlex = styled.div<Partial<FlexStyledProps>>(
   ({
     $align = 'center',
     $direction = 'row',
@@ -47,26 +48,26 @@ const StyledFlex = styled.div<Partial<FlexProps>>(
  * @prop {CSSProperties['flexDirection']} direction
  * @prop {CSSProperties['flexWrap']} wrap
  */
-export const Flex = ({
-  as,
-  width,
-  height,
-  direction,
-  gap,
-  align,
-  justify,
-  wrap,
-  ...props
-}: ConvertTransientProps<FlexProps>) => (
-  <StyledFlex
-    as={as}
-    $width={width}
-    $height={height}
-    $direction={direction}
-    $gap={gap}
-    $align={align}
-    $justify={justify}
-    $wrap={wrap}
-    {...props}
-  />
-);
+
+const Flex = forwardRef(function (
+  { width, height, direction, gap, align, justify, wrap, ...props }: FlexProps,
+  ref: ForwardedRef<HTMLDivElement | null>
+) {
+  return (
+    <StyledFlex
+      ref={ref}
+      $width={width}
+      $height={height}
+      $direction={direction}
+      $gap={gap}
+      $align={align}
+      $justify={justify}
+      $wrap={wrap}
+      {...props}
+    />
+  );
+}) as PolymorphicComponent<'web', FlexProps>;
+
+type FlexProps = ConvertTransientProps<FlexStyledProps>;
+
+export default Flex;

package/src/Common/Grid/index.tsx

@@ -30,6 +30,7 @@ const StyledGrid = styled.div<Partial<GridProps>>`
 `;
 
 /**
+ * @deprecated
  * @prop {string} width
  * @prop {string} height
  * @prop {CSSProperties['alignItems']} align

package/src/Common/Typography/index.tsx

@@ -1,54 +1,41 @@
 'use client';
 
+import { type TypographyStyle } from '@remember-web/mixin';
 import type {
-  ComponentPropsWithoutRef,
-  ComponentPropsWithRef,
   CSSProperties,
-  ElementType,
-  ReactElement,
+  ComponentProps,
+  ForwardedRef,
   ReactNode,
 } from 'react';
 import { forwardRef } from 'react';
-import { type TypographyStyle } from '@remember-web/mixin';
+import type { PolymorphicComponent } from 'styled-components';
 
 import { StyledTypography } from './styles';
 
-const Typography = <T extends ElementType>(
-  {
-    variant,
-    as,
-    color,
-    children,
-    ellipsis,
-    maxWidth,
-    ...props
-  }: TypographyProps<T>,
-  ref: ComponentPropsWithRef<T>['ref']
-) => (
-  <StyledTypography
-    ref={ref}
-    as={as}
-    $variant={variant}
-    $color={color}
-    $ellipsis={ellipsis}
-    $maxWidth={maxWidth}
-    {...props}
-  >
-    {children}
-  </StyledTypography>
-);
+const Typography = forwardRef(function (
+  { variant, color, children, ellipsis, maxWidth, ...props }: TypographyProps,
+  ref: ForwardedRef<HTMLDivElement | null>
+) {
+  return (
+    <StyledTypography
+      ref={ref}
+      $variant={variant}
+      $color={color}
+      $ellipsis={ellipsis}
+      $maxWidth={maxWidth}
+      {...props}
+    >
+      {children}
+    </StyledTypography>
+  );
+}) as PolymorphicComponent<'web', TypographyProps>;
 
-type TypographyProps<T extends ElementType> = {
+type TypographyProps = {
   variant: TypographyStyle;
-  as?: T;
   color?: string;
   children?: ReactNode;
   ellipsis?: number;
   maxWidth?: CSSProperties['maxWidth'];
-} & ComponentPropsWithoutRef<T>;
-
-type TypographyComponentWithRef = <T extends ElementType = 'div'>(
-  props: TypographyProps<T> & { ref?: ComponentPropsWithRef<T>['ref'] }
-) => ReactElement | null;
+} & ComponentProps<'div'>;
 
-export default forwardRef(Typography) as TypographyComponentWithRef;
+export default Typography;

package/src/Common/index.ts

@@ -1,5 +1,5 @@
 export * from './Divider';
-export * from './Flex';
+export { default as Flex } from './Flex';
 export * from './Grid';
 export * from './Spinner';
 export { default as Typography } from './Typography';

package/src/Modals/Dialog/index.tsx

@@ -4,7 +4,7 @@ import type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';
 import { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';
 import { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';
 
-import { Flex } from '@/Common/Flex';
+import Flex from '@/Common/Flex';
 
 import {
   DialogContent,

package/src/Paginations/CompactPagination/index.tsx

@@ -3,7 +3,7 @@
 import { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';
 import { contents000, contents300 } from '@remember-web/mixin';
 
-import { Flex } from '@/Common/Flex';
+import Flex from '@/Common/Flex';
 
 import {
   ArrowButton,