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

package/dist/primitive/src/Floating/DropdownMenu/styles.mjs

@@ -1,23 +1,24 @@
 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 { getTypographyStyles, contents000, bg200, contents200, divider } from '@remember-web/mixin';
 import { StyledPopoverContent } from '../Popover/styles.mjs';
 
 var _excluded = ["active", "disabled"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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 dropdownMenuItemCSS = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n\n  ", ";\n  color: ", ";\n  transition: background-color 0.07s;\n  border-radius: unset;\n  text-decoration: none;\n"])), getTypographyStyles('Body1'), contents000);
-var DropdownMenuItemHoverCSS = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:hover,\n  &:focus-visible {\n    background-color: ", ";\n  }\n"])), bg200);
-var DropdownMenuItemDisabledCSS = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
-var StyledDropdownMenuSectionTitle = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  color: ", ";\n"])), dropdownMenuItemCSS, getTypographyStyles('Body2_M'), contents200);
+var dropdownMenuItemCSS = css(["display:flex;align-items:center;padding:8px 12px;", ";color:", ";transition:background-color 0.07s;border-radius:unset;text-decoration:none;"], getTypographyStyles('Body1'), contents000);
+var DropdownMenuItemHoverCSS = css(["&:hover,&:focus-visible{background-color:", ";}"], bg200);
+var DropdownMenuItemDisabledCSS = css(["pointer-events:none;"]);
+var StyledDropdownMenuSectionTitle = styled.span.withConfig({
+  displayName: "styles__StyledDropdownMenuSectionTitle",
+  componentId: "sc-27u5hi-0"
+})(["", ";", ";color:", ";"], dropdownMenuItemCSS, getTypographyStyles('Body2_M'), contents200);
 var getDropdownMenuItemCss = function getDropdownMenuItemCss(_ref) {
   var $active = _ref.$active,
     $disabled = _ref.$disabled;
   return css(function () {
-    return [dropdownMenuItemCSS, !$active && DropdownMenuItemHoverCSS, $disabled && DropdownMenuItemDisabledCSS, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      font-weight: ", ";\n\n      &:focus-visible {\n        outline: none;\n      }\n    "])), $active ? 600 : 400)];
+    return [dropdownMenuItemCSS, !$active && DropdownMenuItemHoverCSS, $disabled && DropdownMenuItemDisabledCSS, css(["font-weight:", ";&:focus-visible{outline:none;}"], $active ? 600 : 400)];
   });
 };
 var StyledDropdownMenuItem = styled.div.attrs(function (_ref2) {
@@ -29,9 +30,18 @@ var StyledDropdownMenuItem = styled.div.attrs(function (_ref2) {
     $active: active,
     $disabled: disabled
   }, props);
+}).withConfig({
+  displayName: "styles__StyledDropdownMenuItem",
+  componentId: "sc-27u5hi-1"
 })(getDropdownMenuItemCss);
-var StyledDropdownMenuSection = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
-var StyledDropdownMenuContent = styled(StyledPopoverContent)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", " {\n    border-bottom: 1px solid ", ";\n  }\n  ", ":last-child {\n    border-bottom: none;\n  }\n"])), StyledDropdownMenuSection, divider, StyledDropdownMenuSection);
+var StyledDropdownMenuSection = styled.div.withConfig({
+  displayName: "styles__StyledDropdownMenuSection",
+  componentId: "sc-27u5hi-2"
+})([""]);
+var StyledDropdownMenuContent = styled(StyledPopoverContent).withConfig({
+  displayName: "styles__StyledDropdownMenuContent",
+  componentId: "sc-27u5hi-3"
+})(["", "{border-bottom:1px solid ", ";}", ":last-child{border-bottom:none;}"], StyledDropdownMenuSection, divider, StyledDropdownMenuSection);
 StyledDropdownMenuItem.defaultProps = {};
 
 export { DropdownMenuItemDisabledCSS, DropdownMenuItemHoverCSS, StyledDropdownMenuContent, StyledDropdownMenuItem, StyledDropdownMenuSection, StyledDropdownMenuSectionTitle, dropdownMenuItemCSS, getDropdownMenuItemCss };

package/dist/primitive/src/Floating/DropdownMenu/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","sources":["../../../../../src/Floating/DropdownMenu/styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { bg200, contents000, contents200, divider } from '@remember-web/mixin';\nimport { getTypographyStyles } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\nimport { StyledPopoverContent } from '@/Floating/Popover/styles';\n\nexport const dropdownMenuItemCSS = css`\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n\n  ${getTypographyStyles('Body1')};\n  color: ${contents000};\n  transition: background-color 0.07s;\n  border-radius: unset;\n  text-decoration: none;\n`;\n\nexport const DropdownMenuItemHoverCSS = css`\n  &:hover,\n  &:focus-visible {\n    background-color: ${bg200};\n  }\n`;\n\nexport const DropdownMenuItemDisabledCSS = css`\n  pointer-events: none;\n`;\n\nexport const StyledDropdownMenuSectionTitle = styled.span`\n  ${dropdownMenuItemCSS};\n  ${getTypographyStyles('Body2_M')};\n  color: ${contents200};\n`;\n\nexport type DropdownMenuItemProps =\n  ConvertTransientProps<StyledDropdownMenuItemProps>;\n\nexport type StyledDropdownMenuItemProps = {\n  $active?: boolean;\n  $disabled?: boolean;\n};\n\nexport const getDropdownMenuItemCss = ({\n  $active,\n  $disabled,\n}: StyledDropdownMenuItemProps) =>\n  css(() => [\n    dropdownMenuItemCSS,\n    !$active && DropdownMenuItemHoverCSS,\n    $disabled && DropdownMenuItemDisabledCSS,\n    css`\n      font-weight: ${$active ? 600 : 400};\n\n      &:focus-visible {\n        outline: none;\n      }\n    `,\n  ]);\n\nexport const StyledDropdownMenuItem = styled.div.attrs<DropdownMenuItemProps>(\n  ({ active, disabled, ...props }) => ({\n    tabIndex: active ? -1 : undefined,\n    $active: active,\n    $disabled: disabled,\n    ...props,\n  })\n)<StyledDropdownMenuItemProps>(getDropdownMenuItemCss);\n\nexport const StyledDropdownMenuSection = styled.div``;\n\nexport const StyledDropdownMenuContent = styled(StyledPopoverContent)`\n  ${StyledDropdownMenuSection} {\n    border-bottom: 1px solid ${divider};\n  }\n  ${StyledDropdownMenuSection}:last-child {\n    border-bottom: none;\n  }\n`;\nStyledDropdownMenuItem.defaultProps = {};\n"],"names":["dropdownMenuItemCSS","css","_templateObject","_taggedTemplateLiteral","getTypographyStyles","contents000","DropdownMenuItemHoverCSS","_templateObject2","bg200","DropdownMenuItemDisabledCSS","_templateObject3","StyledDropdownMenuSectionTitle","styled","span","_templateObject4","contents200","getDropdownMenuItemCss","_ref","$active","$disabled","_templateObject5","StyledDropdownMenuItem","div","attrs","_ref2","active","disabled","props","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","undefined","StyledDropdownMenuSection","_templateObject6","StyledDropdownMenuContent","StyledPopoverContent","_templateObject7","divider","defaultProps"],"mappings":";;;;;;;;;;;IAOaA,mBAAmB,GAAGC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,gMAKlCC,mBAAmB,CAAC,OAAO,CAAC,EACrBC,WAAW,EAIrB;AAEYC,IAAAA,wBAAwB,GAAGL,GAAG,CAAAM,gBAAA,KAAAA,gBAAA,GAAAJ,sBAAA,CAGnBK,CAAAA,2DAAAA,EAAAA,UAAAA,CAAAA,CAAAA,CAAAA,EAAAA,KAAK,EAE5B;AAEM,IAAMC,2BAA2B,GAAGR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,sBAAA,CAE7C,CAAA,6BAAA,CAAA,CAAA,CAAA,EAAA;AAEM,IAAMQ,8BAA8B,GAAGC,MAAM,CAACC,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAX,sBAAA,CAAA,CAAA,MAAA,EAAA,OAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA,EACrDH,mBAAmB,EACnBI,mBAAmB,CAAC,SAAS,CAAC,EACvBW,WAAW,EACrB;IAUYC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IACjCC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,SAAS,GAAAF,IAAA,CAATE,SAAS,CAAA;AAAA,EAAA,OAETlB,GAAG,CAAC,YAAA;IAAA,OAAM,CACRD,mBAAmB,EACnB,CAACkB,OAAO,IAAIZ,wBAAwB,EACpCa,SAAS,IAAIV,2BAA2B,EACxCR,GAAG,CAAAmB,gBAAA,KAAAA,gBAAA,GAAAjB,sBAAA,CACce,CAAAA,uBAAAA,EAAAA,qEAAAA,CAAAA,CAAAA,CAAAA,EAAAA,OAAO,GAAG,GAAG,GAAG,GAAG,CAMrC,CAAA,CAAA;GAAC,CAAA,CAAA;AAAA,EAAA;AAEG,IAAMG,sBAAsB,GAAGT,MAAM,CAACU,GAAG,CAACC,KAAK,CACpD,UAAAC,KAAA,EAAA;AAAA,EAAA,IAAGC,MAAM,GAAAD,KAAA,CAANC,MAAM;IAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;AAAKC,IAAAA,KAAK,GAAAC,wBAAA,CAAAJ,KAAA,EAAAK,SAAA,CAAA,CAAA;AAAA,EAAA,OAAAC,aAAA,CAAA;AAC3BC,IAAAA,QAAQ,EAAEN,MAAM,GAAG,CAAC,CAAC,GAAGO,SAAS;AACjCd,IAAAA,OAAO,EAAEO,MAAM;AACfN,IAAAA,SAAS,EAAEO,QAAAA;AAAQ,GAAA,EAChBC,KAAK,CAAA,CAAA;AAAA,CAEZ,CAAC,CAA8BX,sBAAsB,EAAC;AAEzCiB,IAAAA,yBAAyB,GAAGrB,MAAM,CAACU,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAA/B,sBAAA,CAAE,CAAA,EAAA,CAAA,CAAA,CAAA,EAAA;IAExCgC,yBAAyB,GAAGvB,MAAM,CAACwB,oBAAoB,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAlC,sBAAA,CACjE8B,CAAAA,MAAAA,EAAAA,mCAAAA,EAAAA,YAAAA,EAAAA,gDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,yBAAyB,EACEK,OAAO,EAElCL,yBAAyB,EAG5B;AACDZ,sBAAsB,CAACkB,YAAY,GAAG,EAAE;;;;"}
+{"version":3,"file":"styles.mjs","sources":["../../../../../src/Floating/DropdownMenu/styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { bg200, contents000, contents200, divider } from '@remember-web/mixin';\nimport { getTypographyStyles } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\nimport { StyledPopoverContent } from '@/Floating/Popover/styles';\n\nexport const dropdownMenuItemCSS = css`\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n\n  ${getTypographyStyles('Body1')};\n  color: ${contents000};\n  transition: background-color 0.07s;\n  border-radius: unset;\n  text-decoration: none;\n`;\n\nexport const DropdownMenuItemHoverCSS = css`\n  &:hover,\n  &:focus-visible {\n    background-color: ${bg200};\n  }\n`;\n\nexport const DropdownMenuItemDisabledCSS = css`\n  pointer-events: none;\n`;\n\nexport const StyledDropdownMenuSectionTitle = styled.span`\n  ${dropdownMenuItemCSS};\n  ${getTypographyStyles('Body2_M')};\n  color: ${contents200};\n`;\n\nexport type DropdownMenuItemProps =\n  ConvertTransientProps<StyledDropdownMenuItemProps>;\n\nexport type StyledDropdownMenuItemProps = {\n  $active?: boolean;\n  $disabled?: boolean;\n};\n\nexport const getDropdownMenuItemCss = ({\n  $active,\n  $disabled,\n}: StyledDropdownMenuItemProps) =>\n  css(() => [\n    dropdownMenuItemCSS,\n    !$active && DropdownMenuItemHoverCSS,\n    $disabled && DropdownMenuItemDisabledCSS,\n    css`\n      font-weight: ${$active ? 600 : 400};\n\n      &:focus-visible {\n        outline: none;\n      }\n    `,\n  ]);\n\nexport const StyledDropdownMenuItem = styled.div.attrs<DropdownMenuItemProps>(\n  ({ active, disabled, ...props }) => ({\n    tabIndex: active ? -1 : undefined,\n    $active: active,\n    $disabled: disabled,\n    ...props,\n  })\n)<StyledDropdownMenuItemProps>(getDropdownMenuItemCss);\n\nexport const StyledDropdownMenuSection = styled.div``;\n\nexport const StyledDropdownMenuContent = styled(StyledPopoverContent)`\n  ${StyledDropdownMenuSection} {\n    border-bottom: 1px solid ${divider};\n  }\n  ${StyledDropdownMenuSection}:last-child {\n    border-bottom: none;\n  }\n`;\nStyledDropdownMenuItem.defaultProps = {};\n"],"names":["dropdownMenuItemCSS","css","getTypographyStyles","contents000","DropdownMenuItemHoverCSS","bg200","DropdownMenuItemDisabledCSS","StyledDropdownMenuSectionTitle","styled","span","withConfig","displayName","componentId","contents200","getDropdownMenuItemCss","_ref","$active","$disabled","StyledDropdownMenuItem","div","attrs","_ref2","active","disabled","props","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","undefined","StyledDropdownMenuSection","StyledDropdownMenuContent","StyledPopoverContent","divider","defaultProps"],"mappings":";;;;;;;;;AAOO,IAAMA,mBAAmB,GAAGC,GAAG,CAAA,CAAA,mDAAA,EAAA,SAAA,EAAA,8EAAA,CAAA,EAKlCC,mBAAmB,CAAC,OAAO,CAAC,EACrBC,WAAW,EAIrB;IAEYC,wBAAwB,GAAGH,GAAG,CAAA,CAAA,2CAAA,EAAA,IAAA,CAAA,EAGnBI,KAAK,EAE5B;AAEYC,IAAAA,2BAA2B,GAAGL,GAAG,CAE7C,CAAA,sBAAA,CAAA,EAAA;IAEYM,8BAA8B,GAAGC,MAAM,CAACC,IAAI,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CACrDZ,CAAAA,CAAAA,CAAAA,EAAAA,EAAAA,GAAAA,EAAAA,SAAAA,EAAAA,GAAAA,CAAAA,EAAAA,mBAAmB,EACnBE,mBAAmB,CAAC,SAAS,CAAC,EACvBW,WAAW,EACrB;IAUYC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IACjCC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,SAAS,GAAAF,IAAA,CAATE,SAAS,CAAA;AAAA,EAAA,OAEThB,GAAG,CAAC,YAAA;AAAA,IAAA,OAAM,CACRD,mBAAmB,EACnB,CAACgB,OAAO,IAAIZ,wBAAwB,EACpCa,SAAS,IAAIX,2BAA2B,EACxCL,GAAG,CACce,CAAAA,cAAAA,EAAAA,iCAAAA,CAAAA,EAAAA,OAAO,GAAG,GAAG,GAAG,GAAG,CAMrC,CAAA,CAAA;GAAC,CAAA,CAAA;AAAA,EAAA;AAEG,IAAME,sBAAsB,GAAGV,MAAM,CAACW,GAAG,CAACC,KAAK,CACpD,UAAAC,KAAA,EAAA;AAAA,EAAA,IAAGC,MAAM,GAAAD,KAAA,CAANC,MAAM;IAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;AAAKC,IAAAA,KAAK,GAAAC,wBAAA,CAAAJ,KAAA,EAAAK,SAAA,CAAA,CAAA;AAAA,EAAA,OAAAC,aAAA,CAAA;AAC3BC,IAAAA,QAAQ,EAAEN,MAAM,GAAG,CAAC,CAAC,GAAGO,SAAS;AACjCb,IAAAA,OAAO,EAAEM,MAAM;AACfL,IAAAA,SAAS,EAAEM,QAAAA;AAAQ,GAAA,EAChBC,KAAK,CAAA,CAAA;AAAA,CAEZ,CAAC,CAAAd,UAAA,CAAA;EAAAC,WAAA,EAAA,gCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAA8BE,sBAAsB,EAAC;IAEzCgB,yBAAyB,GAAGtB,MAAM,CAACW,GAAG,CAAAT,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;AAE9C,IAAMmB,yBAAyB,GAAGvB,MAAM,CAACwB,oBAAoB,CAAC,CAAAtB,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,2BAAA,EAAA,IAAA,EAAA,kCAAA,CAAA,EACjEkB,yBAAyB,EACEG,OAAO,EAElCH,yBAAyB,EAG5B;AACDZ,sBAAsB,CAACgB,YAAY,GAAG,EAAE;;;;"}

package/dist/primitive/src/Floating/Popover/styles.cjs

@@ -1,19 +1,19 @@
 'use strict';
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var RadixPopover = require('@radix-ui/react-popover');
 var mixin = require('@remember-web/mixin');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _templateObject, _templateObject2, _templateObject3;
-var showFadeIn = styled.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n"])));
-var showFadeOut = styled.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n    from {\n        opacity: 1;\n    }\n    to {\n        opacity: 0;\n    }\n"])));
-var StyledPopoverContent = styled__default.default(RadixPopover.PopoverContent)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  contain: paint;\n  width: fit-content;\n  margin: 0;\n  padding: 0;\n  border-radius: 4px;\n\n  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n  color: ", ";\n  background-color: ", ";\n  white-space: pre-line;\n\n  height: 100%;\n  will-change: box-shadow;\n\n  &:focus {\n    outline: none;\n  }\n  &[data-state='open'] {\n    animation: ", " 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n  &:not([data-state='open']) {\n    animation: ", " 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n"])), mixin.contents000, mixin.bg100, showFadeIn, showFadeOut);
+var showFadeIn = styled.keyframes(["from{opacity:0;}to{opacity:1;}"]);
+var showFadeOut = styled.keyframes(["from{opacity:1;}to{opacity:0;}"]);
+var StyledPopoverContent = styled__default.default(RadixPopover.PopoverContent).withConfig({
+  displayName: "styles__StyledPopoverContent",
+  componentId: "sc-nuba9w-0"
+})(["contain:paint;width:fit-content;margin:0;padding:0;border-radius:4px;box-shadow:0 4px 12px 0 rgba(0,0,0,0.1);color:", ";background-color:", ";white-space:pre-line;height:100%;will-change:box-shadow;&:focus{outline:none;}&[data-state='open']{animation:", " 0.12s cubic-bezier(0.35,0,0.25,1) both;}&:not([data-state='open']){animation:", " 0.16s cubic-bezier(0.35,0,0.25,1) both;}"], mixin.contents000, mixin.bg100, showFadeIn, showFadeOut);
 StyledPopoverContent.defaultProps = {
   avoidCollisions: true,
   align: 'start',

package/dist/primitive/src/Floating/Popover/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","sources":["../../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport { PopoverContent } from '@radix-ui/react-popover';\n\nimport { bg100, contents000 } from '@remember-web/mixin';\n\nexport const showFadeIn = keyframes`\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n`;\nexport const showFadeOut = keyframes`\n    from {\n        opacity: 1;\n    }\n    to {\n        opacity: 0;\n    }\n`;\n\nexport const StyledPopoverContent = styled(PopoverContent)`\n  contain: paint;\n  width: fit-content;\n  margin: 0;\n  padding: 0;\n  border-radius: 4px;\n\n  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n  color: ${contents000};\n  background-color: ${bg100};\n  white-space: pre-line;\n\n  height: 100%;\n  will-change: box-shadow;\n\n  &:focus {\n    outline: none;\n  }\n  &[data-state='open'] {\n    animation: ${showFadeIn} 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n  &:not([data-state='open']) {\n    animation: ${showFadeOut} 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n`;\n\nStyledPopoverContent.defaultProps = {\n  avoidCollisions: true,\n  align: 'start',\n  side: 'bottom',\n  sideOffset: 4,\n};\n"],"names":["showFadeIn","keyframes","_templateObject","_taggedTemplateLiteral","showFadeOut","_templateObject2","StyledPopoverContent","styled","PopoverContent","_templateObject3","contents000","bg100","defaultProps","avoidCollisions","align","side","sideOffset"],"mappings":";;;;;;;;;;;;;AAKO,IAAMA,UAAU,GAAGC,gBAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CAOlC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AACM,IAAMC,WAAW,GAAGH,gBAAS,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,uCAAA,CAOnC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AAEM,IAAMG,oBAAoB,GAAGC,uBAAM,CAACC,2BAAc,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAN,uCAAA,2fAQ/CO,iBAAW,EACAC,WAAK,EAUVX,UAAU,EAGVI,WAAW,EAE3B;AAEDE,oBAAoB,CAACM,YAAY,GAAG;AAClCC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,UAAU,EAAE,CAAA;AACd,CAAC;;;;;;"}
+{"version":3,"file":"styles.cjs","sources":["../../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport { PopoverContent } from '@radix-ui/react-popover';\n\nimport { bg100, contents000 } from '@remember-web/mixin';\n\nexport const showFadeIn = keyframes`\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n`;\nexport const showFadeOut = keyframes`\n    from {\n        opacity: 1;\n    }\n    to {\n        opacity: 0;\n    }\n`;\n\nexport const StyledPopoverContent = styled(PopoverContent)`\n  contain: paint;\n  width: fit-content;\n  margin: 0;\n  padding: 0;\n  border-radius: 4px;\n\n  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n  color: ${contents000};\n  background-color: ${bg100};\n  white-space: pre-line;\n\n  height: 100%;\n  will-change: box-shadow;\n\n  &:focus {\n    outline: none;\n  }\n  &[data-state='open'] {\n    animation: ${showFadeIn} 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n  &:not([data-state='open']) {\n    animation: ${showFadeOut} 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n`;\n\nStyledPopoverContent.defaultProps = {\n  avoidCollisions: true,\n  align: 'start',\n  side: 'bottom',\n  sideOffset: 4,\n};\n"],"names":["showFadeIn","keyframes","showFadeOut","StyledPopoverContent","styled","PopoverContent","withConfig","displayName","componentId","contents000","bg100","defaultProps","avoidCollisions","align","side","sideOffset"],"mappings":";;;;;;;;;;AAKaA,IAAAA,UAAU,GAAGC,gBAAS,CAOlC,CAAA,gCAAA,CAAA,EAAA;AACYC,IAAAA,WAAW,GAAGD,gBAAS,CAOnC,CAAA,gCAAA,CAAA,EAAA;AAEM,IAAME,oBAAoB,GAAGC,uBAAM,CAACC,2BAAc,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qHAAA,EAAA,oBAAA,EAAA,gHAAA,EAAA,gFAAA,EAAA,2CAAA,CAAA,EAQ/CC,iBAAW,EACAC,WAAK,EAUVV,UAAU,EAGVE,WAAW,EAE3B;AAEDC,oBAAoB,CAACQ,YAAY,GAAG;AAClCC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,UAAU,EAAE,CAAA;AACd,CAAC;;;;;;"}

package/dist/primitive/src/Floating/Popover/styles.mjs

@@ -1,12 +1,13 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import styled, { keyframes } from 'styled-components';
 import { PopoverContent } from '@radix-ui/react-popover';
 import { contents000, bg100 } from '@remember-web/mixin';
 
-var _templateObject, _templateObject2, _templateObject3;
-var showFadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n"])));
-var showFadeOut = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    from {\n        opacity: 1;\n    }\n    to {\n        opacity: 0;\n    }\n"])));
-var StyledPopoverContent = styled(PopoverContent)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  contain: paint;\n  width: fit-content;\n  margin: 0;\n  padding: 0;\n  border-radius: 4px;\n\n  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n  color: ", ";\n  background-color: ", ";\n  white-space: pre-line;\n\n  height: 100%;\n  will-change: box-shadow;\n\n  &:focus {\n    outline: none;\n  }\n  &[data-state='open'] {\n    animation: ", " 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n  &:not([data-state='open']) {\n    animation: ", " 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n"])), contents000, bg100, showFadeIn, showFadeOut);
+var showFadeIn = keyframes(["from{opacity:0;}to{opacity:1;}"]);
+var showFadeOut = keyframes(["from{opacity:1;}to{opacity:0;}"]);
+var StyledPopoverContent = styled(PopoverContent).withConfig({
+  displayName: "styles__StyledPopoverContent",
+  componentId: "sc-nuba9w-0"
+})(["contain:paint;width:fit-content;margin:0;padding:0;border-radius:4px;box-shadow:0 4px 12px 0 rgba(0,0,0,0.1);color:", ";background-color:", ";white-space:pre-line;height:100%;will-change:box-shadow;&:focus{outline:none;}&[data-state='open']{animation:", " 0.12s cubic-bezier(0.35,0,0.25,1) both;}&:not([data-state='open']){animation:", " 0.16s cubic-bezier(0.35,0,0.25,1) both;}"], contents000, bg100, showFadeIn, showFadeOut);
 StyledPopoverContent.defaultProps = {
   avoidCollisions: true,
   align: 'start',

package/dist/primitive/src/Floating/Popover/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","sources":["../../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport { PopoverContent } from '@radix-ui/react-popover';\n\nimport { bg100, contents000 } from '@remember-web/mixin';\n\nexport const showFadeIn = keyframes`\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n`;\nexport const showFadeOut = keyframes`\n    from {\n        opacity: 1;\n    }\n    to {\n        opacity: 0;\n    }\n`;\n\nexport const StyledPopoverContent = styled(PopoverContent)`\n  contain: paint;\n  width: fit-content;\n  margin: 0;\n  padding: 0;\n  border-radius: 4px;\n\n  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n  color: ${contents000};\n  background-color: ${bg100};\n  white-space: pre-line;\n\n  height: 100%;\n  will-change: box-shadow;\n\n  &:focus {\n    outline: none;\n  }\n  &[data-state='open'] {\n    animation: ${showFadeIn} 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n  &:not([data-state='open']) {\n    animation: ${showFadeOut} 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n`;\n\nStyledPopoverContent.defaultProps = {\n  avoidCollisions: true,\n  align: 'start',\n  side: 'bottom',\n  sideOffset: 4,\n};\n"],"names":["showFadeIn","keyframes","_templateObject","_taggedTemplateLiteral","showFadeOut","_templateObject2","StyledPopoverContent","styled","PopoverContent","_templateObject3","contents000","bg100","defaultProps","avoidCollisions","align","side","sideOffset"],"mappings":";;;;;;AAKO,IAAMA,UAAU,GAAGC,SAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAOlC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AACM,IAAMC,WAAW,GAAGH,SAAS,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,CAOnC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AAEM,IAAMG,oBAAoB,GAAGC,MAAM,CAACC,cAAc,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAN,sBAAA,2fAQ/CO,WAAW,EACAC,KAAK,EAUVX,UAAU,EAGVI,WAAW,EAE3B;AAEDE,oBAAoB,CAACM,YAAY,GAAG;AAClCC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,UAAU,EAAE,CAAA;AACd,CAAC;;;;"}
+{"version":3,"file":"styles.mjs","sources":["../../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport { PopoverContent } from '@radix-ui/react-popover';\n\nimport { bg100, contents000 } from '@remember-web/mixin';\n\nexport const showFadeIn = keyframes`\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n`;\nexport const showFadeOut = keyframes`\n    from {\n        opacity: 1;\n    }\n    to {\n        opacity: 0;\n    }\n`;\n\nexport const StyledPopoverContent = styled(PopoverContent)`\n  contain: paint;\n  width: fit-content;\n  margin: 0;\n  padding: 0;\n  border-radius: 4px;\n\n  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n  color: ${contents000};\n  background-color: ${bg100};\n  white-space: pre-line;\n\n  height: 100%;\n  will-change: box-shadow;\n\n  &:focus {\n    outline: none;\n  }\n  &[data-state='open'] {\n    animation: ${showFadeIn} 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n  &:not([data-state='open']) {\n    animation: ${showFadeOut} 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n`;\n\nStyledPopoverContent.defaultProps = {\n  avoidCollisions: true,\n  align: 'start',\n  side: 'bottom',\n  sideOffset: 4,\n};\n"],"names":["showFadeIn","keyframes","showFadeOut","StyledPopoverContent","styled","PopoverContent","withConfig","displayName","componentId","contents000","bg100","defaultProps","avoidCollisions","align","side","sideOffset"],"mappings":";;;;AAKaA,IAAAA,UAAU,GAAGC,SAAS,CAOlC,CAAA,gCAAA,CAAA,EAAA;AACYC,IAAAA,WAAW,GAAGD,SAAS,CAOnC,CAAA,gCAAA,CAAA,EAAA;AAEM,IAAME,oBAAoB,GAAGC,MAAM,CAACC,cAAc,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qHAAA,EAAA,oBAAA,EAAA,gHAAA,EAAA,gFAAA,EAAA,2CAAA,CAAA,EAQ/CC,WAAW,EACAC,KAAK,EAUVV,UAAU,EAGVE,WAAW,EAE3B;AAEDC,oBAAoB,CAACQ,YAAY,GAAG;AAClCC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,UAAU,EAAE,CAAA;AACd,CAAC;;;;"}

package/dist/primitive/src/Floating/Tooltip/styles.cjs

@@ -1,7 +1,6 @@
 "use client";
 'use strict';
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var RadixTooltip = require('@radix-ui/react-tooltip');
 var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
@@ -26,11 +25,9 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var RadixTooltip__namespace = /*#__PURE__*/_interopNamespace(RadixTooltip);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 var TOOLTIP_CONTENT_CONSTANTS = {
   large: {
     padding: '8px 12px',
@@ -41,18 +38,27 @@ var TOOLTIP_CONTENT_CONSTANTS = {
     typography: 'Body2'
   }
 };
-var fadeIn = styled.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n"])));
-var TooltipTriggerWrapper = styled__default.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n"])));
-var TooltipContent = styled__default.default(RadixTooltip__namespace.Content)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ", " 200ms forwards;\n  gap: 4px;\n\n  ", ";\n"])), mixin.contents999, mixin.contents000, fadeIn, function (_ref) {
+var fadeIn = styled.keyframes(["from{opacity:0}to{opacity:1;}"]);
+var TooltipTriggerWrapper = styled__default.default.div.withConfig({
+  displayName: "styles__TooltipTriggerWrapper",
+  componentId: "sc-sfqer9-0"
+})(["width:fit-content;height:fit-content;& > svg{display:block;}"]);
+var TooltipContent = styled__default.default(RadixTooltip__namespace.Content).withConfig({
+  displayName: "styles__TooltipContent",
+  componentId: "sc-sfqer9-1"
+})(["box-sizing:border-box;display:flex;white-space:pre-wrap;color:", ";background-color:", ";border-radius:4px;will-change:opacity;animation:", " 200ms forwards;gap:4px;", ";"], mixin.contents999, mixin.contents000, fadeIn, function (_ref) {
   var $size = _ref.$size,
     $maxWidth = _ref.$maxWidth,
     $zIndex = _ref.$zIndex,
     $backgroundColor = _ref.$backgroundColor,
     $contentColor = _ref.$contentColor,
     $textAlign = _ref.$textAlign;
-  return [styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n      padding: ", ";\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      text-align: ", ";\n      z-index: ", ";\n    "])), TOOLTIP_CONTENT_CONSTANTS[$size].padding, mixin.getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography), $backgroundColor, $contentColor, $textAlign, $zIndex), typeof $maxWidth === 'string' ? "max-width: ".concat($maxWidth, ";") : "max-width: ".concat($maxWidth, "px;")];
+  return [styled.css(["padding:", ";", ";background-color:", ";color:", ";text-align:", ";z-index:", ";"], TOOLTIP_CONTENT_CONSTANTS[$size].padding, mixin.getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography), $backgroundColor, $contentColor, $textAlign, $zIndex), typeof $maxWidth === 'string' ? "max-width: ".concat($maxWidth, ";") : "max-width: ".concat($maxWidth, "px;")];
 });
-var CloseButton = styled__default.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n"])));
+var CloseButton = styled__default.default.button.withConfig({
+  displayName: "styles__CloseButton",
+  componentId: "sc-sfqer9-2"
+})(["all:unset;appearance:none;cursor:pointer;& > svg{display:block;}"]);
 
 exports.CloseButton = CloseButton;
 exports.TooltipContent = TooltipContent;

package/dist/primitive/src/Floating/Tooltip/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","sources":["../../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n  contents000,\n  contents999,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nimport type { TooltipSize, TooltipTextAlign } from './types';\n\nconst TOOLTIP_CONTENT_CONSTANTS: Record<\n  TooltipSize,\n  { padding: string; typography: TypographyStyle }\n> = {\n  large: {\n    padding: '8px 12px',\n    typography: 'Body1',\n  },\n  small: {\n    padding: '4px 8px',\n    typography: 'Body2',\n  },\n};\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n`;\n\nexport const TooltipTriggerWrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n`;\n\nexport const TooltipContent = styled(RadixTooltip.Content)<{\n  $size: TooltipSize;\n  $maxWidth: number | string;\n  $backgroundColor: string;\n  $contentColor: string;\n  $textAlign?: TooltipTextAlign;\n  $zIndex?: number;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ${contents999};\n  background-color: ${contents000};\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ${fadeIn} 200ms forwards;\n  gap: 4px;\n\n  ${({\n    $size,\n    $maxWidth,\n    $zIndex,\n    $backgroundColor,\n    $contentColor,\n    $textAlign,\n  }) => [\n    css`\n      padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};\n      ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};\n      background-color: ${$backgroundColor};\n      color: ${$contentColor};\n      text-align: ${$textAlign};\n      z-index: ${$zIndex};\n    `,\n    typeof $maxWidth === 'string'\n      ? `max-width: ${$maxWidth};`\n      : `max-width: ${$maxWidth}px;`,\n  ]};\n`;\n\nexport const CloseButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":["large","padding","typography","small","TooltipTriggerWrapper","CloseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQN;AAkBH;;;;;;;AAmBD;AAGUC;;;;"}
+{"version":3,"file":"styles.cjs","sources":["../../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n  contents000,\n  contents999,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nimport type { TooltipSize, TooltipTextAlign } from './types';\n\nconst TOOLTIP_CONTENT_CONSTANTS: Record<\n  TooltipSize,\n  { padding: string; typography: TypographyStyle }\n> = {\n  large: {\n    padding: '8px 12px',\n    typography: 'Body1',\n  },\n  small: {\n    padding: '4px 8px',\n    typography: 'Body2',\n  },\n};\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n`;\n\nexport const TooltipTriggerWrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n`;\n\nexport const TooltipContent = styled(RadixTooltip.Content)<{\n  $size: TooltipSize;\n  $maxWidth: number | string;\n  $backgroundColor: string;\n  $contentColor: string;\n  $textAlign?: TooltipTextAlign;\n  $zIndex?: number;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ${contents999};\n  background-color: ${contents000};\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ${fadeIn} 200ms forwards;\n  gap: 4px;\n\n  ${({\n    $size,\n    $maxWidth,\n    $zIndex,\n    $backgroundColor,\n    $contentColor,\n    $textAlign,\n  }) => [\n    css`\n      padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};\n      ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};\n      background-color: ${$backgroundColor};\n      color: ${$contentColor};\n      text-align: ${$textAlign};\n      z-index: ${$zIndex};\n    `,\n    typeof $maxWidth === 'string'\n      ? `max-width: ${$maxWidth};`\n      : `max-width: ${$maxWidth}px;`,\n  ]};\n`;\n\nexport const CloseButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":["large","padding","typography","small"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;;;;AAS+C;AAQxC;;;AAAmD;AAkBtD;;;;;;AAMU;AAaX;;;;AAGqC;;;;"}

package/dist/primitive/src/Floating/Tooltip/styles.mjs

@@ -1,10 +1,8 @@
 "use client";
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import styled, { keyframes, css } from 'styled-components';
 import { contents999, contents000, getTypographyStyles } from '@remember-web/mixin';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 var TOOLTIP_CONTENT_CONSTANTS = {
   large: {
     padding: '8px 12px',
@@ -15,18 +13,27 @@ var TOOLTIP_CONTENT_CONSTANTS = {
     typography: 'Body2'
   }
 };
-var fadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n"])));
-var TooltipTriggerWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n"])));
-var TooltipContent = styled(RadixTooltip.Content)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ", " 200ms forwards;\n  gap: 4px;\n\n  ", ";\n"])), contents999, contents000, fadeIn, function (_ref) {
+var fadeIn = keyframes(["from{opacity:0}to{opacity:1;}"]);
+var TooltipTriggerWrapper = styled.div.withConfig({
+  displayName: "styles__TooltipTriggerWrapper",
+  componentId: "sc-sfqer9-0"
+})(["width:fit-content;height:fit-content;& > svg{display:block;}"]);
+var TooltipContent = styled(RadixTooltip.Content).withConfig({
+  displayName: "styles__TooltipContent",
+  componentId: "sc-sfqer9-1"
+})(["box-sizing:border-box;display:flex;white-space:pre-wrap;color:", ";background-color:", ";border-radius:4px;will-change:opacity;animation:", " 200ms forwards;gap:4px;", ";"], contents999, contents000, fadeIn, function (_ref) {
   var $size = _ref.$size,
     $maxWidth = _ref.$maxWidth,
     $zIndex = _ref.$zIndex,
     $backgroundColor = _ref.$backgroundColor,
     $contentColor = _ref.$contentColor,
     $textAlign = _ref.$textAlign;
-  return [css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding: ", ";\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      text-align: ", ";\n      z-index: ", ";\n    "])), TOOLTIP_CONTENT_CONSTANTS[$size].padding, getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography), $backgroundColor, $contentColor, $textAlign, $zIndex), typeof $maxWidth === 'string' ? "max-width: ".concat($maxWidth, ";") : "max-width: ".concat($maxWidth, "px;")];
+  return [css(["padding:", ";", ";background-color:", ";color:", ";text-align:", ";z-index:", ";"], TOOLTIP_CONTENT_CONSTANTS[$size].padding, getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography), $backgroundColor, $contentColor, $textAlign, $zIndex), typeof $maxWidth === 'string' ? "max-width: ".concat($maxWidth, ";") : "max-width: ".concat($maxWidth, "px;")];
 });
-var CloseButton = styled.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n"])));
+var CloseButton = styled.button.withConfig({
+  displayName: "styles__CloseButton",
+  componentId: "sc-sfqer9-2"
+})(["all:unset;appearance:none;cursor:pointer;& > svg{display:block;}"]);
 
 export { CloseButton, TooltipContent, TooltipTriggerWrapper };
 //# sourceMappingURL=styles.mjs.map

package/dist/primitive/src/Floating/Tooltip/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","sources":["../../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n  contents000,\n  contents999,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nimport type { TooltipSize, TooltipTextAlign } from './types';\n\nconst TOOLTIP_CONTENT_CONSTANTS: Record<\n  TooltipSize,\n  { padding: string; typography: TypographyStyle }\n> = {\n  large: {\n    padding: '8px 12px',\n    typography: 'Body1',\n  },\n  small: {\n    padding: '4px 8px',\n    typography: 'Body2',\n  },\n};\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n`;\n\nexport const TooltipTriggerWrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n`;\n\nexport const TooltipContent = styled(RadixTooltip.Content)<{\n  $size: TooltipSize;\n  $maxWidth: number | string;\n  $backgroundColor: string;\n  $contentColor: string;\n  $textAlign?: TooltipTextAlign;\n  $zIndex?: number;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ${contents999};\n  background-color: ${contents000};\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ${fadeIn} 200ms forwards;\n  gap: 4px;\n\n  ${({\n    $size,\n    $maxWidth,\n    $zIndex,\n    $backgroundColor,\n    $contentColor,\n    $textAlign,\n  }) => [\n    css`\n      padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};\n      ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};\n      background-color: ${$backgroundColor};\n      color: ${$contentColor};\n      text-align: ${$textAlign};\n      z-index: ${$zIndex};\n    `,\n    typeof $maxWidth === 'string'\n      ? `max-width: ${$maxWidth};`\n      : `max-width: ${$maxWidth}px;`,\n  ]};\n`;\n\nexport const CloseButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":["large","padding","typography","small","TooltipTriggerWrapper","CloseButton"],"mappings":";;;;;;AAAa;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQN;AAkBH;;;;;;;AAmBD;AAGUC;;"}
+{"version":3,"file":"styles.mjs","sources":["../../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n  contents000,\n  contents999,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nimport type { TooltipSize, TooltipTextAlign } from './types';\n\nconst TOOLTIP_CONTENT_CONSTANTS: Record<\n  TooltipSize,\n  { padding: string; typography: TypographyStyle }\n> = {\n  large: {\n    padding: '8px 12px',\n    typography: 'Body1',\n  },\n  small: {\n    padding: '4px 8px',\n    typography: 'Body2',\n  },\n};\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n`;\n\nexport const TooltipTriggerWrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n`;\n\nexport const TooltipContent = styled(RadixTooltip.Content)<{\n  $size: TooltipSize;\n  $maxWidth: number | string;\n  $backgroundColor: string;\n  $contentColor: string;\n  $textAlign?: TooltipTextAlign;\n  $zIndex?: number;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ${contents999};\n  background-color: ${contents000};\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ${fadeIn} 200ms forwards;\n  gap: 4px;\n\n  ${({\n    $size,\n    $maxWidth,\n    $zIndex,\n    $backgroundColor,\n    $contentColor,\n    $textAlign,\n  }) => [\n    css`\n      padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};\n      ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};\n      background-color: ${$backgroundColor};\n      color: ${$contentColor};\n      text-align: ${$textAlign};\n      z-index: ${$zIndex};\n    `,\n    typeof $maxWidth === 'string'\n      ? `max-width: ${$maxWidth};`\n      : `max-width: ${$maxWidth}px;`,\n  ]};\n`;\n\nexport const CloseButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":["large","padding","typography","small"],"mappings":";;;;;AAcA;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;;;;AAS+C;AAQxC;;;AAAmD;AAkBtD;;;;;;AAMU;AAaX;;;;AAGqC;;"}

package/dist/primitive/src/Inputs/Select/DesignedSelect/styles.cjs

@@ -1,45 +1,54 @@
 "use client";
 'use strict';
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
 var styles = require('../styles.cjs');
 
 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, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-var StyledSelect = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  ", "\n  border: 1px solid ", ";\n  ", ";\n\n  padding: 10px 36px 10px 12px;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ", "\n\n  ", ":focus-within & {\n    outline: none;\n    border-color: ", ";\n  }\n  ", ":not([aria-disabled='true']) & {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  }\n"])), mixin.ellipsis(), mixin.contents300, function (_ref) {
+var StyledSelect = styled__default.default.div.withConfig({
+  displayName: "styles__StyledSelect",
+  componentId: "sc-14m4ck5-0"
+})(["", " border:1px solid ", ";", ";padding:10px 36px 10px 12px;transition:border-color 0.2s,background-color 0.2s;", " ", ":focus-within &{outline:none;border-color:", ";}", ":not([aria-disabled='true']) &{@media (hover:hover){&:hover{background-color:", ";}}&:active{background-color:", ";}}"], mixin.ellipsis(), mixin.contents300, function (_ref) {
   var expandedDirection = _ref.expandedDirection;
   return {
-    none: styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n        border-radius: 4px;\n      "]))),
-    above: styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n        border-radius: 0 0 4px 4px;\n        border-top-color: transparent;\n      "]))),
-    below: styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n        border-radius: 4px 4px 0 0;\n        border-bottom-color: transparent;\n      "])))
+    none: styled.css(["border-radius:4px;"]),
+    above: styled.css(["border-radius:0 0 4px 4px;border-top-color:transparent;"]),
+    below: styled.css(["border-radius:4px 4px 0 0;border-bottom-color:transparent;"])
   }[expandedDirection !== null && expandedDirection !== void 0 ? expandedDirection : 'none'];
 }, function (_ref2) {
   var isPlaceholder = _ref2.isPlaceholder;
-  return isPlaceholder && styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n      color: ", ";\n    "])), mixin.contents200);
+  return isPlaceholder && styled.css(["color:", ";"], mixin.contents200);
 }, styles.SelectContainer, mixin.contents000, styles.SelectContainer, mixin.bg200, mixin.bg300);
-var SelectDownIcon = styled__default.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n"])));
-var SelectOptionWrapper = styled__default.default.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ", ";\n  background-color: ", ";\n  overflow-y: scroll;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ", ";\n\n  ", "\n\n  ", ":focus &, ", ":focus-within & {\n    outline: none;\n    border-color: ", ";\n  }\n"])), mixin.contents300, mixin.bg100, function (_ref3) {
+var SelectDownIcon = styled__default.default.div.withConfig({
+  displayName: "styles__SelectDownIcon",
+  componentId: "sc-14m4ck5-1"
+})(["position:absolute;right:12px;top:50%;transform:translateY(-50%);& > svg{display:block;}pointer-events:none;"]);
+var SelectOptionWrapper = styled__default.default.ul.withConfig({
+  displayName: "styles__SelectOptionWrapper",
+  componentId: "sc-14m4ck5-2"
+})(["all:unset;position:absolute;left:0;right:0;z-index:1;border:1px solid ", ";background-color:", ";overflow-y:scroll;overscroll-behavior:contain;transition:border-color 0.2s,background-color 0.2s;", ";", " ", ":focus &,", ":focus-within &{outline:none;border-color:", ";}"], mixin.contents300, mixin.bg100, function (_ref3) {
   var maxHeight = _ref3.maxHeight;
   if (!maxHeight) {
     return null;
   }
   if (typeof maxHeight === 'number') {
-    return styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n        max-height: ", "px;\n      "])), maxHeight);
+    return styled.css(["max-height:", "px;"], maxHeight);
   }
-  return styled.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n      max-height: ", ";\n    "])), maxHeight);
+  return styled.css(["max-height:", ";"], maxHeight);
 }, function (_ref4) {
   var expandedDirection = _ref4.expandedDirection;
-  return expandedDirection === 'below' ? styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n          top: calc(100% - 1px);\n          border-top: none;\n          border-radius: 0 0 4px 4px;\n        "]))) : styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n          bottom: calc(100% - 1px);\n          border-bottom: none;\n          border-radius: 4px 4px 0 0;\n        "])));
+  return expandedDirection === 'below' ? styled.css(["top:calc(100% - 1px);border-top:none;border-radius:0 0 4px 4px;"]) : styled.css(["bottom:calc(100% - 1px);border-bottom:none;border-radius:4px 4px 0 0;"]);
 }, styles.SelectContainer, styles.SelectContainer, mixin.contents000);
-var SelectOption = styled__default.default.li(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default.default(["\n  ", "\n  padding: 10px 12px;\n  color: ", ";\n\n  &[aria-disabled='true'] {\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    outline: none;\n  }\n\n  ", "\n"])), mixin.ellipsis(), mixin.contents000, mixin.contents300, mixin.bg200, function (_ref5) {
+var SelectOption = styled__default.default.li.withConfig({
+  displayName: "styles__SelectOption",
+  componentId: "sc-14m4ck5-3"
+})(["", " padding:10px 12px;color:", ";&[aria-disabled='true']{color:", ";}&:focus{background-color:", ";outline:none;}", ""], mixin.ellipsis(), mixin.contents000, mixin.contents300, mixin.bg200, function (_ref5) {
   var isSelected = _ref5.isSelected;
-  return isSelected && styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default.default(["\n      background-color: ", ";\n    "])), mixin.bg200);
+  return isSelected && styled.css(["background-color:", ";"], mixin.bg200);
 });
 
 exports.SelectDownIcon = SelectDownIcon;

package/dist/primitive/src/Inputs/Select/DesignedSelect/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","sources":["../../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n} from '@remember-web/mixin';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n  expandedDirection?: ExpandedType;\n  isPlaceholder?: boolean;\n}>`\n  ${ellipsis()}\n  border: 1px solid ${contents300};\n  ${({ expandedDirection }) =>\n    ({\n      none: css`\n        border-radius: 4px;\n      `,\n      above: css`\n        border-radius: 0 0 4px 4px;\n        border-top-color: transparent;\n      `,\n      below: css`\n        border-radius: 4px 4px 0 0;\n        border-bottom-color: transparent;\n      `,\n    }[expandedDirection ?? 'none'])};\n\n  padding: 10px 36px 10px 12px;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ isPlaceholder }) =>\n    isPlaceholder &&\n    css`\n      color: ${contents200};\n    `}\n\n  ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n  ${SelectContainer}:not([aria-disabled='true']) & {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ${bg200};\n      }\n    }\n\n    &:active {\n      background-color: ${bg300};\n    }\n  }\n`;\n\nexport const SelectDownIcon = styled.div`\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n  expandedDirection?: ExpandedType;\n  maxHeight?: number | string;\n}>`\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ${contents300};\n  background-color: ${bg100};\n  overflow-y: scroll;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ maxHeight }) => {\n    if (!maxHeight) {\n      return null;\n    }\n\n    if (typeof maxHeight === 'number') {\n      return css`\n        max-height: ${maxHeight}px;\n      `;\n    }\n\n    return css`\n      max-height: ${maxHeight};\n    `;\n  }};\n\n  ${({ expandedDirection }) =>\n    expandedDirection === 'below'\n      ? css`\n          top: calc(100% - 1px);\n          border-top: none;\n          border-radius: 0 0 4px 4px;\n        `\n      : css`\n          bottom: calc(100% - 1px);\n          border-bottom: none;\n          border-radius: 4px 4px 0 0;\n        `}\n\n  ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n`;\n\nexport const SelectOption = styled.li<{ isSelected?: boolean }>`\n  ${ellipsis()}\n  padding: 10px 12px;\n  color: ${contents000};\n\n  &[aria-disabled='true'] {\n    color: ${contents300};\n  }\n\n  &:focus {\n    background-color: ${bg200};\n    outline: none;\n  }\n\n  ${({ isSelected }) =>\n    isSelected &&\n    css`\n      background-color: ${bg200};\n    `}\n`;\n"],"names":["below","SelectDownIcon"],"mappings":";;;;;;;;;;;;;AAAa;AAgBN;AAMH;;;;AASEA;;AAI4B;AAK9B;;AAIC;AAmBQC;;AA4BU;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;AAQF;AAcH;;AAIC;;;;;"}
+{"version":3,"file":"styles.cjs","sources":["../../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n} from '@remember-web/mixin';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n  expandedDirection?: ExpandedType;\n  isPlaceholder?: boolean;\n}>`\n  ${ellipsis()}\n  border: 1px solid ${contents300};\n  ${({ expandedDirection }) =>\n    ({\n      none: css`\n        border-radius: 4px;\n      `,\n      above: css`\n        border-radius: 0 0 4px 4px;\n        border-top-color: transparent;\n      `,\n      below: css`\n        border-radius: 4px 4px 0 0;\n        border-bottom-color: transparent;\n      `,\n    }[expandedDirection ?? 'none'])};\n\n  padding: 10px 36px 10px 12px;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ isPlaceholder }) =>\n    isPlaceholder &&\n    css`\n      color: ${contents200};\n    `}\n\n  ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n  ${SelectContainer}:not([aria-disabled='true']) & {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ${bg200};\n      }\n    }\n\n    &:active {\n      background-color: ${bg300};\n    }\n  }\n`;\n\nexport const SelectDownIcon = styled.div`\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n  expandedDirection?: ExpandedType;\n  maxHeight?: number | string;\n}>`\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ${contents300};\n  background-color: ${bg100};\n  overflow-y: scroll;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ maxHeight }) => {\n    if (!maxHeight) {\n      return null;\n    }\n\n    if (typeof maxHeight === 'number') {\n      return css`\n        max-height: ${maxHeight}px;\n      `;\n    }\n\n    return css`\n      max-height: ${maxHeight};\n    `;\n  }};\n\n  ${({ expandedDirection }) =>\n    expandedDirection === 'below'\n      ? css`\n          top: calc(100% - 1px);\n          border-top: none;\n          border-radius: 0 0 4px 4px;\n        `\n      : css`\n          bottom: calc(100% - 1px);\n          border-bottom: none;\n          border-radius: 4px 4px 0 0;\n        `}\n\n  ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n`;\n\nexport const SelectOption = styled.li<{ isSelected?: boolean }>`\n  ${ellipsis()}\n  padding: 10px 12px;\n  color: ${contents000};\n\n  &[aria-disabled='true'] {\n    color: ${contents300};\n  }\n\n  &:focus {\n    background-color: ${bg200};\n    outline: none;\n  }\n\n  ${({ isSelected }) =>\n    isSelected &&\n    css`\n      background-color: ${bg200};\n    `}\n`;\n"],"names":["below"],"mappings":";;;;;;;;;;;;;;AAgBsC;AAMlC;;;;AASEA;;AAI4B;AAK9B;AAAgB;AAIf;;;;AAmBmC;;;;AAaI;AAerB;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;;;;AAQ4B;AAcjC;AAAa;AAIZ;;;;;"}

package/dist/primitive/src/Inputs/Select/DesignedSelect/styles.mjs

@@ -1,38 +1,48 @@
 "use client";
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import styled, { css } from 'styled-components';
 import { ellipsis, contents300, contents200, contents000, bg200, bg300, bg100 } from '@remember-web/mixin';
 import { SelectContainer } from '../styles.mjs';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-var StyledSelect = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  border: 1px solid ", ";\n  ", ";\n\n  padding: 10px 36px 10px 12px;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ", "\n\n  ", ":focus-within & {\n    outline: none;\n    border-color: ", ";\n  }\n  ", ":not([aria-disabled='true']) & {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  }\n"])), ellipsis(), contents300, function (_ref) {
+var StyledSelect = styled.div.withConfig({
+  displayName: "styles__StyledSelect",
+  componentId: "sc-14m4ck5-0"
+})(["", " border:1px solid ", ";", ";padding:10px 36px 10px 12px;transition:border-color 0.2s,background-color 0.2s;", " ", ":focus-within &{outline:none;border-color:", ";}", ":not([aria-disabled='true']) &{@media (hover:hover){&:hover{background-color:", ";}}&:active{background-color:", ";}}"], ellipsis(), contents300, function (_ref) {
   var expandedDirection = _ref.expandedDirection;
   return {
-    none: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        border-radius: 4px;\n      "]))),
-    above: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        border-radius: 0 0 4px 4px;\n        border-top-color: transparent;\n      "]))),
-    below: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        border-radius: 4px 4px 0 0;\n        border-bottom-color: transparent;\n      "])))
+    none: css(["border-radius:4px;"]),
+    above: css(["border-radius:0 0 4px 4px;border-top-color:transparent;"]),
+    below: css(["border-radius:4px 4px 0 0;border-bottom-color:transparent;"])
   }[expandedDirection !== null && expandedDirection !== void 0 ? expandedDirection : 'none'];
 }, function (_ref2) {
   var isPlaceholder = _ref2.isPlaceholder;
-  return isPlaceholder && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), contents200);
+  return isPlaceholder && css(["color:", ";"], contents200);
 }, SelectContainer, contents000, SelectContainer, bg200, bg300);
-var SelectDownIcon = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n"])));
-var SelectOptionWrapper = styled.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ", ";\n  background-color: ", ";\n  overflow-y: scroll;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ", ";\n\n  ", "\n\n  ", ":focus &, ", ":focus-within & {\n    outline: none;\n    border-color: ", ";\n  }\n"])), contents300, bg100, function (_ref3) {
+var SelectDownIcon = styled.div.withConfig({
+  displayName: "styles__SelectDownIcon",
+  componentId: "sc-14m4ck5-1"
+})(["position:absolute;right:12px;top:50%;transform:translateY(-50%);& > svg{display:block;}pointer-events:none;"]);
+var SelectOptionWrapper = styled.ul.withConfig({
+  displayName: "styles__SelectOptionWrapper",
+  componentId: "sc-14m4ck5-2"
+})(["all:unset;position:absolute;left:0;right:0;z-index:1;border:1px solid ", ";background-color:", ";overflow-y:scroll;overscroll-behavior:contain;transition:border-color 0.2s,background-color 0.2s;", ";", " ", ":focus &,", ":focus-within &{outline:none;border-color:", ";}"], contents300, bg100, function (_ref3) {
   var maxHeight = _ref3.maxHeight;
   if (!maxHeight) {
     return null;
   }
   if (typeof maxHeight === 'number') {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        max-height: ", "px;\n      "])), maxHeight);
+    return css(["max-height:", "px;"], maxHeight);
   }
-  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      max-height: ", ";\n    "])), maxHeight);
+  return css(["max-height:", ";"], maxHeight);
 }, function (_ref4) {
   var expandedDirection = _ref4.expandedDirection;
-  return expandedDirection === 'below' ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          top: calc(100% - 1px);\n          border-top: none;\n          border-radius: 0 0 4px 4px;\n        "]))) : css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          bottom: calc(100% - 1px);\n          border-bottom: none;\n          border-radius: 4px 4px 0 0;\n        "])));
+  return expandedDirection === 'below' ? css(["top:calc(100% - 1px);border-top:none;border-radius:0 0 4px 4px;"]) : css(["bottom:calc(100% - 1px);border-bottom:none;border-radius:4px 4px 0 0;"]);
 }, SelectContainer, SelectContainer, contents000);
-var SelectOption = styled.li(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  ", "\n  padding: 10px 12px;\n  color: ", ";\n\n  &[aria-disabled='true'] {\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    outline: none;\n  }\n\n  ", "\n"])), ellipsis(), contents000, contents300, bg200, function (_ref5) {
+var SelectOption = styled.li.withConfig({
+  displayName: "styles__SelectOption",
+  componentId: "sc-14m4ck5-3"
+})(["", " padding:10px 12px;color:", ";&[aria-disabled='true']{color:", ";}&:focus{background-color:", ";outline:none;}", ""], ellipsis(), contents000, contents300, bg200, function (_ref5) {
   var isSelected = _ref5.isSelected;
-  return isSelected && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), bg200);
+  return isSelected && css(["background-color:", ";"], bg200);
 });
 
 export { SelectDownIcon, SelectOption, SelectOptionWrapper, StyledSelect };

package/dist/primitive/src/Inputs/Select/DesignedSelect/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","sources":["../../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n} from '@remember-web/mixin';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n  expandedDirection?: ExpandedType;\n  isPlaceholder?: boolean;\n}>`\n  ${ellipsis()}\n  border: 1px solid ${contents300};\n  ${({ expandedDirection }) =>\n    ({\n      none: css`\n        border-radius: 4px;\n      `,\n      above: css`\n        border-radius: 0 0 4px 4px;\n        border-top-color: transparent;\n      `,\n      below: css`\n        border-radius: 4px 4px 0 0;\n        border-bottom-color: transparent;\n      `,\n    }[expandedDirection ?? 'none'])};\n\n  padding: 10px 36px 10px 12px;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ isPlaceholder }) =>\n    isPlaceholder &&\n    css`\n      color: ${contents200};\n    `}\n\n  ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n  ${SelectContainer}:not([aria-disabled='true']) & {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ${bg200};\n      }\n    }\n\n    &:active {\n      background-color: ${bg300};\n    }\n  }\n`;\n\nexport const SelectDownIcon = styled.div`\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n  expandedDirection?: ExpandedType;\n  maxHeight?: number | string;\n}>`\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ${contents300};\n  background-color: ${bg100};\n  overflow-y: scroll;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ maxHeight }) => {\n    if (!maxHeight) {\n      return null;\n    }\n\n    if (typeof maxHeight === 'number') {\n      return css`\n        max-height: ${maxHeight}px;\n      `;\n    }\n\n    return css`\n      max-height: ${maxHeight};\n    `;\n  }};\n\n  ${({ expandedDirection }) =>\n    expandedDirection === 'below'\n      ? css`\n          top: calc(100% - 1px);\n          border-top: none;\n          border-radius: 0 0 4px 4px;\n        `\n      : css`\n          bottom: calc(100% - 1px);\n          border-bottom: none;\n          border-radius: 4px 4px 0 0;\n        `}\n\n  ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n`;\n\nexport const SelectOption = styled.li<{ isSelected?: boolean }>`\n  ${ellipsis()}\n  padding: 10px 12px;\n  color: ${contents000};\n\n  &[aria-disabled='true'] {\n    color: ${contents300};\n  }\n\n  &:focus {\n    background-color: ${bg200};\n    outline: none;\n  }\n\n  ${({ isSelected }) =>\n    isSelected &&\n    css`\n      background-color: ${bg200};\n    `}\n`;\n"],"names":["below","SelectDownIcon"],"mappings":";;;;;;AAAa;AAgBN;AAMH;;;;AASEA;;AAI4B;AAK9B;;AAIC;AAmBQC;;AA4BU;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;AAQF;AAcH;;AAIC;;"}
+{"version":3,"file":"styles.mjs","sources":["../../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n} from '@remember-web/mixin';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n  expandedDirection?: ExpandedType;\n  isPlaceholder?: boolean;\n}>`\n  ${ellipsis()}\n  border: 1px solid ${contents300};\n  ${({ expandedDirection }) =>\n    ({\n      none: css`\n        border-radius: 4px;\n      `,\n      above: css`\n        border-radius: 0 0 4px 4px;\n        border-top-color: transparent;\n      `,\n      below: css`\n        border-radius: 4px 4px 0 0;\n        border-bottom-color: transparent;\n      `,\n    }[expandedDirection ?? 'none'])};\n\n  padding: 10px 36px 10px 12px;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ isPlaceholder }) =>\n    isPlaceholder &&\n    css`\n      color: ${contents200};\n    `}\n\n  ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n  ${SelectContainer}:not([aria-disabled='true']) & {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ${bg200};\n      }\n    }\n\n    &:active {\n      background-color: ${bg300};\n    }\n  }\n`;\n\nexport const SelectDownIcon = styled.div`\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n  expandedDirection?: ExpandedType;\n  maxHeight?: number | string;\n}>`\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ${contents300};\n  background-color: ${bg100};\n  overflow-y: scroll;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ maxHeight }) => {\n    if (!maxHeight) {\n      return null;\n    }\n\n    if (typeof maxHeight === 'number') {\n      return css`\n        max-height: ${maxHeight}px;\n      `;\n    }\n\n    return css`\n      max-height: ${maxHeight};\n    `;\n  }};\n\n  ${({ expandedDirection }) =>\n    expandedDirection === 'below'\n      ? css`\n          top: calc(100% - 1px);\n          border-top: none;\n          border-radius: 0 0 4px 4px;\n        `\n      : css`\n          bottom: calc(100% - 1px);\n          border-bottom: none;\n          border-radius: 4px 4px 0 0;\n        `}\n\n  ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n`;\n\nexport const SelectOption = styled.li<{ isSelected?: boolean }>`\n  ${ellipsis()}\n  padding: 10px 12px;\n  color: ${contents000};\n\n  &[aria-disabled='true'] {\n    color: ${contents300};\n  }\n\n  &:focus {\n    background-color: ${bg200};\n    outline: none;\n  }\n\n  ${({ isSelected }) =>\n    isSelected &&\n    css`\n      background-color: ${bg200};\n    `}\n`;\n"],"names":["below"],"mappings":";;;;;;;;AAgBsC;AAMlC;;;;AASEA;;AAI4B;AAK9B;AAAgB;AAIf;;;;AAmBmC;;;;AAaI;AAerB;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;;;;AAQ4B;AAcjC;AAAa;AAIZ;;"}

package/dist/primitive/src/Inputs/Select/NativeSelect/styles.cjs

@@ -1,19 +1,19 @@
 "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, _templateObject3;
-var StyledSelect = styled__default.default.select(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  all: unset;\n\n  ", "\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 10px 36px 10px 12px;\n  box-sizing: border-box;\n\n  ", "\n\n  width: ", ";\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:not(:disabled) {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  }\n"])), mixin.getTypographyStyles('Body1_M'), mixin.contents300, function (_ref) {
+var StyledSelect = styled__default.default.select.withConfig({
+  displayName: "styles__StyledSelect",
+  componentId: "sc-xnzpg1-0"
+})(["all:unset;", " border:1px solid ", ";border-radius:4px;padding:10px 36px 10px 12px;box-sizing:border-box;", " width:", ";transition:border-color 0.2s,background-color 0.2s;&:focus{border-color:", ";}&:not(:disabled){@media (hover:hover){&:hover{background-color:", ";}}&:active{background-color:", ";}}"], mixin.getTypographyStyles('Body1_M'), mixin.contents300, function (_ref) {
   var isPlaceholder = _ref.isPlaceholder;
-  return isPlaceholder && styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n      color: ", ";\n    "])), mixin.contents200);
+  return isPlaceholder && styled.css(["color:", ";"], mixin.contents200);
 }, function (_ref2) {
   var $width = _ref2.$width;
   if (!$width) {
@@ -24,7 +24,10 @@ var StyledSelect = styled__default.default.select(_templateObject || (_templateO
   }
   return $width;
 }, mixin.contents000, mixin.bg200, mixin.bg300);
-var SelectDownIcon = styled__default.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n"])));
+var SelectDownIcon = styled__default.default.div.withConfig({
+  displayName: "styles__SelectDownIcon",
+  componentId: "sc-xnzpg1-1"
+})(["position:absolute;right:12px;top:50%;transform:translateY(-50%);& > svg{display:block;}pointer-events:none;"]);
 
 exports.SelectDownIcon = SelectDownIcon;
 exports.StyledSelect = StyledSelect;

package/dist/primitive/src/Inputs/Select/NativeSelect/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","sources":["../../../../../../src/Inputs/Select/NativeSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg200,\n  bg300,\n  contents000,\n  contents200,\n  contents300,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nexport const StyledSelect = styled.select<{\n  $width?: number | string;\n  isPlaceholder?: boolean;\n}>`\n  all: unset;\n\n  ${getTypographyStyles('Body1_M')}\n  border: 1px solid ${contents300};\n  border-radius: 4px;\n  padding: 10px 36px 10px 12px;\n  box-sizing: border-box;\n\n  ${({ isPlaceholder }) =>\n    isPlaceholder &&\n    css`\n      color: ${contents200};\n    `}\n\n  width: ${({ $width }) => {\n    if (!$width) {\n      return null;\n    }\n\n    if (typeof $width === 'number') {\n      return `${$width}px`;\n    }\n\n    return $width;\n  }};\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  &:focus {\n    border-color: ${contents000};\n  }\n\n  &:not(:disabled) {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ${bg200};\n      }\n    }\n\n    &:active {\n      background-color: ${bg300};\n    }\n  }\n`;\nexport const SelectDownIcon = styled.div`\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n`;\n"],"names":["SelectDownIcon"],"mappings":";;;;;;;;;;;;AAAa;AAYN;AAYH;;AAIC;AAEsB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;AAoBWA;;;"}
+{"version":3,"file":"styles.cjs","sources":["../../../../../../src/Inputs/Select/NativeSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg200,\n  bg300,\n  contents000,\n  contents200,\n  contents300,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nexport const StyledSelect = styled.select<{\n  $width?: number | string;\n  isPlaceholder?: boolean;\n}>`\n  all: unset;\n\n  ${getTypographyStyles('Body1_M')}\n  border: 1px solid ${contents300};\n  border-radius: 4px;\n  padding: 10px 36px 10px 12px;\n  box-sizing: border-box;\n\n  ${({ isPlaceholder }) =>\n    isPlaceholder &&\n    css`\n      color: ${contents200};\n    `}\n\n  width: ${({ $width }) => {\n    if (!$width) {\n      return null;\n    }\n\n    if (typeof $width === 'number') {\n      return `${$width}px`;\n    }\n\n    return $width;\n  }};\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  &:focus {\n    border-color: ${contents000};\n  }\n\n  &:not(:disabled) {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ${bg200};\n      }\n    }\n\n    &:active {\n      background-color: ${bg300};\n    }\n  }\n`;\nexport const SelectDownIcon = styled.div`\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAYyC;AAYrC;AAAgB;AAIf;AAEsB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;;;AAoBsC;;;"}

package/dist/primitive/src/Inputs/Select/NativeSelect/styles.mjs

@@ -1,12 +1,13 @@
 "use client";
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import styled, { css } from 'styled-components';
 import { getTypographyStyles, contents300, contents200, contents000, bg200, bg300 } from '@remember-web/mixin';
 
-var _templateObject, _templateObject2, _templateObject3;
-var StyledSelect = styled.select(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n\n  ", "\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 10px 36px 10px 12px;\n  box-sizing: border-box;\n\n  ", "\n\n  width: ", ";\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:not(:disabled) {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  }\n"])), getTypographyStyles('Body1_M'), contents300, function (_ref) {
+var StyledSelect = styled.select.withConfig({
+  displayName: "styles__StyledSelect",
+  componentId: "sc-xnzpg1-0"
+})(["all:unset;", " border:1px solid ", ";border-radius:4px;padding:10px 36px 10px 12px;box-sizing:border-box;", " width:", ";transition:border-color 0.2s,background-color 0.2s;&:focus{border-color:", ";}&:not(:disabled){@media (hover:hover){&:hover{background-color:", ";}}&:active{background-color:", ";}}"], getTypographyStyles('Body1_M'), contents300, function (_ref) {
   var isPlaceholder = _ref.isPlaceholder;
-  return isPlaceholder && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), contents200);
+  return isPlaceholder && css(["color:", ";"], contents200);
 }, function (_ref2) {
   var $width = _ref2.$width;
   if (!$width) {
@@ -17,7 +18,10 @@ var StyledSelect = styled.select(_templateObject || (_templateObject = _taggedTe
   }
   return $width;
 }, contents000, bg200, bg300);
-var SelectDownIcon = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n"])));
+var SelectDownIcon = styled.div.withConfig({
+  displayName: "styles__SelectDownIcon",
+  componentId: "sc-xnzpg1-1"
+})(["position:absolute;right:12px;top:50%;transform:translateY(-50%);& > svg{display:block;}pointer-events:none;"]);
 
 export { SelectDownIcon, StyledSelect };
 //# sourceMappingURL=styles.mjs.map

package/dist/primitive/src/Inputs/Select/NativeSelect/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","sources":["../../../../../../src/Inputs/Select/NativeSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg200,\n  bg300,\n  contents000,\n  contents200,\n  contents300,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nexport const StyledSelect = styled.select<{\n  $width?: number | string;\n  isPlaceholder?: boolean;\n}>`\n  all: unset;\n\n  ${getTypographyStyles('Body1_M')}\n  border: 1px solid ${contents300};\n  border-radius: 4px;\n  padding: 10px 36px 10px 12px;\n  box-sizing: border-box;\n\n  ${({ isPlaceholder }) =>\n    isPlaceholder &&\n    css`\n      color: ${contents200};\n    `}\n\n  width: ${({ $width }) => {\n    if (!$width) {\n      return null;\n    }\n\n    if (typeof $width === 'number') {\n      return `${$width}px`;\n    }\n\n    return $width;\n  }};\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  &:focus {\n    border-color: ${contents000};\n  }\n\n  &:not(:disabled) {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ${bg200};\n      }\n    }\n\n    &:active {\n      background-color: ${bg300};\n    }\n  }\n`;\nexport const SelectDownIcon = styled.div`\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n`;\n"],"names":["SelectDownIcon"],"mappings":";;;;;AAAa;AAYN;AAYH;;AAIC;AAEsB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;AAoBWA;;"}
+{"version":3,"file":"styles.mjs","sources":["../../../../../../src/Inputs/Select/NativeSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg200,\n  bg300,\n  contents000,\n  contents200,\n  contents300,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nexport const StyledSelect = styled.select<{\n  $width?: number | string;\n  isPlaceholder?: boolean;\n}>`\n  all: unset;\n\n  ${getTypographyStyles('Body1_M')}\n  border: 1px solid ${contents300};\n  border-radius: 4px;\n  padding: 10px 36px 10px 12px;\n  box-sizing: border-box;\n\n  ${({ isPlaceholder }) =>\n    isPlaceholder &&\n    css`\n      color: ${contents200};\n    `}\n\n  width: ${({ $width }) => {\n    if (!$width) {\n      return null;\n    }\n\n    if (typeof $width === 'number') {\n      return `${$width}px`;\n    }\n\n    return $width;\n  }};\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  &:focus {\n    border-color: ${contents000};\n  }\n\n  &:not(:disabled) {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ${bg200};\n      }\n    }\n\n    &:active {\n      background-color: ${bg300};\n    }\n  }\n`;\nexport const SelectDownIcon = styled.div`\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n`;\n"],"names":[],"mappings":";;;;;;;AAYyC;AAYrC;AAAgB;AAIf;AAEsB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;;;AAoBsC;;"}