@remember-web/primitive 0.1.18 → 0.1.20

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;
 //# 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\nexport const Flex = forwardRef(\n  (\n    {\n      width,\n      height,\n      direction,\n      gap,\n      align,\n      justify,\n      wrap,\n      ...props\n    }: FlexProps,\n    ref: ForwardedRef<HTMLDivElement | null>\n  ) => (\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\nexport type FlexProps = ConvertTransientProps<FlexStyledProps>;\n"],"names":["$align","$direction","$justify","$wrap","$gap","$width","$height","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;;AAEO;AAYqC;;;;;;;AAFnCC;AAAK;AAKRC;AACAH;AACAC;AACAL;AACAG;AACAJ;AACAE;AACAC;;AAEA;;"}

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;
+export declare const Flex: PolymorphicComponent<"web", ConvertTransientProps<FlexStyledProps>>;
+export type FlexProps = ConvertTransientProps<FlexStyledProps>;
 //# 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,eAAO,MAAM,IAAI,qEA0B0B,CAAC;AAE5C,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,eAAe,CAAC,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 };
 //# 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\nexport const Flex = forwardRef(\n  (\n    {\n      width,\n      height,\n      direction,\n      gap,\n      align,\n      justify,\n      wrap,\n      ...props\n    }: FlexProps,\n    ref: ForwardedRef<HTMLDivElement | null>\n  ) => (\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\nexport type FlexProps = ConvertTransientProps<FlexStyledProps>;\n"],"names":["$align","$direction","$justify","$wrap","$gap","$width","$height","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;;AAEO;AAYqC;;;;;;;AAFnCC;AAAK;AAKRC;AACAH;AACAC;AACAL;AACAG;AACAJ;AACAE;AACAC;;AAEA;;"}

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/Skeleton/index.cjs.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('react');
+var styles = require('./styles.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+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", "width", "height", "animate"];
+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 Skeleton = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var variant = _ref.variant,
+    width = _ref.width,
+    height = _ref.height,
+    _ref$animate = _ref.animate,
+    animate = _ref$animate === void 0 ? true : _ref$animate,
+    props = _objectWithoutProperties__default.default(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsx(styles.StyledSkeleton, _objectSpread({
+    ref: ref,
+    $variant: variant,
+    $width: width,
+    $height: height,
+    $animate: animate
+  }, props));
+});
+
+exports.Skeleton = Skeleton;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Common/Skeleton/index.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\nimport type { ConvertTransientProps } from '@remember-web/shared';\n\nimport type { StyledSkeletonProps } from '@/Common/Skeleton/styles';\nimport { StyledSkeleton } from '@/Common/Skeleton/styles';\n\ntype SkeletonProps = Partial<ConvertTransientProps<StyledSkeletonProps>> &\n  ComponentPropsWithoutRef<'div'>;\n\nexport const Skeleton = forwardRef(function (\n  { variant, width, height, animate = true, ...props }: SkeletonProps,\n  ref: ForwardedRef<HTMLDivElement | null>\n) {\n  return (\n    <StyledSkeleton\n      ref={ref}\n      $variant={variant}\n      $width={width}\n      $height={height}\n      $animate={animate}\n      {...props}\n    />\n  );\n});\n"],"names":["Skeleton","forwardRef","_ref","ref","variant","width","height","_ref$animate","animate","props","_objectWithoutProperties","_excluded","_jsx","StyledSkeleton","_objectSpread","$variant","$width","$height","$animate"],"mappings":";;;;;;;;;;;;;;;;AAUO,IAAMA,QAAQ,gBAAGC,gBAAU,CAAC,UAAAC,IAAA,EAEjCC,GAAwC,EACxC;AAAA,EAAA,IAFEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,KAAK,GAAAH,IAAA,CAALG,KAAK;IAAEC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IAAAC,YAAA,GAAAL,IAAA,CAAEM,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,YAAA;AAAKE,IAAAA,KAAK,GAAAC,yCAAA,CAAAR,IAAA,EAAAS,SAAA,CAAA,CAAA;AAGlD,EAAA,oBACEC,cAAA,CAACC,qBAAc,EAAAC,aAAA,CAAA;AACbX,IAAAA,GAAG,EAAEA,GAAI;AACTY,IAAAA,QAAQ,EAAEX,OAAQ;AAClBY,IAAAA,MAAM,EAAEX,KAAM;AACdY,IAAAA,OAAO,EAAEX,MAAO;AAChBY,IAAAA,QAAQ,EAAEV,OAAAA;GACNC,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CAAC;;;;"}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ConvertTransientProps } from '@remember-web/shared';
+import type { StyledSkeletonProps } from '../../Common/Skeleton/styles';
+export declare const Skeleton: import("react").ForwardRefExoticComponent<Partial<ConvertTransientProps<StyledSkeletonProps>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement | null>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Skeleton/index.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAMpE,eAAO,MAAM,QAAQ,wQAcnB,CAAC"}

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

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { forwardRef } from 'react';
+import { StyledSkeleton } from './styles.esm.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["variant", "width", "height", "animate"];
+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 Skeleton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var variant = _ref.variant,
+    width = _ref.width,
+    height = _ref.height,
+    _ref$animate = _ref.animate,
+    animate = _ref$animate === void 0 ? true : _ref$animate,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx(StyledSkeleton, _objectSpread({
+    ref: ref,
+    $variant: variant,
+    $width: width,
+    $height: height,
+    $animate: animate
+  }, props));
+});
+
+export { Skeleton };
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Skeleton/index.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\nimport type { ConvertTransientProps } from '@remember-web/shared';\n\nimport type { StyledSkeletonProps } from '@/Common/Skeleton/styles';\nimport { StyledSkeleton } from '@/Common/Skeleton/styles';\n\ntype SkeletonProps = Partial<ConvertTransientProps<StyledSkeletonProps>> &\n  ComponentPropsWithoutRef<'div'>;\n\nexport const Skeleton = forwardRef(function (\n  { variant, width, height, animate = true, ...props }: SkeletonProps,\n  ref: ForwardedRef<HTMLDivElement | null>\n) {\n  return (\n    <StyledSkeleton\n      ref={ref}\n      $variant={variant}\n      $width={width}\n      $height={height}\n      $animate={animate}\n      {...props}\n    />\n  );\n});\n"],"names":["Skeleton","forwardRef","_ref","ref","variant","width","height","_ref$animate","animate","props","_objectWithoutProperties","_excluded","_jsx","StyledSkeleton","_objectSpread","$variant","$width","$height","$animate"],"mappings":";;;;;;;;;AAUO,IAAMA,QAAQ,gBAAGC,UAAU,CAAC,UAAAC,IAAA,EAEjCC,GAAwC,EACxC;AAAA,EAAA,IAFEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IAAEC,KAAK,GAAAH,IAAA,CAALG,KAAK;IAAEC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IAAAC,YAAA,GAAAL,IAAA,CAAEM,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,YAAA;AAAKE,IAAAA,KAAK,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA,CAAA,CAAA;AAGlD,EAAA,oBACEC,GAAA,CAACC,cAAc,EAAAC,aAAA,CAAA;AACbX,IAAAA,GAAG,EAAEA,GAAI;AACTY,IAAAA,QAAQ,EAAEX,OAAQ;AAClBY,IAAAA,MAAM,EAAEX,KAAM;AACdY,IAAAA,OAAO,EAAEX,MAAO;AAChBY,IAAAA,QAAQ,EAAEV,OAAAA;GACNC,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CAAC;;;;"}

package/dist/src/Common/Skeleton/styles.cjs.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var mixin = require('@remember-web/mixin');
+var styled = require('styled-components');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+var _templateObject, _templateObject2, _templateObject3;
+var shimmerAnimation = styled.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  0% {\n    background-position: 100% 100%;\n  }\n  100% {\n    background-position: 0% 100%;\n  }\n"])));
+var skeletonShimmer = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  --from-color: rgba(255, 255, 255, 0.75);\n  --to-color: rgba(255, 255, 255, 0.55);\n\n  background: linear-gradient(\n    90deg,\n    var(--from-color) 25%,\n    var(--to-color) 37%,\n    var(--from-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: ", ";\n  animation-duration: 1.8s;\n  animation-iteration-count: infinite;\n"])), shimmerAnimation);
+var StyledSkeleton = styled__default.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  ", ";\n  background-color: ", ";\n  position: relative;\n  overflow: hidden;\n"])), function (_ref) {
+  var _ref$$width = _ref.$width,
+    $width = _ref$$width === void 0 ? '100%' : _ref$$width;
+  return typeof $width === 'number' ? "".concat($width, "px") : $width;
+}, function (_ref2) {
+  var _ref2$$height = _ref2.$height,
+    $height = _ref2$$height === void 0 ? '100%' : _ref2$$height;
+  return typeof $height === 'number' ? "".concat($height, "px") : $height;
+}, function (_ref3) {
+  var _ref3$$variant = _ref3.$variant,
+    $variant = _ref3$$variant === void 0 ? 'rounded' : _ref3$$variant;
+  return $variant === 'rounded' ? '4px' : '50%';
+}, function (_ref4) {
+  var $animate = _ref4.$animate;
+  return $animate ? skeletonShimmer : null;
+}, mixin.contents200);
+
+exports.StyledSkeleton = StyledSkeleton;
+exports.skeletonShimmer = skeletonShimmer;
+//# sourceMappingURL=styles.cjs.js.map

package/dist/src/Common/Skeleton/styles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Common/Skeleton/styles.ts"],"sourcesContent":["import { contents200 } from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nconst shimmerAnimation = keyframes`\n  0% {\n    background-position: 100% 100%;\n  }\n  100% {\n    background-position: 0% 100%;\n  }\n`;\n\nexport const skeletonShimmer = css`\n  --from-color: rgba(255, 255, 255, 0.75);\n  --to-color: rgba(255, 255, 255, 0.55);\n\n  background: linear-gradient(\n    90deg,\n    var(--from-color) 25%,\n    var(--to-color) 37%,\n    var(--from-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: ${shimmerAnimation};\n  animation-duration: 1.8s;\n  animation-iteration-count: infinite;\n`;\n\nexport interface StyledSkeletonProps {\n  $variant?: 'circle' | 'rounded';\n  $width?: number | string;\n  $height?: number | string;\n  $animate?: boolean;\n}\n\nexport const StyledSkeleton = styled.div<StyledSkeletonProps>`\n  width: ${({ $width = '100%' }) =>\n    typeof $width === 'number' ? `${$width}px` : $width};\n  height: ${({ $height = '100%' }) =>\n    typeof $height === 'number' ? `${$height}px` : $height};\n  border-radius: ${({ $variant = 'rounded' }) => ($variant === 'rounded' ? '4px': '50%')};\n  ${({ $animate }) => ($animate ? skeletonShimmer : null)};\n  background-color: ${contents200};\n  position: relative;\n  overflow: hidden;\n`;\n"],"names":["shimmerAnimation","keyframes","_templateObject","_taggedTemplateLiteral","skeletonShimmer","css","_templateObject2","StyledSkeleton","styled","div","_templateObject3","_ref","_ref$$width","$width","concat","_ref2","_ref2$$height","$height","_ref3","_ref3$$variant","$variant","_ref4","$animate","contents200"],"mappings":";;;;;;;;;;;;AAGA,IAAMA,gBAAgB,GAAGC,gBAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CAOjC,CAAA,wGAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEYC,IAAAA,eAAe,GAAGC,UAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAH,uCAAA,CAWnBH,CAAAA,2QAAAA,EAAAA,0EAAAA,CAAAA,CAAAA,CAAAA,EAAAA,gBAAgB,EAG9B;AASYO,IAAAA,cAAc,GAAGC,uBAAM,CAACC,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAP,uCAAA,CAAA,CAAA,aAAA,EAAA,eAAA,EAAA,sBAAA,EAAA,OAAA,EAAA,yBAAA,EAAA,iDAAA,CAAA,CAAA,CAAA,EAC7B,UAAAQ,IAAA,EAAA;AAAA,EAAA,IAAAC,WAAA,GAAAD,IAAA,CAAGE,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,WAAA,CAAA;EAAA,OACzB,OAAOC,MAAM,KAAK,QAAQ,MAAAC,MAAA,CAAMD,MAAM,EAAA,IAAA,CAAA,GAAOA,MAAM,CAAA;AAAA,CAAA,EAC3C,UAAAE,KAAA,EAAA;AAAA,EAAA,IAAAC,aAAA,GAAAD,KAAA,CAAGE,OAAO;AAAPA,IAAAA,OAAO,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,aAAA,CAAA;EAAA,OAC3B,OAAOC,OAAO,KAAK,QAAQ,MAAAH,MAAA,CAAMG,OAAO,EAAA,IAAA,CAAA,GAAOA,OAAO,CAAA;AAAA,CAAA,EACvC,UAAAC,KAAA,EAAA;AAAA,EAAA,IAAAC,cAAA,GAAAD,KAAA,CAAGE,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,cAAA,CAAA;AAAA,EAAA,OAAQC,QAAQ,KAAK,SAAS,GAAG,KAAK,GAAE,KAAK,CAAA;AAAA,CAAC,EACpF,UAAAC,KAAA,EAAA;AAAA,EAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ,CAAA;AAAA,EAAA,OAAQA,QAAQ,GAAGlB,eAAe,GAAG,IAAI,CAAA;AAAA,CAAC,EACnCmB,iBAAW;;;;;"}

package/dist/src/Common/Skeleton/styles.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const skeletonShimmer: import("styled-components").RuleSet<object>;
+export interface StyledSkeletonProps {
+    $variant?: 'circle' | 'rounded';
+    $width?: number | string;
+    $height?: number | string;
+    $animate?: boolean;
+}
+export declare const StyledSkeleton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSkeletonProps>>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/src/Common/Skeleton/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Common/Skeleton/styles.ts"],"names":[],"mappings":";AAYA,eAAO,MAAM,eAAe,6CAc3B,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,gOAU1B,CAAC"}

package/dist/src/Common/Skeleton/styles.esm.js

@@ -0,0 +1,26 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import { contents200 } from '@remember-web/mixin';
+import styled, { keyframes, css } from 'styled-components';
+
+var _templateObject, _templateObject2, _templateObject3;
+var shimmerAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100% 100%;\n  }\n  100% {\n    background-position: 0% 100%;\n  }\n"])));
+var skeletonShimmer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  --from-color: rgba(255, 255, 255, 0.75);\n  --to-color: rgba(255, 255, 255, 0.55);\n\n  background: linear-gradient(\n    90deg,\n    var(--from-color) 25%,\n    var(--to-color) 37%,\n    var(--from-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: ", ";\n  animation-duration: 1.8s;\n  animation-iteration-count: infinite;\n"])), shimmerAnimation);
+var StyledSkeleton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  ", ";\n  background-color: ", ";\n  position: relative;\n  overflow: hidden;\n"])), function (_ref) {
+  var _ref$$width = _ref.$width,
+    $width = _ref$$width === void 0 ? '100%' : _ref$$width;
+  return typeof $width === 'number' ? "".concat($width, "px") : $width;
+}, function (_ref2) {
+  var _ref2$$height = _ref2.$height,
+    $height = _ref2$$height === void 0 ? '100%' : _ref2$$height;
+  return typeof $height === 'number' ? "".concat($height, "px") : $height;
+}, function (_ref3) {
+  var _ref3$$variant = _ref3.$variant,
+    $variant = _ref3$$variant === void 0 ? 'rounded' : _ref3$$variant;
+  return $variant === 'rounded' ? '4px' : '50%';
+}, function (_ref4) {
+  var $animate = _ref4.$animate;
+  return $animate ? skeletonShimmer : null;
+}, contents200);
+
+export { StyledSkeleton, skeletonShimmer };
+//# sourceMappingURL=styles.esm.js.map

package/dist/src/Common/Skeleton/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/Common/Skeleton/styles.ts"],"sourcesContent":["import { contents200 } from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nconst shimmerAnimation = keyframes`\n  0% {\n    background-position: 100% 100%;\n  }\n  100% {\n    background-position: 0% 100%;\n  }\n`;\n\nexport const skeletonShimmer = css`\n  --from-color: rgba(255, 255, 255, 0.75);\n  --to-color: rgba(255, 255, 255, 0.55);\n\n  background: linear-gradient(\n    90deg,\n    var(--from-color) 25%,\n    var(--to-color) 37%,\n    var(--from-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: ${shimmerAnimation};\n  animation-duration: 1.8s;\n  animation-iteration-count: infinite;\n`;\n\nexport interface StyledSkeletonProps {\n  $variant?: 'circle' | 'rounded';\n  $width?: number | string;\n  $height?: number | string;\n  $animate?: boolean;\n}\n\nexport const StyledSkeleton = styled.div<StyledSkeletonProps>`\n  width: ${({ $width = '100%' }) =>\n    typeof $width === 'number' ? `${$width}px` : $width};\n  height: ${({ $height = '100%' }) =>\n    typeof $height === 'number' ? `${$height}px` : $height};\n  border-radius: ${({ $variant = 'rounded' }) => ($variant === 'rounded' ? '4px': '50%')};\n  ${({ $animate }) => ($animate ? skeletonShimmer : null)};\n  background-color: ${contents200};\n  position: relative;\n  overflow: hidden;\n`;\n"],"names":["shimmerAnimation","keyframes","_templateObject","_taggedTemplateLiteral","skeletonShimmer","css","_templateObject2","StyledSkeleton","styled","div","_templateObject3","_ref","_ref$$width","$width","concat","_ref2","_ref2$$height","$height","_ref3","_ref3$$variant","$variant","_ref4","$animate","contents200"],"mappings":";;;;;AAGA,IAAMA,gBAAgB,GAAGC,SAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAOjC,CAAA,wGAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEYC,IAAAA,eAAe,GAAGC,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAH,sBAAA,CAWnBH,CAAAA,2QAAAA,EAAAA,0EAAAA,CAAAA,CAAAA,CAAAA,EAAAA,gBAAgB,EAG9B;AASYO,IAAAA,cAAc,GAAGC,MAAM,CAACC,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAP,sBAAA,CAAA,CAAA,aAAA,EAAA,eAAA,EAAA,sBAAA,EAAA,OAAA,EAAA,yBAAA,EAAA,iDAAA,CAAA,CAAA,CAAA,EAC7B,UAAAQ,IAAA,EAAA;AAAA,EAAA,IAAAC,WAAA,GAAAD,IAAA,CAAGE,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,WAAA,CAAA;EAAA,OACzB,OAAOC,MAAM,KAAK,QAAQ,MAAAC,MAAA,CAAMD,MAAM,EAAA,IAAA,CAAA,GAAOA,MAAM,CAAA;AAAA,CAAA,EAC3C,UAAAE,KAAA,EAAA;AAAA,EAAA,IAAAC,aAAA,GAAAD,KAAA,CAAGE,OAAO;AAAPA,IAAAA,OAAO,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,aAAA,CAAA;EAAA,OAC3B,OAAOC,OAAO,KAAK,QAAQ,MAAAH,MAAA,CAAMG,OAAO,EAAA,IAAA,CAAA,GAAOA,OAAO,CAAA;AAAA,CAAA,EACvC,UAAAC,KAAA,EAAA;AAAA,EAAA,IAAAC,cAAA,GAAAD,KAAA,CAAGE,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,cAAA,CAAA;AAAA,EAAA,OAAQC,QAAQ,KAAK,SAAS,GAAG,KAAK,GAAE,KAAK,CAAA;AAAA,CAAC,EACpF,UAAAC,KAAA,EAAA;AAAA,EAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ,CAAA;AAAA,EAAA,OAAQA,QAAQ,GAAGlB,eAAe,GAAG,IAAI,CAAA;AAAA,CAAC,EACnCmB,WAAW;;;;"}

package/dist/src/Common/Spinner/styles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Common/Spinner/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { SpinnerStyleProps } from './types';\n\nconst RotateAnimation = keyframes`\n  to { transform: rotate(360deg); };\n`;\n\nexport const Container = styled.div<SpinnerStyleProps>(\n  ({ $color, layout }) => css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: fit-content;\n    height: fit-content;\n    ${layout === 'full' &&\n    css`\n      width: 100%;\n      height: 100%;\n    `}\n\n    ${$color && `color: ${$color};`};\n\n    & > svg {\n      animation: ${RotateAnimation} 1.5s linear infinite;\n    }\n  `\n);\n"],"names":[],"mappings":";;;;;;;;;;;AAAa;AAMb;AAIO;AACL;;AAAiB;AAee;;"}
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Common/Spinner/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { SpinnerStyleProps } from './types';\n\nconst RotateAnimation = keyframes`\n  to { transform: rotate(360deg); };\n`;\n\nexport const Container = styled.div<SpinnerStyleProps>(\n  ({ $color, layout }) => css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: fit-content;\n    height: fit-content;\n    ${\n      layout === 'full' &&\n      css`\n      width: 100%;\n      height: 100%;\n    `\n    }\n\n    ${$color && `color: ${$color};`};\n\n    & > svg {\n      animation: ${RotateAnimation} 1.5s linear infinite;\n    }\n  `\n);\n"],"names":[],"mappings":";;;;;;;;;;;AAAa;AAMb;AAIO;AACL;;AAAiB;AAiBe;;"}

package/dist/src/Common/Spinner/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Common/Spinner/styles.ts"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAMjD,eAAO,MAAM,SAAS,8NAmBrB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Common/Spinner/styles.ts"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAMjD,eAAO,MAAM,SAAS,8NAqBrB,CAAC"}

package/dist/src/Common/Spinner/styles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.esm.js","sources":["../../../../src/Common/Spinner/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { SpinnerStyleProps } from './types';\n\nconst RotateAnimation = keyframes`\n  to { transform: rotate(360deg); };\n`;\n\nexport const Container = styled.div<SpinnerStyleProps>(\n  ({ $color, layout }) => css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: fit-content;\n    height: fit-content;\n    ${layout === 'full' &&\n    css`\n      width: 100%;\n      height: 100%;\n    `}\n\n    ${$color && `color: ${$color};`};\n\n    & > svg {\n      animation: ${RotateAnimation} 1.5s linear infinite;\n    }\n  `\n);\n"],"names":[],"mappings":";;;;AAAa;AAMb;AAIO;AACL;;AAAiB;AAee;;"}
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/Common/Spinner/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { SpinnerStyleProps } from './types';\n\nconst RotateAnimation = keyframes`\n  to { transform: rotate(360deg); };\n`;\n\nexport const Container = styled.div<SpinnerStyleProps>(\n  ({ $color, layout }) => css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: fit-content;\n    height: fit-content;\n    ${\n      layout === 'full' &&\n      css`\n      width: 100%;\n      height: 100%;\n    `\n    }\n\n    ${$color && `color: ${$color};`};\n\n    & > svg {\n      animation: ${RotateAnimation} 1.5s linear infinite;\n    }\n  `\n);\n"],"names":[],"mappings":";;;;AAAa;AAMb;AAIO;AACL;;AAAiB;AAiBe;;"}

package/dist/src/Common/Spinner/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { ConvertTransientProps } from '@remember-web/shared';
 import type { ColorVariable } from '@remember-web/mixin';
+import type { ConvertTransientProps } from '@remember-web/shared';
 export type SpinnerLayout = 'full' | 'block';
 export type SpinnerSize = 'small' | 'medium' | 'large' | number;
 export interface SpinnerStyleProps {

package/dist/src/Common/Spinner/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Common/Spinner/types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhE,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAChC,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,YAAa,SAAQ,qBAAqB,CAAC,iBAAiB,CAAC;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Common/Spinner/types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhE,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAChC,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,YAAa,SAAQ,qBAAqB,CAAC,iBAAiB,CAAC;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB"}

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;
+exports.Typography = 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\nexport const Typography = forwardRef(\n  (\n    { variant, color, children, ellipsis, maxWidth, ...props }: TypographyProps,\n    ref: ForwardedRef<HTMLDivElement | null>\n  ) => (\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"],"names":["props","ref","$variant","$color","$ellipsis","$maxWidth","children"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAcN;AAGqC;;;;;AADWA;AAAK;AAItDC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AACQ;;"}

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 { TypographyStyle } from '@remember-web/mixin';
+import type { CSSProperties, ComponentProps, ReactNode } from 'react';
+import type { PolymorphicComponent } from 'styled-components';
+export 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 {};
 //# 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,KAAK,EAAE,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,eAAO,MAAM,UAAU,8CAgB0B,CAAC;AAElD,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"}

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 };
 //# 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\nexport const Typography = forwardRef(\n  (\n    { variant, color, children, ellipsis, maxWidth, ...props }: TypographyProps,\n    ref: ForwardedRef<HTMLDivElement | null>\n  ) => (\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"],"names":["props","ref","$variant","$color","$ellipsis","$maxWidth","children"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAcN;AAGqC;;;;;AADWA;AAAK;AAItDC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AACQ;;"}

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

@@ -2,8 +2,8 @@
 'use strict';
 
 var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
+var styled = require('styled-components');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

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

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\nimport {\n  ellipsis,\n  getTypographyStyles,\n  type TypographyStyle,\n} from '@remember-web/mixin';\n\nexport const StyledTypography = styled.div<{\n  $variant: TypographyStyle;\n  $color?: string;\n  $ellipsis?: number;\n  $maxWidth?: CSSProperties['maxWidth'];\n}>`\n  ${({ $color, $variant, $ellipsis, $maxWidth }) => [\n    getTypographyStyles($variant),\n    $ellipsis && ellipsis($ellipsis),\n    css({ color: $color, maxWidth: $maxWidth }),\n  ]};\n`;\n"],"names":["StyledTypography","color","maxWidth"],"mappings":";;;;;;;;;;;;AAAa;AAUAA;AAMT;;;;AAAyC;AAGnCC;AAAeC;AAAoB;AAC1C;;"}
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n  type TypographyStyle,\n  ellipsis,\n  getTypographyStyles,\n} from '@remember-web/mixin';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const StyledTypography = styled.div<{\n  $variant: TypographyStyle;\n  $color?: string;\n  $ellipsis?: number;\n  $maxWidth?: CSSProperties['maxWidth'];\n}>`\n  ${({ $color, $variant, $ellipsis, $maxWidth }) => [\n    getTypographyStyles($variant),\n    $ellipsis && ellipsis($ellipsis),\n    css({ color: $color, maxWidth: $maxWidth }),\n  ]};\n`;\n"],"names":["StyledTypography","color","maxWidth"],"mappings":";;;;;;;;;;;;AAAa;AAUAA;AAMT;;;;AAAyC;AAGnCC;AAAeC;AAAoB;AAC1C;;"}