@remember-web/primitive 0.0.0-alpha.1 → 0.0.0-alpha.10

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

@@ -1,15 +1,16 @@
 "use client";
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["as", "width", "height", "direction", "gap", "align", "justify", "wrap"];
-var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var StyledFlex = styled.div(function (_ref) {
+var StyledFlex = styled.div.withConfig({
+  displayName: "Flex__StyledFlex",
+  componentId: "sc-1m493gs-0"
+})(function (_ref) {
   var _ref$$align = _ref.$align,
     $align = _ref$$align === void 0 ? 'center' : _ref$$align,
     _ref$$direction = _ref.$direction,
@@ -24,7 +25,7 @@ var StyledFlex = styled.div(function (_ref) {
     $width = _ref$$width === void 0 ? 'auto' : _ref$$width,
     _ref$$height = _ref.$height,
     $height = _ref$$height === void 0 ? 'auto' : _ref$$height;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    display: flex;\n    width: ", ";\n    height: ", ";\n\n    gap: ", ";\n    align-items: ", ";\n    justify-content: ", ";\n    flex-direction: ", ";\n    flex-wrap: ", ";\n  "])), typeof $width === 'number' ? "".concat($width, "px") : $width, typeof $height === 'number' ? "".concat($height, "px") : $height, typeof $gap === 'number' ? "".concat($gap, "px") : $gap, $align, $justify, $direction, $wrap);
+  return css(["box-sizing:border-box;display:flex;width:", ";height:", ";gap:", ";align-items:", ";justify-content:", ";flex-direction:", ";flex-wrap:", ";"], typeof $width === 'number' ? "".concat($width, "px") : $width, typeof $height === 'number' ? "".concat($height, "px") : $height, typeof $gap === 'number' ? "".concat($gap, "px") : $gap, $align, $justify, $direction, $wrap);
 });
 
 /**
@@ -59,4 +60,4 @@ var Flex = function Flex(_ref2) {
 };
 
 export { Flex };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

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

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

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

@@ -2,20 +2,20 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var StyledGrid = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  box-sizing: border-box;\n  display: grid;\n  width: ", ";\n  height: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  grid-auto-flow: ", ";\n  grid-template-columns: ", ";\n  gap: ", ";\n  column-gap: ", ";\n  row-gap: ", ";\n"])), function (_ref) {
+var StyledGrid = styled__default.default.div.withConfig({
+  displayName: "Grid__StyledGrid",
+  componentId: "sc-1wy0ax8-0"
+})(["box-sizing:border-box;display:grid;width:", ";height:", ";align-items:", ";justify-content:", ";grid-auto-flow:", ";grid-template-columns:", ";gap:", ";column-gap:", ";row-gap:", ";"], function (_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100%' : _ref$width;
   return width;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","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;AAiBb;;;AAA6B;AAGlB;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;;"}

package/dist/primitive/src/Common/Grid/{index.js → index.mjs}

@@ -1,13 +1,14 @@
 "use client";
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var StyledGrid = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: grid;\n  width: ", ";\n  height: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  grid-auto-flow: ", ";\n  grid-template-columns: ", ";\n  gap: ", ";\n  column-gap: ", ";\n  row-gap: ", ";\n"])), function (_ref) {
+var StyledGrid = styled.div.withConfig({
+  displayName: "Grid__StyledGrid",
+  componentId: "sc-1wy0ax8-0"
+})(["box-sizing:border-box;display:grid;width:", ";height:", ";align-items:", ";justify-content:", ";grid-auto-flow:", ";grid-template-columns:", ";gap:", ";column-gap:", ";row-gap:", ";"], function (_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100%' : _ref$width;
   return width;
@@ -61,4 +62,4 @@ var Grid = function Grid(props) {
 };
 
 export { Grid };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/primitive/src/Common/Grid/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","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;AAiBb;;;AAA6B;AAGlB;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;;"}

package/dist/primitive/src/Common/Spinner/{index.js → index.mjs}

@@ -1,6 +1,6 @@
 "use client";
 import { IconSpinner } from '@remember-web/icon';
-import { Container } from './styles.js';
+import { Container } from './styles.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 var Spinner = function Spinner(_ref) {
@@ -21,4 +21,4 @@ var Spinner = function Spinner(_ref) {
 };
 
 export { Spinner };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/primitive/src/Common/Spinner/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../src/Common/Spinner/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconSpinner } from '@remember-web/icon';\n\nimport { Container } from './styles';\nimport type { SpinnerProps } from './types';\n\nexport const Spinner = ({\n  size = 'small',\n  className,\n  color,\n  layout = 'block',\n}: SpinnerProps) => (\n  <Container className={className} $color={color} layout={layout}>\n    <IconSpinner size={size} />\n  </Container>\n);\n"],"names":["size","layout","className","$color"],"mappings":";;;;;;AAOoB;AAClBA;;;;AAGAC;;AAEWC;AAAsBC;AAAeF;;AACjCD;;AAAc;AACjB;;"}

package/dist/primitive/src/Common/Spinner/styles.cjs

@@ -1,20 +1,20 @@
 "use client";
 'use strict';
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 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 RotateAnimation = styled.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  to { transform: rotate(360deg); };\n"])));
-var Container = styled__default.default.div(function (_ref) {
+var RotateAnimation = styled.keyframes(["to{transform:rotate(360deg);};"]);
+var Container = styled__default.default.div.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-99hyc5-0"
+})(function (_ref) {
   var $color = _ref.$color,
     layout = _ref.layout;
-  return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: fit-content;\n    height: fit-content;\n    ", "\n\n    ", ";\n\n    & > svg {\n      animation: ", " 1.5s linear infinite;\n    }\n  "])), layout === 'full' && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n      width: 100%;\n      height: 100%;\n    "]))), $color && "color: ".concat($color, ";"), RotateAnimation);
+  return styled.css(["display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;", " ", ";& > svg{animation:", " 1.5s linear infinite;}"], layout === 'full' && styled.css(["width:100%;height:100%;"]), $color && "color: ".concat($color, ";"), RotateAnimation);
 });
 
 exports.Container = Container;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","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","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":";;;;;;;;;AAMA;;;;AAImC;AACjC;;AAAiB;AAee;;"}

package/dist/primitive/src/Common/Spinner/styles.mjs

@@ -0,0 +1,15 @@
+"use client";
+import styled, { keyframes, css } from 'styled-components';
+
+var RotateAnimation = keyframes(["to{transform:rotate(360deg);};"]);
+var Container = styled.div.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-99hyc5-0"
+})(function (_ref) {
+  var $color = _ref.$color,
+    layout = _ref.layout;
+  return css(["display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;", " ", ";& > svg{animation:", " 1.5s linear infinite;}"], layout === 'full' && css(["width:100%;height:100%;"]), $color && "color: ".concat($color, ";"), RotateAnimation);
+});
+
+export { Container };
+//# sourceMappingURL=styles.mjs.map

package/dist/primitive/src/Common/Spinner/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","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":";;;AAMA;;;;AAImC;AACjC;;AAAiB;AAee;;"}

package/dist/primitive/src/Common/Typography/{index.js → index.mjs}

@@ -2,7 +2,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
-import { StyledTypography } from './styles.js';
+import { StyledTypography } from './styles.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["variant", "as", "color", "children", "ellipsis", "maxWidth"];
@@ -30,4 +30,4 @@ var Typography = function Typography(_ref, ref) {
 var Typography$1 = /*#__PURE__*/forwardRef(Typography);
 
 export { Typography$1 as default };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/primitive/src/Common/Typography/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","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';\n\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;AAgBb;AAUsC;;;;;;AAF/BA;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AACQ;AAgBrB;;"}

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

@@ -1,17 +1,17 @@
 "use client";
 'use strict';
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _templateObject;
-var StyledTypography = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  ", ";\n"])), function (_ref) {
+var StyledTypography = styled__default.default.div.withConfig({
+  displayName: "styles__StyledTypography",
+  componentId: "sc-u5s35b-0"
+})(["", ";"], function (_ref) {
   var $color = _ref.$color,
     $variant = _ref.$variant,
     $ellipsis = _ref.$ellipsis,

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

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","sources":["../../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\n\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;AAWAA;AAMT;;;;AAAyC;AAGnCC;AAAeC;AAAoB;AAC1C;;"}
+{"version":3,"file":"styles.cjs","sources":["../../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\n\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":["color","maxWidth"],"mappings":";;;;;;;;;;;;;AAW0C;AAMtC;;;;AAAyC;AAGnCA;AAAeC;AAAoB;AAC1C;;"}

package/dist/primitive/src/Common/Typography/{styles.js → styles.mjs}

@@ -1,10 +1,11 @@
 "use client";
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import styled, { css } from 'styled-components';
 import { getTypographyStyles, ellipsis } from '@remember-web/mixin';
 
-var _templateObject;
-var StyledTypography = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
+var StyledTypography = styled.div.withConfig({
+  displayName: "styles__StyledTypography",
+  componentId: "sc-u5s35b-0"
+})(["", ";"], function (_ref) {
   var $color = _ref.$color,
     $variant = _ref.$variant,
     $ellipsis = _ref.$ellipsis,
@@ -16,4 +17,4 @@ var StyledTypography = styled.div(_templateObject || (_templateObject = _taggedT
 });
 
 export { StyledTypography };
-//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=styles.mjs.map

package/dist/primitive/src/Common/Typography/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","sources":["../../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\n\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":["color","maxWidth"],"mappings":";;;;;;;AAW0C;AAMtC;;;;AAAyC;AAGnCA;AAAeC;AAAoB;AAC1C;;"}

package/dist/primitive/src/Control/BaseToggle/ToggleIcon/{index.js → index.mjs}

@@ -39,4 +39,4 @@ function ToggleIcon(_ref) {
 }
 
 export { ToggleIcon };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/primitive/src/Control/BaseToggle/ToggleIcon/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ControlBookmarkOff,\n  ControlBookmarkOn,\n  ControlCheckOff,\n  ControlCheckOn,\n  ControlCheckboxOff,\n  ControlCheckboxOn,\n  ControlFavoriteOff,\n  ControlFavoriteOn,\n  ControlRadioOff,\n  ControlRadioOn,\n} from '@remember-web/icon';\n\nimport {\n  SVG_SIZES,\n  isSvgRegularSize,\n  type SvgSizeProps,\n  type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n  check: { on: ControlCheckOn, off: ControlCheckOff },\n  checkbox: { on: ControlCheckboxOn, off: ControlCheckboxOff },\n  favorite: { on: ControlFavoriteOn, off: ControlFavoriteOff },\n  bookmark: { on: ControlBookmarkOn, off: ControlBookmarkOff },\n  radio: { on: ControlRadioOn, off: ControlRadioOff },\n} as const satisfies Record<\n  ToggleVariantType,\n  Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n  size,\n  status,\n  variant,\n  className,\n}: {\n  variant: ToggleVariantType;\n  status: ToggleStatusType;\n  className?: string;\n} & SvgSizeProps) {\n  const iconSize =\n    typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n  const Icon = ICON_NAME[variant][status];\n\n  return <Icon className={className} size={iconSize} />;\n}\n"],"names":["check","on","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;AAwBA;AACEA;AAASC;AAAoBC;;AAC7BC;AAAYF;AAAuBC;;AACnCE;AAAYH;AAAuBC;;AACnCG;AAAYJ;AAAuBC;;AACnCI;AAASL;AAAoBC;AAAqB;AACpD;AAKO;AASW;;;;AAChB;;;AAIaK;AAAsBC;AAAe;AACpD;;"}

package/dist/primitive/src/Control/BaseToggle/{index.js → index.mjs}

@@ -2,15 +2,15 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
-import '../../Common/Divider/index.js';
-import '../../Common/Flex/index.js';
-import '../../Common/Grid/index.js';
+import '../../Common/Divider/index.mjs';
+import '../../Common/Flex/index.mjs';
+import '../../Common/Grid/index.mjs';
 import '@remember-web/icon';
-import '../../Common/Spinner/styles.js';
+import '../../Common/Spinner/styles.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import Typography from '../../Common/Typography/index.js';
-import { ToggleIcon } from './ToggleIcon/index.js';
-import { ToggleRoot, ToggleInput } from './styles.js';
+import Typography from '../../Common/Typography/index.mjs';
+import { ToggleIcon } from './ToggleIcon/index.mjs';
+import { ToggleRoot, ToggleInput } from './styles.mjs';
 
 var _excluded = ["variant", "label", "labelPosition", "className", "inputClassName", "size", "labelGap", "type", "onToggle", "onChange"];
 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; }
@@ -64,4 +64,4 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
 var BaseToggle = /*#__PURE__*/forwardRef(_BaseToggle);
 
 export { BaseToggle };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/primitive/src/Control/BaseToggle/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n  HTMLInputElement,\n  BaseToggleProps\n> = (\n  {\n    variant,\n    label: _label,\n    labelPosition = 'right',\n    className,\n    inputClassName,\n    size = 'medium',\n    labelGap = size === 'small' ? 2 : 4,\n    type = 'checkbox',\n    onToggle,\n    onChange,\n    ...props\n  },\n  ref\n) => {\n  const isStringLabel = typeof _label === 'string';\n  const label = isStringLabel ? (\n    <Typography variant=\"Body1\">{_label}</Typography>\n  ) : (\n    _label\n  );\n\n  return (\n    <ToggleRoot className={className} $gap={labelGap}>\n      <ToggleInput\n        ref={ref}\n        className={inputClassName}\n        type={type}\n        {...props}\n        onChange={(e) => {\n          onChange?.(e);\n          onToggle?.(e.target.checked);\n        }}\n      />\n      {labelPosition === 'left' && label}\n      <ToggleIcon\n        className=\"onIcon\"\n        size={size}\n        status=\"on\"\n        variant={variant}\n      />\n      <ToggleIcon\n        className=\"offIcon\"\n        size={size}\n        status=\"off\"\n        variant={variant}\n      />\n      {labelPosition === 'right' && label}\n    </ToggleRoot>\n  );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAkBK;;;AAXDA;;;;AAGAC;;;;AAEAC;;;AAGGC;AAIL;AACA;AACcC;AAAeC;;;AAMfC;AAAsBC;AAAeF;AAE7CG;AACAF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}

package/dist/primitive/src/Control/BaseToggle/styles.cjs

@@ -1,21 +1,24 @@
 "use client";
 'use strict';
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _templateObject, _templateObject2;
-var ToggleRoot = styled__default.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ", "\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  :has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n"])), function (_ref) {
+var ToggleRoot = styled__default.default.label.withConfig({
+  displayName: "styles__ToggleRoot",
+  componentId: "sc-28au7z-0"
+})(["width:fit-content;height:fit-content;display:flex;", " cursor:pointer;user-select:none;align-items:center;& > svg{transition:filter 0.2s ease-in-out;flex-shrink:0;}:has(input:disabled){cursor:default;}@media (hover:hover){&:hover > svg{filter:grayscale(0.05) brightness(0.95);}}"], function (_ref) {
   var $gap = _ref.$gap;
   return $gap && "gap: ".concat($gap, "px;");
 });
-var ToggleInput = styled__default.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ", ";\n    outline-offset: -1px;\n  }\n"])), mixin.primary100);
+var ToggleInput = styled__default.default.input.withConfig({
+  displayName: "styles__ToggleInput",
+  componentId: "sc-28au7z-1"
+})(["all:unset;position:absolute;width:1px;height:0px;margin-left:-1px;&:checked ~ svg.offIcon{display:none;}&:not(:checked) ~ svg.onIcon{display:none;}&:disabled ~ svg{filter:grayscale(1) brightness(1.1);}&:not(:disabled):active ~ svg{filter:grayscale(0.1) brightness(0.9);}&:focus-visible ~ svg{outline:solid 2px ", ";outline-offset:-1px;}"], mixin.primary100);
 
 exports.ToggleInput = ToggleInput;
 exports.ToggleRoot = ToggleRoot;

package/dist/primitive/src/Control/BaseToggle/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","sources":["../../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  :has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n`;\n\nexport const ToggleInput = styled.input`\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ${primary100};\n    outline-offset: -1px;\n  }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;;;;;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;;"}
+{"version":3,"file":"styles.cjs","sources":["../../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  :has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n`;\n\nexport const ToggleInput = styled.input`\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ${primary100};\n    outline-offset: -1px;\n  }\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAKsC;AAIlC;AAAO;AAAgC;;;;AAsBJ;;;"}

package/dist/primitive/src/Control/BaseToggle/styles.mjs

@@ -0,0 +1,18 @@
+"use client";
+import styled from 'styled-components';
+import { primary100 } from '@remember-web/mixin';
+
+var ToggleRoot = styled.label.withConfig({
+  displayName: "styles__ToggleRoot",
+  componentId: "sc-28au7z-0"
+})(["width:fit-content;height:fit-content;display:flex;", " cursor:pointer;user-select:none;align-items:center;& > svg{transition:filter 0.2s ease-in-out;flex-shrink:0;}:has(input:disabled){cursor:default;}@media (hover:hover){&:hover > svg{filter:grayscale(0.05) brightness(0.95);}}"], function (_ref) {
+  var $gap = _ref.$gap;
+  return $gap && "gap: ".concat($gap, "px;");
+});
+var ToggleInput = styled.input.withConfig({
+  displayName: "styles__ToggleInput",
+  componentId: "sc-28au7z-1"
+})(["all:unset;position:absolute;width:1px;height:0px;margin-left:-1px;&:checked ~ svg.offIcon{display:none;}&:not(:checked) ~ svg.onIcon{display:none;}&:disabled ~ svg{filter:grayscale(1) brightness(1.1);}&:not(:disabled):active ~ svg{filter:grayscale(0.1) brightness(0.9);}&:focus-visible ~ svg{outline:solid 2px ", ";outline-offset:-1px;}"], primary100);
+
+export { ToggleInput, ToggleRoot };
+//# sourceMappingURL=styles.mjs.map

package/dist/primitive/src/Control/BaseToggle/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","sources":["../../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  :has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n`;\n\nexport const ToggleInput = styled.input`\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ${primary100};\n    outline-offset: -1px;\n  }\n`;\n"],"names":[],"mappings":";;;;;;;AAKsC;AAIlC;AAAO;AAAgC;;;;AAsBJ;;"}

package/dist/primitive/src/Control/{Checkbox.js → Checkbox.mjs}

@@ -2,7 +2,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
-import { CircleBaseToggle } from './Toggle.js';
+import { CircleBaseToggle } from './Toggle.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["variant"];
@@ -20,4 +20,4 @@ var _Checkbox = function _Checkbox(_ref, ref) {
 var Checkbox = /*#__PURE__*/forwardRef(_Checkbox);
 
 export { Checkbox, _Checkbox };
-//# sourceMappingURL=Checkbox.js.map
+//# sourceMappingURL=Checkbox.mjs.map

package/dist/primitive/src/Control/Checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.mjs","sources":["../../../../src/Control/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nexport const _Checkbox: ForwardRefRenderFunction<\n  HTMLInputElement,\n  Omit<BaseToggleProps, 'variant' | 'type'> & {\n    variant?: 'checkbox' | 'check';\n  }\n> = ({ variant = 'checkbox', ...props }, ref) => (\n  <CircleBaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Checkbox = forwardRef(_Checkbox);\n"],"names":["variant","props","ref"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAON;AAKqC;AAArCA;AAAyBC;AAAK;AACjBC;AAAUF;;AAA+B;;;"}

package/dist/primitive/src/Control/{Radio.js → Radio.mjs}

@@ -3,7 +3,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import _extends from '@babel/runtime/helpers/extends';
 import { forwardRef } from 'react';
-import { CircleBaseToggle } from './Toggle.js';
+import { CircleBaseToggle } from './Toggle.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 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; }
@@ -19,4 +19,4 @@ var _Radio = function _Radio(_ref, ref) {
 var Radio = /*#__PURE__*/forwardRef(_Radio);
 
 export { Radio };
-//# sourceMappingURL=Radio.js.map
+//# sourceMappingURL=Radio.mjs.map

package/dist/primitive/src/Control/Radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.mjs","sources":["../../../../src/Control/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nconst _Radio: ForwardRefRenderFunction<\n  HTMLInputElement,\n  Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type'>\n> = ({ ...props }, ref) => (\n  <CircleBaseToggle ref={ref} variant=\"radio\" type=\"radio\" {...props} />\n);\n\nexport const Radio = forwardRef(_Radio);\n"],"names":["ref","variant","type"],"mappings":";;;;;;;;AAAa;AAAA;AAOb;;AAGe;AACKA;AAAUC;AAAgBC;;AAA0B;;;"}

package/dist/primitive/src/Control/Switch/{index.js → index.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Label, SwitchRoot, SwitchThumb } from './styles.js';
+import { Label, SwitchRoot, SwitchThumb } from './styles.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["size"];
@@ -24,4 +24,4 @@ function Switch(_ref) {
 }
 
 export { Switch };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/primitive/src/Control/Switch/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../src/Control/Switch/index.tsx"],"sourcesContent":["'use client';\n\nimport { SwitchRoot, SwitchThumb, Label } from './styles';\nimport type { SwitchProps } from './types';\n\nexport function Switch({ size = 'small', ...props }: SwitchProps) {\n  return (\n    <Label>\n      <SwitchRoot size={size} {...props}>\n        <SwitchThumb size={size} aria-hidden=\"true\" />\n      </SwitchRoot>\n    </Label>\n  );\n}\n"],"names":["size","props","children"],"mappings":";;;;;;AAAa;AAAA;AAAA;AAKN;AAA2D;AAAzCA;AAAmBC;;AAElCC;AACQF;AAAW;;AACRA;;;;AACF;AAGnB;;"}

package/dist/primitive/src/Control/Switch/styles.cjs

@@ -1,7 +1,6 @@
 "use client";
 'use strict';
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
@@ -26,19 +25,26 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-var Label = styled__default.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n"])));
-var SwitchRoot = styled__default.default(SwitchPrimitive__namespace.Root)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  background-color: ", ";\n  border-radius: 24px;\n  position: relative;\n  cursor: pointer;\n\n  &:focus-visible {\n    outline: solid 2px black;\n    outline-offset: 2px;\n  }\n  &[data-state='checked'] {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), mixin.contents300, mixin.secondary100, function (_ref) {
+var Label = styled__default.default.label.withConfig({
+  displayName: "styles__Label",
+  componentId: "sc-1vvtj2e-0"
+})(["display:inline-flex;align-items:center;gap:8px;"]);
+var SwitchRoot = styled__default.default(SwitchPrimitive__namespace.Root).withConfig({
+  displayName: "styles__SwitchRoot",
+  componentId: "sc-1vvtj2e-1"
+})(["all:unset;background-color:", ";border-radius:24px;position:relative;cursor:pointer;&:focus-visible{outline:solid 2px black;outline-offset:2px;}&[data-state='checked']{background-color:", ";}", ";"], mixin.contents300, mixin.secondary100, function (_ref) {
   var size = _ref.size;
-  return size === 'small' && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n        width: 36px;\n        height: 20px;\n      "]))) || size === 'large' && styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n        width: 64px;\n        height: 38px;\n      "])));
+  return size === 'small' && styled.css(["width:36px;height:20px;"]) || size === 'large' && styled.css(["width:64px;height:38px;"]);
 });
-var SwitchThumb = styled__default.default(SwitchPrimitive__namespace.Thumb)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n  display: block;\n  background-color: ", ";\n  border-radius: 50%;\n  transition: transform 0.2s cubic-bezier(0, 0.6, 0, 0.99);\n  will-change: transform;\n\n  ", ";\n"])), mixin.contents999, function (_ref2) {
+var SwitchThumb = styled__default.default(SwitchPrimitive__namespace.Thumb).withConfig({
+  displayName: "styles__SwitchThumb",
+  componentId: "sc-1vvtj2e-2"
+})(["display:block;background-color:", ";border-radius:50%;transition:transform 0.2s cubic-bezier(0,0.6,0,0.99);will-change:transform;", ";"], mixin.contents999, function (_ref2) {
   var size = _ref2.size;
-  return size === 'small' && styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n        width: 14px;\n        height: 14px;\n        transform: translateX(3px);\n        &[data-state='checked'] {\n          transform: translateX(19px);\n        }\n      "]))) || size === 'large' && styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n        width: 28px;\n        height: 28px;\n        transform: translateX(5px);\n        &[data-state='checked'] {\n          transform: translateX(31px);\n        }\n      "])));
+  return size === 'small' && styled.css(["width:14px;height:14px;transform:translateX(3px);&[data-state='checked']{transform:translateX(19px);}"]) || size === 'large' && styled.css(["width:28px;height:28px;transform:translateX(5px);&[data-state='checked']{transform:translateX(31px);}"]);
 });
 
 exports.Label = Label;

package/dist/primitive/src/Control/Switch/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","sources":["../../../../../src/Control/Switch/styles.ts"],"sourcesContent":["'use client';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport styled, { css } from 'styled-components';\n\nimport { contents300, contents999, secondary100 } from '@remember-web/mixin';\n\nimport type { SwitchProps } from './types';\n\nexport const Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n`;\n\nexport const SwitchRoot = styled(SwitchPrimitive.Root)<{\n  size: SwitchProps['size'];\n}>`\n  all: unset;\n  background-color: ${contents300};\n  border-radius: 24px;\n  position: relative;\n  cursor: pointer;\n\n  &:focus-visible {\n    outline: solid 2px black;\n    outline-offset: 2px;\n  }\n  &[data-state='checked'] {\n    background-color: ${secondary100};\n  }\n\n  ${({ size }) =>\n    (size === 'small' &&\n      css`\n        width: 36px;\n        height: 20px;\n      `) ||\n    (size === 'large' &&\n      css`\n        width: 64px;\n        height: 38px;\n      `)};\n`;\n\nexport const SwitchThumb = styled(SwitchPrimitive.Thumb)<{\n  size: SwitchProps['size'];\n}>`\n  display: block;\n  background-color: ${contents999};\n  border-radius: 50%;\n  transition: transform 0.2s cubic-bezier(0, 0.6, 0, 0.99);\n  will-change: transform;\n\n  ${({ size }) =>\n    (size === 'small' &&\n      css`\n        width: 14px;\n        height: 14px;\n        transform: translateX(3px);\n        &[data-state='checked'] {\n          transform: translateX(19px);\n        }\n      `) ||\n    (size === 'large' &&\n      css`\n        width: 28px;\n        height: 28px;\n        transform: translateX(5px);\n        &[data-state='checked'] {\n          transform: translateX(31px);\n        }\n      `)};\n`;\n"],"names":["Label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AASAA;AAMN;AAiBH;;AAUI;;AAYJ;;AAkBI;;;;"}
+{"version":3,"file":"styles.cjs","sources":["../../../../../src/Control/Switch/styles.ts"],"sourcesContent":["'use client';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport styled, { css } from 'styled-components';\n\nimport { contents300, contents999, secondary100 } from '@remember-web/mixin';\n\nimport type { SwitchProps } from './types';\n\nexport const Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n`;\n\nexport const SwitchRoot = styled(SwitchPrimitive.Root)<{\n  size: SwitchProps['size'];\n}>`\n  all: unset;\n  background-color: ${contents300};\n  border-radius: 24px;\n  position: relative;\n  cursor: pointer;\n\n  &:focus-visible {\n    outline: solid 2px black;\n    outline-offset: 2px;\n  }\n  &[data-state='checked'] {\n    background-color: ${secondary100};\n  }\n\n  ${({ size }) =>\n    (size === 'small' &&\n      css`\n        width: 36px;\n        height: 20px;\n      `) ||\n    (size === 'large' &&\n      css`\n        width: 64px;\n        height: 38px;\n      `)};\n`;\n\nexport const SwitchThumb = styled(SwitchPrimitive.Thumb)<{\n  size: SwitchProps['size'];\n}>`\n  display: block;\n  background-color: ${contents999};\n  border-radius: 50%;\n  transition: transform 0.2s cubic-bezier(0, 0.6, 0, 0.99);\n  will-change: transform;\n\n  ${({ size }) =>\n    (size === 'small' &&\n      css`\n        width: 14px;\n        height: 14px;\n        transform: translateX(3px);\n        &[data-state='checked'] {\n          transform: translateX(19px);\n        }\n      `) ||\n    (size === 'large' &&\n      css`\n        width: 28px;\n        height: 28px;\n        transform: translateX(5px);\n        &[data-state='checked'] {\n          transform: translateX(31px);\n        }\n      `)};\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASiC;AAM1B;;;AAA+C;AAiBlD;AAAO;AAUH;AAGD;;;AAAiD;AASpD;AAAO;AAkBH;;;;"}

package/dist/primitive/src/Control/Switch/styles.mjs

@@ -0,0 +1,26 @@
+"use client";
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import styled, { css } from 'styled-components';
+import { contents300, secondary100, contents999 } from '@remember-web/mixin';
+
+var Label = styled.label.withConfig({
+  displayName: "styles__Label",
+  componentId: "sc-1vvtj2e-0"
+})(["display:inline-flex;align-items:center;gap:8px;"]);
+var SwitchRoot = styled(SwitchPrimitive.Root).withConfig({
+  displayName: "styles__SwitchRoot",
+  componentId: "sc-1vvtj2e-1"
+})(["all:unset;background-color:", ";border-radius:24px;position:relative;cursor:pointer;&:focus-visible{outline:solid 2px black;outline-offset:2px;}&[data-state='checked']{background-color:", ";}", ";"], contents300, secondary100, function (_ref) {
+  var size = _ref.size;
+  return size === 'small' && css(["width:36px;height:20px;"]) || size === 'large' && css(["width:64px;height:38px;"]);
+});
+var SwitchThumb = styled(SwitchPrimitive.Thumb).withConfig({
+  displayName: "styles__SwitchThumb",
+  componentId: "sc-1vvtj2e-2"
+})(["display:block;background-color:", ";border-radius:50%;transition:transform 0.2s cubic-bezier(0,0.6,0,0.99);will-change:transform;", ";"], contents999, function (_ref2) {
+  var size = _ref2.size;
+  return size === 'small' && css(["width:14px;height:14px;transform:translateX(3px);&[data-state='checked']{transform:translateX(19px);}"]) || size === 'large' && css(["width:28px;height:28px;transform:translateX(5px);&[data-state='checked']{transform:translateX(31px);}"]);
+});
+
+export { Label, SwitchRoot, SwitchThumb };
+//# sourceMappingURL=styles.mjs.map

package/dist/primitive/src/Control/Switch/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","sources":["../../../../../src/Control/Switch/styles.ts"],"sourcesContent":["'use client';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport styled, { css } from 'styled-components';\n\nimport { contents300, contents999, secondary100 } from '@remember-web/mixin';\n\nimport type { SwitchProps } from './types';\n\nexport const Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n`;\n\nexport const SwitchRoot = styled(SwitchPrimitive.Root)<{\n  size: SwitchProps['size'];\n}>`\n  all: unset;\n  background-color: ${contents300};\n  border-radius: 24px;\n  position: relative;\n  cursor: pointer;\n\n  &:focus-visible {\n    outline: solid 2px black;\n    outline-offset: 2px;\n  }\n  &[data-state='checked'] {\n    background-color: ${secondary100};\n  }\n\n  ${({ size }) =>\n    (size === 'small' &&\n      css`\n        width: 36px;\n        height: 20px;\n      `) ||\n    (size === 'large' &&\n      css`\n        width: 64px;\n        height: 38px;\n      `)};\n`;\n\nexport const SwitchThumb = styled(SwitchPrimitive.Thumb)<{\n  size: SwitchProps['size'];\n}>`\n  display: block;\n  background-color: ${contents999};\n  border-radius: 50%;\n  transition: transform 0.2s cubic-bezier(0, 0.6, 0, 0.99);\n  will-change: transform;\n\n  ${({ size }) =>\n    (size === 'small' &&\n      css`\n        width: 14px;\n        height: 14px;\n        transform: translateX(3px);\n        &[data-state='checked'] {\n          transform: translateX(19px);\n        }\n      `) ||\n    (size === 'large' &&\n      css`\n        width: 28px;\n        height: 28px;\n        transform: translateX(5px);\n        &[data-state='checked'] {\n          transform: translateX(31px);\n        }\n      `)};\n`;\n"],"names":[],"mappings":";;;;;;;;AASiC;AAM1B;;;AAA+C;AAiBlD;AAAO;AAUH;AAGD;;;AAAiD;AASpD;AAAO;AAkBH;;"}

package/dist/primitive/src/Control/Toggle.cjs

@@ -1,7 +1,6 @@
 "use client";
 'use strict';
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var react = require('react');
@@ -11,12 +10,10 @@ var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _templateObject;
 var _excluded = ["variant"];
 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; }
@@ -29,7 +26,10 @@ var _Toggle = function _Toggle(_ref, ref) {
   }, props));
 };
 var Toggle = /*#__PURE__*/react.forwardRef(_Toggle);
-var CircleBaseToggle = styled__default.default(index.BaseToggle)(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  & > svg {\n    border-radius: 50%;\n  }\n"])));
+var CircleBaseToggle = styled__default.default(index.BaseToggle).withConfig({
+  displayName: "Toggle__CircleBaseToggle",
+  componentId: "sc-1blv5t4-0"
+})(["& > svg{border-radius:50%;}"]);
 
 exports.CircleBaseToggle = CircleBaseToggle;
 exports.Toggle = Toggle;