@sk-web-gui/core 3.13.1 → 3.15.0

package/dist/cjs/aria-plugin.js

@@ -14,8 +14,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const AriaAttributes = (0, _plugin.default)(function(param) {
-    let { addVariant } = param;
+const AriaAttributes = (0, _plugin.default)(function({ addVariant }) {
     const attributes = {
         checked: [
             'true',

package/dist/cjs/aria-plugin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/aria-plugin.ts"],"sourcesContent":["import TailwindPlugin from 'tailwindcss/plugin';\r\n\r\nexport const AriaAttributes = TailwindPlugin(function ({ addVariant }) {\r\n  const attributes: Record<string, Array<string>> = {\r\n    checked: ['true', 'false', 'mixed'],\r\n    disabled: ['true', 'false'],\r\n    expanded: ['true', 'false'],\r\n    hidden: ['true', 'false'],\r\n    orientation: ['horizontal', 'vertical'],\r\n    readonly: ['true', 'false'],\r\n    required: ['true', 'false'],\r\n    selected: ['true', 'false'],\r\n    sort: ['none', 'ascending', 'descending', 'other'],\r\n  };\r\n\r\n  Object.keys(attributes).forEach((key) => {\r\n    attributes[key].forEach((element) => {\r\n      let selector = `aria-${key}-${element}`;\r\n      if (element == 'true') {\r\n        selector = `aria-${key}`;\r\n      } else if (element == 'false') {\r\n        selector = `aria-!${key}`;\r\n      }\r\n      addVariant(selector, `&[aria-${key}=\"${element}\"]`);\r\n    });\r\n  });\r\n\r\n  const specialAttributes: Record<string, Array<string>> = {\r\n    haspopup: ['menu', 'listbox', 'tree', 'grid', 'dialog', 'true'],\r\n    current: ['true', 'page', 'step', 'location', 'date', 'time'],\r\n  };\r\n\r\n  Object.keys(specialAttributes).forEach((key) => {\r\n    const elements = specialAttributes[key];\r\n    const selector = `aria-${key}`;\r\n    addVariant(\r\n      selector,\r\n      elements.map((element) => `&[aria-${key}=\"${element}\"]`)\r\n    );\r\n  });\r\n\r\n  Object.keys(specialAttributes).forEach((key) => {\r\n    const selector = `aria-!${key}`;\r\n    addVariant(selector, `&[aria-${key}=\"${false}\"]`);\r\n  });\r\n});\r\n"],"names":["AriaAttributes","TailwindPlugin","addVariant","attributes","checked","disabled","expanded","hidden","orientation","readonly","required","selected","sort","Object","keys","forEach","key","element","selector","specialAttributes","haspopup","current","elements","map"],"mappings":";;;;+BAEaA;;;eAAAA;;;+DAFc;;;;;;AAEpB,MAAMA,iBAAiBC,IAAAA,eAAc,EAAC,SAAU,KAAc;QAAd,EAAEC,UAAU,EAAE,GAAd;IACrD,MAAMC,aAA4C;QAChDC,SAAS;YAAC;YAAQ;YAAS;SAAQ;QACnCC,UAAU;YAAC;YAAQ;SAAQ;QAC3BC,UAAU;YAAC;YAAQ;SAAQ;QAC3BC,QAAQ;YAAC;YAAQ;SAAQ;QACzBC,aAAa;YAAC;YAAc;SAAW;QACvCC,UAAU;YAAC;YAAQ;SAAQ;QAC3BC,UAAU;YAAC;YAAQ;SAAQ;QAC3BC,UAAU;YAAC;YAAQ;SAAQ;QAC3BC,MAAM;YAAC;YAAQ;YAAa;YAAc;SAAQ;IACpD;IAEAC,OAAOC,IAAI,CAACX,YAAYY,OAAO,CAAC,CAACC;QAC/Bb,UAAU,CAACa,IAAI,CAACD,OAAO,CAAC,CAACE;YACvB,IAAIC,WAAW,CAAC,KAAK,EAAEF,IAAI,CAAC,EAAEC,SAAS;YACvC,IAAIA,WAAW,QAAQ;gBACrBC,WAAW,CAAC,KAAK,EAAEF,KAAK;YAC1B,OAAO,IAAIC,WAAW,SAAS;gBAC7BC,WAAW,CAAC,MAAM,EAAEF,KAAK;YAC3B;YACAd,WAAWgB,UAAU,CAAC,OAAO,EAAEF,IAAI,EAAE,EAAEC,QAAQ,EAAE,CAAC;QACpD;IACF;IAEA,MAAME,oBAAmD;QACvDC,UAAU;YAAC;YAAQ;YAAW;YAAQ;YAAQ;YAAU;SAAO;QAC/DC,SAAS;YAAC;YAAQ;YAAQ;YAAQ;YAAY;YAAQ;SAAO;IAC/D;IAEAR,OAAOC,IAAI,CAACK,mBAAmBJ,OAAO,CAAC,CAACC;QACtC,MAAMM,WAAWH,iBAAiB,CAACH,IAAI;QACvC,MAAME,WAAW,CAAC,KAAK,EAAEF,KAAK;QAC9Bd,WACEgB,UACAI,SAASC,GAAG,CAAC,CAACN,UAAY,CAAC,OAAO,EAAED,IAAI,EAAE,EAAEC,QAAQ,EAAE,CAAC;IAE3D;IAEAJ,OAAOC,IAAI,CAACK,mBAAmBJ,OAAO,CAAC,CAACC;QACtC,MAAME,WAAW,CAAC,MAAM,EAAEF,KAAK;QAC/Bd,WAAWgB,UAAU,CAAC,OAAO,EAAEF,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC;IAClD;AACF"}
+{"version":3,"sources":["../../src/aria-plugin.ts"],"sourcesContent":["import TailwindPlugin from 'tailwindcss/plugin';\r\n\r\nexport const AriaAttributes = TailwindPlugin(function ({ addVariant }) {\r\n  const attributes: Record<string, Array<string>> = {\r\n    checked: ['true', 'false', 'mixed'],\r\n    disabled: ['true', 'false'],\r\n    expanded: ['true', 'false'],\r\n    hidden: ['true', 'false'],\r\n    orientation: ['horizontal', 'vertical'],\r\n    readonly: ['true', 'false'],\r\n    required: ['true', 'false'],\r\n    selected: ['true', 'false'],\r\n    sort: ['none', 'ascending', 'descending', 'other'],\r\n  };\r\n\r\n  Object.keys(attributes).forEach((key) => {\r\n    attributes[key].forEach((element) => {\r\n      let selector = `aria-${key}-${element}`;\r\n      if (element == 'true') {\r\n        selector = `aria-${key}`;\r\n      } else if (element == 'false') {\r\n        selector = `aria-!${key}`;\r\n      }\r\n      addVariant(selector, `&[aria-${key}=\"${element}\"]`);\r\n    });\r\n  });\r\n\r\n  const specialAttributes: Record<string, Array<string>> = {\r\n    haspopup: ['menu', 'listbox', 'tree', 'grid', 'dialog', 'true'],\r\n    current: ['true', 'page', 'step', 'location', 'date', 'time'],\r\n  };\r\n\r\n  Object.keys(specialAttributes).forEach((key) => {\r\n    const elements = specialAttributes[key];\r\n    const selector = `aria-${key}`;\r\n    addVariant(\r\n      selector,\r\n      elements.map((element) => `&[aria-${key}=\"${element}\"]`)\r\n    );\r\n  });\r\n\r\n  Object.keys(specialAttributes).forEach((key) => {\r\n    const selector = `aria-!${key}`;\r\n    addVariant(selector, `&[aria-${key}=\"${false}\"]`);\r\n  });\r\n});\r\n"],"names":["AriaAttributes","TailwindPlugin","addVariant","attributes","checked","disabled","expanded","hidden","orientation","readonly","required","selected","sort","Object","keys","forEach","key","element","selector","specialAttributes","haspopup","current","elements","map"],"mappings":";;;;+BAEaA;;;eAAAA;;;+DAFc;;;;;;AAEpB,MAAMA,iBAAiBC,IAAAA,eAAc,EAAC,SAAU,EAAEC,UAAU,EAAE;IACnE,MAAMC,aAA4C;QAChDC,SAAS;YAAC;YAAQ;YAAS;SAAQ;QACnCC,UAAU;YAAC;YAAQ;SAAQ;QAC3BC,UAAU;YAAC;YAAQ;SAAQ;QAC3BC,QAAQ;YAAC;YAAQ;SAAQ;QACzBC,aAAa;YAAC;YAAc;SAAW;QACvCC,UAAU;YAAC;YAAQ;SAAQ;QAC3BC,UAAU;YAAC;YAAQ;SAAQ;QAC3BC,UAAU;YAAC;YAAQ;SAAQ;QAC3BC,MAAM;YAAC;YAAQ;YAAa;YAAc;SAAQ;IACpD;IAEAC,OAAOC,IAAI,CAACX,YAAYY,OAAO,CAAC,CAACC;QAC/Bb,UAAU,CAACa,IAAI,CAACD,OAAO,CAAC,CAACE;YACvB,IAAIC,WAAW,CAAC,KAAK,EAAEF,IAAI,CAAC,EAAEC,SAAS;YACvC,IAAIA,WAAW,QAAQ;gBACrBC,WAAW,CAAC,KAAK,EAAEF,KAAK;YAC1B,OAAO,IAAIC,WAAW,SAAS;gBAC7BC,WAAW,CAAC,MAAM,EAAEF,KAAK;YAC3B;YACAd,WAAWgB,UAAU,CAAC,OAAO,EAAEF,IAAI,EAAE,EAAEC,QAAQ,EAAE,CAAC;QACpD;IACF;IAEA,MAAME,oBAAmD;QACvDC,UAAU;YAAC;YAAQ;YAAW;YAAQ;YAAQ;YAAU;SAAO;QAC/DC,SAAS;YAAC;YAAQ;YAAQ;YAAQ;YAAY;YAAQ;SAAO;IAC/D;IAEAR,OAAOC,IAAI,CAACK,mBAAmBJ,OAAO,CAAC,CAACC;QACtC,MAAMM,WAAWH,iBAAiB,CAACH,IAAI;QACvC,MAAME,WAAW,CAAC,KAAK,EAAEF,KAAK;QAC9Bd,WACEgB,UACAI,SAASC,GAAG,CAAC,CAACN,UAAY,CAAC,OAAO,EAAED,IAAI,EAAE,EAAEC,QAAQ,EAAE,CAAC;IAE3D;IAEAJ,OAAOC,IAAI,CAACK,mBAAmBJ,OAAO,CAAC,CAACC;QACtC,MAAME,WAAW,CAAC,MAAM,EAAEF,KAAK;QAC/Bd,WAAWgB,UAAU,CAAC,OAAO,EAAEF,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC;IAClD;AACF"}

package/dist/cjs/components/accordion.js

@@ -69,7 +69,7 @@ const Accordion = ()=>({
                 '.sk-disclosure-toggle': {
                     '@apply gap-12': {},
                     '.sk-icon': {
-                        '@apply w-20 h-20': {}
+                        '@apply w-20 min-h-20': {}
                     }
                 },
                 '.sk-disclosure-support': {
@@ -78,7 +78,7 @@ const Accordion = ()=>({
                 '&[data-variant="default"]': {
                     '.sk-disclosure-toggle': {
                         '@apply py-4': {},
-                        '@apply h-40': {}
+                        '@apply min-h-40': {}
                     },
                     '.sk-disclosure-header-icon': {
                         '@apply w-32 h-32': {}
@@ -96,7 +96,7 @@ const Accordion = ()=>({
                 '.sk-disclosure-toggle': {
                     '@apply gap-12': {},
                     '.sk-icon': {
-                        '@apply w-24 h-24': {}
+                        '@apply w-24 min-h-24': {}
                     }
                 },
                 '.sk-disclosure-support': {
@@ -105,7 +105,7 @@ const Accordion = ()=>({
                 '&[data-variant="default"]': {
                     '.sk-disclosure-toggle': {
                         '@apply py-8': {},
-                        '@apply h-56': {}
+                        '@apply min-h-56': {}
                     },
                     '.sk-disclosure-header-icon': {
                         '@apply w-40 h-40': {}
@@ -126,21 +126,28 @@ const Accordion = ()=>({
                 }
             },
             '&-body': {
+                '&[data-size="sm"]': {
+                    '@apply pr-12': {}
+                },
+                '&[data-size="md"]': {
+                    '@apply pr-12': {}
+                },
+                '&[data-size="lg"]': {
+                    '@apply pr-16': {}
+                },
                 '@apply text-base': {},
                 '@apply flex flex-col': {},
                 '@apply mb-32': {},
                 '@apply mr-32': {},
                 '@apply gap-8': {},
                 '@apply py-0': {},
-                '@apply h-0 overflow-hidden': {},
-                transitionProperty: 'visibility, height, padding, margin',
-                transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+                transitionProperty: 'visibility, height, opacity, padding, margin',
                 transitionDuration: '180ms',
                 '&[aria-hidden="true"], &[data-hidden="true"]': {
-                    '@apply my-0 invisible h-0': {}
+                    '@apply my-0 invisible max-h-0 opacity-0': {}
                 },
                 '&[aria-hidden="false"], &[data-hidden="false"]': {
-                    '@apply block h-max visible': {}
+                    '@apply block max-h-screen opacity-100 visible': {}
                 },
                 '&[data-variant="alt"]': {
                     '@apply mt-24': {},
@@ -165,11 +172,6 @@ const Accordion = ()=>({
                         }
                     }
                 }
-            },
-            '&-is-open': {
-                '.sk-disclosure-body': {
-                    '@apply overflow-visible animate-reset-overflow': {}
-                }
             }
         },
         '.sk-accordion': {

package/dist/cjs/components/accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/accordion.ts"],"sourcesContent":["export const Accordion = () => ({\r\n  '.sk-disclosure': {\r\n    '&-icon': {\r\n      '@apply flex self-center': {},\r\n    },\r\n    '&-header': {\r\n      '@apply mt-6 mb-8': {},\r\n      '@apply flex flex-col text-left': {},\r\n      '@apply cursor-pointer': {},\r\n      '*': {\r\n        '@apply cursor-pointer': {},\r\n      },\r\n      '&:focus-visible': {\r\n        '@apply outline-0': {},\r\n      },\r\n\r\n      '&-icon': {\r\n        '@apply ml-auto': {},\r\n        '@apply text-dark-secondary': {},\r\n        svg: {\r\n          '@apply w-20 h-20': {},\r\n        },\r\n      },\r\n      '&[data-disabled=\"true\"]': {\r\n        '@apply text-dark-disabled': {},\r\n        '.sk-disclosure-title': {\r\n          '@apply text-dark-disabled': {},\r\n        },\r\n        '@apply cursor-default': {},\r\n        '*': {\r\n          '@apply cursor-default': {},\r\n        },\r\n      },\r\n    },\r\n    '&-label': {\r\n      '@apply shrink-0': {},\r\n    },\r\n    '&-toggle': {\r\n      '@apply flex items-center justify-between': {},\r\n      '@apply gap-16': {},\r\n      '.sk-icon': {\r\n        '@apply w-32 h-32': {},\r\n      },\r\n    },\r\n    '&-title': {\r\n      '@apply text-dark-primary': {},\r\n      '&-wrapper': {\r\n        '@apply w-full': {},\r\n        '@apply flex flex-row': {},\r\n        '@apply items-center': {},\r\n      },\r\n    },\r\n\r\n    '&-sm': {\r\n      '.sk-disclosure-title': {\r\n        '@apply text-h4-sm font-bold': {},\r\n        '&-wrapper': {\r\n          '@apply gap-12': {},\r\n        },\r\n      },\r\n      '.sk-disclosure-toggle': {\r\n        '@apply gap-12': {},\r\n        '.sk-icon': {\r\n          '@apply w-20 h-20': {},\r\n        },\r\n      },\r\n      '.sk-disclosure-support': {\r\n        '@apply text-small': {},\r\n      },\r\n      '&[data-variant=\"default\"]': {\r\n        '.sk-disclosure-toggle': {\r\n          '@apply py-4': {},\r\n          '@apply h-40': {},\r\n        },\r\n        '.sk-disclosure-header-icon': {\r\n          '@apply w-32 h-32': {},\r\n        },\r\n      },\r\n      '&[data-variant=\"alt\"]': {},\r\n    },\r\n    '&-md': {\r\n      '.sk-disclosure-title': {\r\n        '@apply text-h4-md font-bold': {},\r\n        '&-wrapper': {\r\n          '@apply gap-12': {},\r\n        },\r\n      },\r\n      '.sk-disclosure-toggle': {\r\n        '@apply gap-12': {},\r\n        '.sk-icon': {\r\n          '@apply w-24 h-24': {},\r\n        },\r\n      },\r\n      '.sk-disclosure-support': {\r\n        '@apply text-body': {},\r\n      },\r\n      '&[data-variant=\"default\"]': {\r\n        '.sk-disclosure-toggle': {\r\n          '@apply py-8': {},\r\n          '@apply h-56': {},\r\n        },\r\n        '.sk-disclosure-header-icon': {\r\n          '@apply w-40 h-40': {},\r\n        },\r\n      },\r\n    },\r\n    '&-lg': {\r\n      '&[data-variant=\"alt\"]': {\r\n        '.sk-disclosure-support': {\r\n          '@apply text-large': {},\r\n        },\r\n        '.sk-disclosure-title': {\r\n          '@apply text-h3-md font-bold': {},\r\n          '&-wrapper': {\r\n            '@apply gap-16': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-body': {\r\n      '@apply text-base': {},\r\n      '@apply flex flex-col': {},\r\n      '@apply mb-32': {},\r\n      '@apply mr-32': {},\r\n      '@apply gap-8': {},\r\n      '@apply py-0': {},\r\n      '@apply h-0 overflow-hidden': {},\r\n      transitionProperty: 'visibility, height, padding, margin',\r\n      transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',\r\n      transitionDuration: '180ms',\r\n\r\n      '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n        '@apply my-0 invisible h-0': {},\r\n      },\r\n\r\n      '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n        '@apply block h-max visible': {},\r\n      },\r\n\r\n      '&[data-variant=\"alt\"]': {\r\n        '@apply mt-24': {},\r\n        '&[data-size=\"sm\"]': {\r\n          '@apply pr-12': {},\r\n        },\r\n        '&[data-size=\"md\"]': {\r\n          '@apply pr-12': {},\r\n        },\r\n        '&[data-size=\"lg\"]': {\r\n          '@apply pr-16': {},\r\n        },\r\n        '&[data-has-icon=\"true\"]': {\r\n          '&[data-size=\"sm\"]': {\r\n            '@apply ml-32': {},\r\n          },\r\n          '&[data-size=\"md\"]': {\r\n            '@apply ml-36': {},\r\n          },\r\n          '&[data-size=\"lg\"]': {\r\n            '@apply ml-48': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-is-open': {\r\n      '.sk-disclosure-body': {\r\n        '@apply overflow-visible animate-reset-overflow': {},\r\n      },\r\n    },\r\n  },\r\n  '.sk-accordion': {\r\n    '&-item': {\r\n      '.sk-disclosure': {\r\n        transitionProperty: 'margin',\r\n        transitionDuration: '180ms',\r\n        '@apply border-b-1 border-divider': {},\r\n      },\r\n\r\n      '&:last-child .sk-disclosure': {\r\n        '@apply border-b-transparent': {},\r\n      },\r\n    },\r\n  },\r\n\r\n  '&[data-inverted=\"true\"]': {\r\n    '&.sk-disclosure': {\r\n      '&-icon': {\r\n        '@apply text-inverted-dark-secondary': {},\r\n      },\r\n\r\n      '&[data-disabled=\"true\"]': {\r\n        '@apply text-inverted-dark-disabled': {},\r\n        '.sk-disclosure-title': {\r\n          '@apply text-inverted-dark-disabled': {},\r\n        },\r\n      },\r\n\r\n      '&-title': {\r\n        '@apply text-inverted-dark-primary': {},\r\n      },\r\n    },\r\n    '&.sk-accordion': {\r\n      '&-item': {\r\n        '@apply border-inverted-divider': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"names":["Accordion","svg","transitionProperty","transitionTimingFunction","transitionDuration"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/accordion.ts"],"sourcesContent":["export const Accordion = () => ({\r\n  '.sk-disclosure': {\r\n    '&-icon': {\r\n      '@apply flex self-center': {},\r\n    },\r\n    '&-header': {\r\n      '@apply mt-6 mb-8': {},\r\n      '@apply flex flex-col text-left': {},\r\n      '@apply cursor-pointer': {},\r\n      '*': {\r\n        '@apply cursor-pointer': {},\r\n      },\r\n      '&:focus-visible': {\r\n        '@apply outline-0': {},\r\n      },\r\n\r\n      '&-icon': {\r\n        '@apply ml-auto': {},\r\n        '@apply text-dark-secondary': {},\r\n        svg: {\r\n          '@apply w-20 h-20': {},\r\n        },\r\n      },\r\n      '&[data-disabled=\"true\"]': {\r\n        '@apply text-dark-disabled': {},\r\n        '.sk-disclosure-title': {\r\n          '@apply text-dark-disabled': {},\r\n        },\r\n        '@apply cursor-default': {},\r\n        '*': {\r\n          '@apply cursor-default': {},\r\n        },\r\n      },\r\n    },\r\n    '&-label': {\r\n      '@apply shrink-0': {},\r\n    },\r\n    '&-toggle': {\r\n      '@apply flex items-center justify-between': {},\r\n      '@apply gap-16': {},\r\n      '.sk-icon': {\r\n        '@apply w-32 h-32': {},\r\n      },\r\n    },\r\n    '&-title': {\r\n      '@apply text-dark-primary': {},\r\n      '&-wrapper': {\r\n        '@apply w-full': {},\r\n        '@apply flex flex-row': {},\r\n        '@apply items-center': {},\r\n      },\r\n    },\r\n\r\n    '&-sm': {\r\n      '.sk-disclosure-title': {\r\n        '@apply text-h4-sm font-bold': {},\r\n        '&-wrapper': {\r\n          '@apply gap-12': {},\r\n        },\r\n      },\r\n      '.sk-disclosure-toggle': {\r\n        '@apply gap-12': {},\r\n        '.sk-icon': {\r\n          '@apply w-20 min-h-20': {},\r\n        },\r\n      },\r\n      '.sk-disclosure-support': {\r\n        '@apply text-small': {},\r\n      },\r\n      '&[data-variant=\"default\"]': {\r\n        '.sk-disclosure-toggle': {\r\n          '@apply py-4': {},\r\n          '@apply min-h-40': {},\r\n        },\r\n        '.sk-disclosure-header-icon': {\r\n          '@apply w-32 h-32': {},\r\n        },\r\n      },\r\n      '&[data-variant=\"alt\"]': {},\r\n    },\r\n    '&-md': {\r\n      '.sk-disclosure-title': {\r\n        '@apply text-h4-md font-bold': {},\r\n        '&-wrapper': {\r\n          '@apply gap-12': {},\r\n        },\r\n      },\r\n      '.sk-disclosure-toggle': {\r\n        '@apply gap-12': {},\r\n        '.sk-icon': {\r\n          '@apply w-24 min-h-24': {},\r\n        },\r\n      },\r\n      '.sk-disclosure-support': {\r\n        '@apply text-body': {},\r\n      },\r\n      '&[data-variant=\"default\"]': {\r\n        '.sk-disclosure-toggle': {\r\n          '@apply py-8': {},\r\n          '@apply min-h-56': {},\r\n        },\r\n        '.sk-disclosure-header-icon': {\r\n          '@apply w-40 h-40': {},\r\n        },\r\n      },\r\n    },\r\n    '&-lg': {\r\n      '&[data-variant=\"alt\"]': {\r\n        '.sk-disclosure-support': {\r\n          '@apply text-large': {},\r\n        },\r\n        '.sk-disclosure-title': {\r\n          '@apply text-h3-md font-bold': {},\r\n          '&-wrapper': {\r\n            '@apply gap-16': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-body': {\r\n      '&[data-size=\"sm\"]': {\r\n        '@apply pr-12': {},\r\n      },\r\n      '&[data-size=\"md\"]': {\r\n        '@apply pr-12': {},\r\n      },\r\n      '&[data-size=\"lg\"]': {\r\n        '@apply pr-16': {},\r\n      },\r\n      '@apply text-base': {},\r\n      '@apply flex flex-col': {},\r\n      '@apply mb-32': {},\r\n      '@apply mr-32': {},\r\n      '@apply gap-8': {},\r\n      '@apply py-0': {},\r\n      transitionProperty: 'visibility, height, opacity, padding, margin',\r\n\r\n      transitionDuration: '180ms',\r\n\r\n      '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n        '@apply my-0 invisible max-h-0 opacity-0': {},\r\n      },\r\n\r\n      '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n        '@apply block max-h-screen opacity-100 visible': {},\r\n      },\r\n\r\n      '&[data-variant=\"alt\"]': {\r\n        '@apply mt-24': {},\r\n        '&[data-size=\"sm\"]': {\r\n          '@apply pr-12': {},\r\n        },\r\n        '&[data-size=\"md\"]': {\r\n          '@apply pr-12': {},\r\n        },\r\n        '&[data-size=\"lg\"]': {\r\n          '@apply pr-16': {},\r\n        },\r\n        '&[data-has-icon=\"true\"]': {\r\n          '&[data-size=\"sm\"]': {\r\n            '@apply ml-32': {},\r\n          },\r\n          '&[data-size=\"md\"]': {\r\n            '@apply ml-36': {},\r\n          },\r\n          '&[data-size=\"lg\"]': {\r\n            '@apply ml-48': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n  },\r\n  '.sk-accordion': {\r\n    '&-item': {\r\n      '.sk-disclosure': {\r\n        transitionProperty: 'margin',\r\n        transitionDuration: '180ms',\r\n        '@apply border-b-1 border-divider': {},\r\n      },\r\n\r\n      '&:last-child .sk-disclosure': {\r\n        '@apply border-b-transparent': {},\r\n      },\r\n    },\r\n  },\r\n\r\n  '&[data-inverted=\"true\"]': {\r\n    '&.sk-disclosure': {\r\n      '&-icon': {\r\n        '@apply text-inverted-dark-secondary': {},\r\n      },\r\n\r\n      '&[data-disabled=\"true\"]': {\r\n        '@apply text-inverted-dark-disabled': {},\r\n        '.sk-disclosure-title': {\r\n          '@apply text-inverted-dark-disabled': {},\r\n        },\r\n      },\r\n\r\n      '&-title': {\r\n        '@apply text-inverted-dark-primary': {},\r\n      },\r\n    },\r\n    '&.sk-accordion': {\r\n      '&-item': {\r\n        '@apply border-inverted-divider': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"names":["Accordion","svg","transitionProperty","transitionDuration"],"mappings":"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"}

package/dist/cjs/components/badge.js

@@ -15,9 +15,16 @@ const Badge = (colors)=>({
             '@apply text-light-primary': {},
             '@apply rounded-utility': {},
             '@apply overflow-hidden': {},
-            // size
-            '@apply h-24 w-24': {},
-            '@apply text-label-small': {},
+            '&[data-size="sm"]': {
+                '@apply h-22 min-w-22': {},
+                '@apply p-4': {},
+                '@apply text-label-extra-small': {}
+            },
+            '&[data-size="md"]': {
+                '@apply h-24 min-w-24': {},
+                '@apply p-4': {},
+                '@apply text-label-small': {}
+            },
             '&[data-rounded="true"]': {
                 '@apply rounded-circular': {}
             },

package/dist/cjs/components/badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/badge.ts"],"sourcesContent":["export const Badge = (colors: string[]) => ({\r\n  '.sk-badge': {\r\n    '@apply inline-flex': {},\r\n    '@apply justify-center items-center': {},\r\n    '@apply text-light-primary': {},\r\n    '@apply rounded-utility': {},\r\n    '@apply overflow-hidden': {},\r\n\r\n    // size\r\n    '@apply h-24 w-24': {},\r\n    '@apply text-label-small': {},\r\n\r\n    '&[data-rounded=\"true\"]': {\r\n      '@apply rounded-circular': {},\r\n    },\r\n\r\n    ...colors.reduce(\r\n      (styles, color) => ({\r\n        ...styles,\r\n        [`&[data-color=\"${color}\"]`]: {\r\n          [`@apply bg-${color}-surface-primary  text-${color}-text-secondary`]: {},\r\n\r\n          '&[data-inverted=\"true\"]': {\r\n            '@apply text-inverted-light-primary': {},\r\n            [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary`]: {},\r\n          },\r\n        },\r\n      }),\r\n      {}\r\n    ),\r\n\r\n    \"&[data-color='tertiary']\": {\r\n      '@apply bg-primary-surface': {},\r\n\r\n      '&[data-inverted=\"true\"]': {\r\n        '@apply text-inverted-light-primary': {},\r\n        '@apply bg-tertiary-surface dark:bg-inverted-primary-surface': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"names":["Badge","colors","reduce","styles","color"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,QAAQ,CAACC,SAAsB,CAAA;QAC1C,aAAa;YACX,sBAAsB,CAAC;YACvB,sCAAsC,CAAC;YACvC,6BAA6B,CAAC;YAC9B,0BAA0B,CAAC;YAC3B,0BAA0B,CAAC;YAE3B,OAAO;YACP,oBAAoB,CAAC;YACrB,2BAA2B,CAAC;YAE5B,0BAA0B;gBACxB,2BAA2B,CAAC;YAC9B;YAEA,GAAGA,OAAOC,MAAM,CACd,CAACC,QAAQC,QAAW,CAAA;oBAClB,GAAGD,MAAM;oBACT,CAAC,CAAC,cAAc,EAAEC,MAAM,EAAE,CAAC,CAAC,EAAE;wBAC5B,CAAC,CAAC,UAAU,EAAEA,MAAM,uBAAuB,EAAEA,MAAM,eAAe,CAAC,CAAC,EAAE,CAAC;wBAEvE,2BAA2B;4BACzB,sCAAsC,CAAC;4BACvC,CAAC,CAAC,mBAAmB,EAAEA,MAAM,+BAA+B,EAAEA,MAAM,eAAe,CAAC,CAAC,EAAE,CAAC;wBAC1F;oBACF;gBACF,CAAA,GACA,CAAC,EACF;YAED,4BAA4B;gBAC1B,6BAA6B,CAAC;gBAE9B,2BAA2B;oBACzB,sCAAsC,CAAC;oBACvC,+DAA+D,CAAC;gBAClE;YACF;QACF;IACF,CAAA"}
+{"version":3,"sources":["../../../src/components/badge.ts"],"sourcesContent":["export const Badge = (colors: string[]) => ({\r\n  '.sk-badge': {\r\n    '@apply inline-flex': {},\r\n    '@apply justify-center items-center': {},\r\n    '@apply text-light-primary': {},\r\n    '@apply rounded-utility': {},\r\n    '@apply overflow-hidden': {},\r\n\r\n    '&[data-size=\"sm\"]': {\r\n      '@apply h-22 min-w-22': {},\r\n      '@apply p-4': {},\r\n      '@apply text-label-extra-small': {},\r\n    },\r\n    '&[data-size=\"md\"]': {\r\n      '@apply h-24 min-w-24': {},\r\n      '@apply p-4': {},\r\n      '@apply text-label-small': {},\r\n    },\r\n\r\n    '&[data-rounded=\"true\"]': {\r\n      '@apply rounded-circular': {},\r\n    },\r\n\r\n    ...colors.reduce(\r\n      (styles, color) => ({\r\n        ...styles,\r\n        [`&[data-color=\"${color}\"]`]: {\r\n          [`@apply bg-${color}-surface-primary  text-${color}-text-secondary`]: {},\r\n\r\n          '&[data-inverted=\"true\"]': {\r\n            '@apply text-inverted-light-primary': {},\r\n            [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary`]: {},\r\n          },\r\n        },\r\n      }),\r\n      {}\r\n    ),\r\n\r\n    \"&[data-color='tertiary']\": {\r\n      '@apply bg-primary-surface': {},\r\n\r\n      '&[data-inverted=\"true\"]': {\r\n        '@apply text-inverted-light-primary': {},\r\n        '@apply bg-tertiary-surface dark:bg-inverted-primary-surface': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"names":["Badge","colors","reduce","styles","color"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,QAAQ,CAACC,SAAsB,CAAA;QAC1C,aAAa;YACX,sBAAsB,CAAC;YACvB,sCAAsC,CAAC;YACvC,6BAA6B,CAAC;YAC9B,0BAA0B,CAAC;YAC3B,0BAA0B,CAAC;YAE3B,qBAAqB;gBACnB,wBAAwB,CAAC;gBACzB,cAAc,CAAC;gBACf,iCAAiC,CAAC;YACpC;YACA,qBAAqB;gBACnB,wBAAwB,CAAC;gBACzB,cAAc,CAAC;gBACf,2BAA2B,CAAC;YAC9B;YAEA,0BAA0B;gBACxB,2BAA2B,CAAC;YAC9B;YAEA,GAAGA,OAAOC,MAAM,CACd,CAACC,QAAQC,QAAW,CAAA;oBAClB,GAAGD,MAAM;oBACT,CAAC,CAAC,cAAc,EAAEC,MAAM,EAAE,CAAC,CAAC,EAAE;wBAC5B,CAAC,CAAC,UAAU,EAAEA,MAAM,uBAAuB,EAAEA,MAAM,eAAe,CAAC,CAAC,EAAE,CAAC;wBAEvE,2BAA2B;4BACzB,sCAAsC,CAAC;4BACvC,CAAC,CAAC,mBAAmB,EAAEA,MAAM,+BAA+B,EAAEA,MAAM,eAAe,CAAC,CAAC,EAAE,CAAC;wBAC1F;oBACF;gBACF,CAAA,GACA,CAAC,EACF;YAED,4BAA4B;gBAC1B,6BAA6B,CAAC;gBAE9B,2BAA2B;oBACzB,sCAAsC,CAAC;oBACvC,+DAA+D,CAAC;gBAClE;YACF;QACF;IACF,CAAA"}

package/dist/cjs/components/card.js

@@ -217,6 +217,15 @@ const Card = (colors)=>({
             '@apply no-underline hover:no-underline': {},
             '@apply flex bg-vattjom-surface-accent': {},
             '@apply p-14 rounded-groups': {},
+            '&.sk-meta-card-use-hover-effect:hover': {
+                '@apply cursor-pointer': {}
+            },
+            '&.sk-meta-card-use-hover-effect[data-color="vattjom"]:hover': {
+                '@apply bg-vattjom-background-300': {}
+            },
+            '&.sk-meta-card-use-hover-effect[data-color="mono"]:hover': {
+                '@apply bg-primitives-overlay-darken-2 dark:bg-primitives-overlay-lighten-2': {}
+            },
             '&[data-color="mono"]': {
                 '@apply bg-primitives-overlay-darken-1 dark:bg-primitives-overlay-lighten-1': {}
             },
@@ -235,21 +244,46 @@ const Card = (colors)=>({
             '&-body': {
                 '&-header': {
                     'h1, h2, h3, h4, h5, h6, h7, a, p': {
-                        '@apply mt-6 text-base line-clamp-1': {},
+                        '@apply mt-6 line-clamp-1': {},
                         '@apply text-dark-primary': {}
                     }
                 },
                 '&-content': {
                     'p, a': {
-                        '@apply text-primitives-gray-700 dark:text-primitives-gray-200 text-small': {},
+                        '@apply text-primitives-gray-700 dark:text-primitives-gray-200': {},
                         '@apply text-dark-secondary line-clamp-1': {}
                     }
                 }
             },
             '&-external-link-icon': {
-                '@apply ml-auto h-32 w-32': {},
-                '@apply p-6 text-dark': {}
+                '@apply ml-auto h-32 w-32 p-6 text-dark shrink-0': {}
             }
+        },
+        '.sk-meta-card[data-size="sm"]': {
+            '@apply h-[8.6rem]': {}
+        },
+        '.sk-meta-card[data-size="md"]': {
+            '@apply h-[9.4rem]': {}
+        },
+        '.sk-meta-card[data-size="sm"] .sk-meta-card-body-header': {
+            'h1, h2, h3, h4, h5, h6, h7, a, p': {
+                fontSize: '1.6rem ',
+                lineHeight: '2.4rem ',
+                fontWeight: 'bold '
+            }
+        },
+        '.sk-meta-card[data-size="sm"] .sk-meta-card-body-content': {
+            '@apply text-[1.4rem]': {}
+        },
+        '.sk-meta-card[data-size="md"] .sk-meta-card-body-header': {
+            'h1, h2, h3, h4, h5, h6, h7, a, p': {
+                fontSize: '1.8rem',
+                lineHeight: '2.6rem',
+                fontWeight: 'bold'
+            }
+        },
+        '.sk-meta-card[data-size="md"] .sk-meta-card-body-content': {
+            '@apply text-[1.6rem]': {}
         }
     });
 

package/dist/cjs/components/card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/card.ts"],"sourcesContent":["export const Card = (colors: string[]) => ({\r\n  '.sk-card': {\r\n    '@apply text-base': {},\r\n    '@apply bg-white relative rounded-b-cards rounded-cards': {},\r\n    '@apply flex flex-col': {},\r\n    '@apply no-underline hover:no-underline': {},\r\n    '@apply h-full': {},\r\n\r\n    '&-wrapper': {\r\n      '@apply grid': {},\r\n    },\r\n\r\n    '&-image': {\r\n      '@apply object-cover grow': {},\r\n      '@apply rounded-t-cards': {},\r\n    },\r\n\r\n    '&-body': {\r\n      '@apply px-24 pb-24 pt-16 rounded-b-cards': {},\r\n      '@apply shrink': {},\r\n\r\n      '&-wrapper': {\r\n        '@apply flex': {},\r\n      },\r\n\r\n      '&-meta': {\r\n        '@apply flex space-x-12 mt-16 text-base': {},\r\n        span: {\r\n          '@apply flex space-x-4 items-center': {},\r\n          time: {\r\n            '@apply h-24': {},\r\n          },\r\n        },\r\n\r\n        '&.sk-card-image': {\r\n          '@apply min-h-[12.5em] max-h-[20em]': {},\r\n        },\r\n      },\r\n\r\n      '&-header': {\r\n        'h1, h2, h3, h4, h5, h6, h7, a': {\r\n          '@apply line-clamp-1 text-h3-md text-dark-primary mt-16': {},\r\n        },\r\n        span: {\r\n          '@apply pl-12': {},\r\n        },\r\n      },\r\n\r\n      '&-content': {\r\n        '@apply w-full': {},\r\n        'p, a': {\r\n          '@apply line-clamp-3 m-0 pt-8 text-base text-body': {},\r\n        },\r\n      },\r\n\r\n      '&-icon': {\r\n        '@apply hidden': {},\r\n      },\r\n    },\r\n\r\n    ...colors.reduce(\r\n      (styles, color) => ({\r\n        ...styles,\r\n\r\n        '&[data-color=\"mono\"], &[data-color=\"tertiary\"]': {\r\n          '@apply border-solid border-1': {},\r\n          '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},\r\n          '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {},\r\n\r\n          '.sk-card-body-meta': {\r\n            '@apply text-dark-secondary': {},\r\n          },\r\n\r\n          '.sk-card-body-icon': {\r\n            '@apply bg-primitives-overlay-darken-9 dark:bg-primitives-overlay-lighten-10': {},\r\n            '@apply text-primitives-gray-lightest dark:text-primitives-overlay-darken-9': {},\r\n            '@apply hover:bg-primitives-overlay-darken-10 dark:hover:bg-primitives-gray-lightest': {},\r\n          },\r\n\r\n          // inverted.\r\n          [`&[data-inverted=\"true\"]`]: {\r\n            '@apply bg-primitives-gray-800': {},\r\n\r\n            '.sk-card-body': {\r\n              // Meta\r\n              '&-meta': {\r\n                span: {\r\n                  '@apply text-light-secondary': {},\r\n                },\r\n              },\r\n\r\n              // header\r\n              '&-header': {\r\n                'h1, h2, h3, h4, h5, h6, h7, a': {\r\n                  [`@apply text-light-primary`]: {},\r\n                },\r\n              },\r\n\r\n              // Content\r\n              '&-content': {\r\n                'p, a': {\r\n                  [`@apply text-light-secondary`]: {},\r\n                },\r\n              },\r\n\r\n              '.sk-card-body-icon': {\r\n                '@apply bg-primitives-overlay-lighten-10 text-primitives-gray-900': {},\r\n                '@apply hover:bg-primitives-gray-lightest': {},\r\n              },\r\n            },\r\n          },\r\n        },\r\n\r\n        '&[data-color=\"tertiary\"]': {\r\n          '@apply border-solid border-1': {},\r\n          '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},\r\n          '@apply bg-primitives-gray-50 dark:bg-primitives-gray-700': {},\r\n        },\r\n\r\n        [`&[data-color=\"${color}\"]`]: {\r\n          // card\r\n          [`@apply bg-${color}-surface-primary-hover`]: {},\r\n\r\n          // clickable\r\n          '&.sk-card-use-hover-effect': {\r\n            // hover\r\n            [`@apply hover:cursor-pointer hover:bg-${color}-surface-primary`]: {},\r\n          },\r\n\r\n          // Meta\r\n          '.sk-card-body': {\r\n            '&-meta': {\r\n              span: {\r\n                '@apply text-light-secondary': {},\r\n              },\r\n            },\r\n\r\n            // header\r\n            '&-header': {\r\n              'h1, h2, h3, h4, h5, h6, h7, a': {\r\n                [`@apply text-light-primary`]: {},\r\n              },\r\n            },\r\n\r\n            // Content\r\n            '&-content': {\r\n              'p, a': {\r\n                [`@apply text-light-secondary`]: {},\r\n              },\r\n            },\r\n          },\r\n\r\n          // inverted.\r\n          [`&[data-inverted=\"true\"]`]: {\r\n            // card\r\n            [`@apply bg-${color}-surface-accent-hover`]: {},\r\n\r\n            // clickable\r\n            '&.sk-card-use-hover-effect': {\r\n              // hover\r\n              [`@apply hover:cursor-pointer hover:bg-${color}-surface-accent`]: {},\r\n            },\r\n\r\n            '.sk-card-body': {\r\n              // Meta\r\n              '&-meta': {\r\n                span: {\r\n                  '@apply text-dark-secondary': {},\r\n                },\r\n              },\r\n\r\n              // header\r\n              '&-header': {\r\n                'h1, h2, h3, h4, h5, h6, h7, a': {\r\n                  [`@apply text-dark-primary`]: {},\r\n                },\r\n              },\r\n\r\n              // Content\r\n              '&-content': {\r\n                'p, a': {\r\n                  [`@apply text-dark-secondary`]: {},\r\n                },\r\n              },\r\n            },\r\n          },\r\n        },\r\n      }),\r\n      {}\r\n    ),\r\n\r\n    // clickable\r\n    '&.sk-card-use-hover-effect': {\r\n      //Hide and show of icon\r\n      '.sk-card-body-icon': {\r\n        '@apply inline-flex': {},\r\n        '@apply mt-auto mb-auto mr-24': {},\r\n      },\r\n    },\r\n\r\n    [`&[data-layout=\"horizontal\"]`]: {\r\n      '@apply flex-row h-full': {},\r\n\r\n      '.sk-card': {\r\n        '&-image': {\r\n          '@apply h-full w-[8em]': {},\r\n          '@apply float-left': {},\r\n          '@apply rounded-none rounded-l-cards grow-0': {},\r\n        },\r\n\r\n        '&-body': {\r\n          '@apply w-full': {},\r\n          '@apply border-none': {},\r\n\r\n          '&-wrapper': {\r\n            '@apply w-full': {},\r\n          },\r\n\r\n          '&-content': {\r\n            'p, a': {\r\n              '@apply text-small': {},\r\n            },\r\n          },\r\n\r\n          '&-meta': {\r\n            '@apply hidden': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n  },\r\n\r\n  '.sk-card-link': {\r\n    '@apply hover:cursor-pointer': {},\r\n\r\n    '&::after': {\r\n      content: \"''\",\r\n      position: 'absolute',\r\n      left: '0',\r\n      top: '0',\r\n      right: '0',\r\n      bottom: '0',\r\n    },\r\n  },\r\n\r\n  /**\r\n   * Meta card\r\n   */\r\n  '.sk-meta-card': {\r\n    '@apply no-underline hover:no-underline': {},\r\n    '@apply flex bg-vattjom-surface-accent': {},\r\n    '@apply p-14 rounded-groups': {},\r\n\r\n    '&[data-color=\"mono\"]': {\r\n      '@apply bg-primitives-overlay-darken-1 dark:bg-primitives-overlay-lighten-1': {},\r\n    },\r\n\r\n    '&[data-color=\"vattjom\"]': {\r\n      '@apply bg-vattjom-background-200': {},\r\n    },\r\n\r\n    '&-text-icon': {\r\n      '@apply mr-12 rounded-12 p-8': {},\r\n      '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {},\r\n      '@apply text-dark': {},\r\n      svg: {\r\n        height: 'unset',\r\n        width: 'unset',\r\n      },\r\n    },\r\n\r\n    '&-body': {\r\n      '&-header': {\r\n        'h1, h2, h3, h4, h5, h6, h7, a, p': {\r\n          '@apply mt-6 text-base line-clamp-1': {},\r\n          '@apply text-dark-primary': {},\r\n        },\r\n      },\r\n\r\n      '&-content': {\r\n        'p, a': {\r\n          '@apply text-primitives-gray-700 dark:text-primitives-gray-200 text-small': {},\r\n          '@apply text-dark-secondary line-clamp-1': {},\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-external-link-icon': {\r\n      '@apply ml-auto h-32 w-32': {},\r\n      '@apply p-6 text-dark': {},\r\n    },\r\n  },\r\n});\r\n"],"names":["Card","colors","span","time","reduce","styles","color","content","position","left","top","right","bottom","svg","height","width"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/card.ts"],"sourcesContent":["export const Card = (colors: string[]) => ({\r\n  '.sk-card': {\r\n    '@apply text-base': {},\r\n    '@apply bg-white relative rounded-b-cards rounded-cards': {},\r\n    '@apply flex flex-col': {},\r\n    '@apply no-underline hover:no-underline': {},\r\n    '@apply h-full': {},\r\n\r\n    '&-wrapper': {\r\n      '@apply grid': {},\r\n    },\r\n\r\n    '&-image': {\r\n      '@apply object-cover grow': {},\r\n      '@apply rounded-t-cards': {},\r\n    },\r\n\r\n    '&-body': {\r\n      '@apply px-24 pb-24 pt-16 rounded-b-cards': {},\r\n      '@apply shrink': {},\r\n\r\n      '&-wrapper': {\r\n        '@apply flex': {},\r\n      },\r\n\r\n      '&-meta': {\r\n        '@apply flex space-x-12 mt-16 text-base': {},\r\n        span: {\r\n          '@apply flex space-x-4 items-center': {},\r\n          time: {\r\n            '@apply h-24': {},\r\n          },\r\n        },\r\n\r\n        '&.sk-card-image': {\r\n          '@apply min-h-[12.5em] max-h-[20em]': {},\r\n        },\r\n      },\r\n\r\n      '&-header': {\r\n        'h1, h2, h3, h4, h5, h6, h7, a': {\r\n          '@apply line-clamp-1 text-h3-md text-dark-primary mt-16': {},\r\n        },\r\n        span: {\r\n          '@apply pl-12': {},\r\n        },\r\n      },\r\n\r\n      '&-content': {\r\n        '@apply w-full': {},\r\n        'p, a': {\r\n          '@apply line-clamp-3 m-0 pt-8 text-base text-body': {},\r\n        },\r\n      },\r\n\r\n      '&-icon': {\r\n        '@apply hidden': {},\r\n      },\r\n    },\r\n\r\n    ...colors.reduce(\r\n      (styles, color) => ({\r\n        ...styles,\r\n\r\n        '&[data-color=\"mono\"], &[data-color=\"tertiary\"]': {\r\n          '@apply border-solid border-1': {},\r\n          '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},\r\n          '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {},\r\n\r\n          '.sk-card-body-meta': {\r\n            '@apply text-dark-secondary': {},\r\n          },\r\n\r\n          '.sk-card-body-icon': {\r\n            '@apply bg-primitives-overlay-darken-9 dark:bg-primitives-overlay-lighten-10': {},\r\n            '@apply text-primitives-gray-lightest dark:text-primitives-overlay-darken-9': {},\r\n            '@apply hover:bg-primitives-overlay-darken-10 dark:hover:bg-primitives-gray-lightest': {},\r\n          },\r\n\r\n          // inverted.\r\n          [`&[data-inverted=\"true\"]`]: {\r\n            '@apply bg-primitives-gray-800': {},\r\n\r\n            '.sk-card-body': {\r\n              // Meta\r\n              '&-meta': {\r\n                span: {\r\n                  '@apply text-light-secondary': {},\r\n                },\r\n              },\r\n\r\n              // header\r\n              '&-header': {\r\n                'h1, h2, h3, h4, h5, h6, h7, a': {\r\n                  [`@apply text-light-primary`]: {},\r\n                },\r\n              },\r\n\r\n              // Content\r\n              '&-content': {\r\n                'p, a': {\r\n                  [`@apply text-light-secondary`]: {},\r\n                },\r\n              },\r\n\r\n              '.sk-card-body-icon': {\r\n                '@apply bg-primitives-overlay-lighten-10 text-primitives-gray-900': {},\r\n                '@apply hover:bg-primitives-gray-lightest': {},\r\n              },\r\n            },\r\n          },\r\n        },\r\n\r\n        '&[data-color=\"tertiary\"]': {\r\n          '@apply border-solid border-1': {},\r\n          '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},\r\n          '@apply bg-primitives-gray-50 dark:bg-primitives-gray-700': {},\r\n        },\r\n\r\n        [`&[data-color=\"${color}\"]`]: {\r\n          // card\r\n          [`@apply bg-${color}-surface-primary-hover`]: {},\r\n\r\n          // clickable\r\n          '&.sk-card-use-hover-effect': {\r\n            // hover\r\n            [`@apply hover:cursor-pointer hover:bg-${color}-surface-primary`]: {},\r\n          },\r\n\r\n          // Meta\r\n          '.sk-card-body': {\r\n            '&-meta': {\r\n              span: {\r\n                '@apply text-light-secondary': {},\r\n              },\r\n            },\r\n\r\n            // header\r\n            '&-header': {\r\n              'h1, h2, h3, h4, h5, h6, h7, a': {\r\n                [`@apply text-light-primary`]: {},\r\n              },\r\n            },\r\n\r\n            // Content\r\n            '&-content': {\r\n              'p, a': {\r\n                [`@apply text-light-secondary`]: {},\r\n              },\r\n            },\r\n          },\r\n\r\n          // inverted.\r\n          [`&[data-inverted=\"true\"]`]: {\r\n            // card\r\n            [`@apply bg-${color}-surface-accent-hover`]: {},\r\n\r\n            // clickable\r\n            '&.sk-card-use-hover-effect': {\r\n              // hover\r\n              [`@apply hover:cursor-pointer hover:bg-${color}-surface-accent`]: {},\r\n            },\r\n\r\n            '.sk-card-body': {\r\n              // Meta\r\n              '&-meta': {\r\n                span: {\r\n                  '@apply text-dark-secondary': {},\r\n                },\r\n              },\r\n\r\n              // header\r\n              '&-header': {\r\n                'h1, h2, h3, h4, h5, h6, h7, a': {\r\n                  [`@apply text-dark-primary`]: {},\r\n                },\r\n              },\r\n\r\n              // Content\r\n              '&-content': {\r\n                'p, a': {\r\n                  [`@apply text-dark-secondary`]: {},\r\n                },\r\n              },\r\n            },\r\n          },\r\n        },\r\n      }),\r\n      {}\r\n    ),\r\n\r\n    // clickable\r\n    '&.sk-card-use-hover-effect': {\r\n      //Hide and show of icon\r\n      '.sk-card-body-icon': {\r\n        '@apply inline-flex': {},\r\n        '@apply mt-auto mb-auto mr-24': {},\r\n      },\r\n    },\r\n\r\n    [`&[data-layout=\"horizontal\"]`]: {\r\n      '@apply flex-row h-full': {},\r\n\r\n      '.sk-card': {\r\n        '&-image': {\r\n          '@apply h-full w-[8em]': {},\r\n          '@apply float-left': {},\r\n          '@apply rounded-none rounded-l-cards grow-0': {},\r\n        },\r\n\r\n        '&-body': {\r\n          '@apply w-full': {},\r\n          '@apply border-none': {},\r\n\r\n          '&-wrapper': {\r\n            '@apply w-full': {},\r\n          },\r\n\r\n          '&-content': {\r\n            'p, a': {\r\n              '@apply text-small': {},\r\n            },\r\n          },\r\n\r\n          '&-meta': {\r\n            '@apply hidden': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n  },\r\n\r\n  '.sk-card-link': {\r\n    '@apply hover:cursor-pointer': {},\r\n\r\n    '&::after': {\r\n      content: \"''\",\r\n      position: 'absolute',\r\n      left: '0',\r\n      top: '0',\r\n      right: '0',\r\n      bottom: '0',\r\n    },\r\n  },\r\n\r\n  /**\r\n   * Meta card\r\n   */\r\n  '.sk-meta-card': {\r\n    '@apply no-underline hover:no-underline': {},\r\n    '@apply flex bg-vattjom-surface-accent': {},\r\n    '@apply p-14 rounded-groups': {},\r\n\r\n    '&.sk-meta-card-use-hover-effect:hover': {\r\n      '@apply cursor-pointer': {},\r\n    },\r\n\r\n    '&.sk-meta-card-use-hover-effect[data-color=\"vattjom\"]:hover': {\r\n      '@apply bg-vattjom-background-300': {},\r\n    },\r\n\r\n    '&.sk-meta-card-use-hover-effect[data-color=\"mono\"]:hover': {\r\n      '@apply bg-primitives-overlay-darken-2 dark:bg-primitives-overlay-lighten-2': {},\r\n    },\r\n\r\n    '&[data-color=\"mono\"]': {\r\n      '@apply bg-primitives-overlay-darken-1 dark:bg-primitives-overlay-lighten-1': {},\r\n    },\r\n\r\n    '&[data-color=\"vattjom\"]': {\r\n      '@apply bg-vattjom-background-200': {},\r\n    },\r\n\r\n    '&-text-icon': {\r\n      '@apply mr-12 rounded-12 p-8': {},\r\n      '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {},\r\n      '@apply text-dark': {},\r\n      svg: {\r\n        height: 'unset',\r\n        width: 'unset',\r\n      },\r\n    },\r\n\r\n    '&-body': {\r\n      '&-header': {\r\n        'h1, h2, h3, h4, h5, h6, h7, a, p': {\r\n          '@apply mt-6 line-clamp-1': {},\r\n          '@apply text-dark-primary': {},\r\n        },\r\n      },\r\n      '&-content': {\r\n        'p, a': {\r\n          '@apply text-primitives-gray-700 dark:text-primitives-gray-200': {},\r\n          '@apply text-dark-secondary line-clamp-1': {},\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-external-link-icon': {\r\n      '@apply ml-auto h-32 w-32 p-6 text-dark shrink-0': {},\r\n    },\r\n  },\r\n\r\n  '.sk-meta-card[data-size=\"sm\"]': {\r\n    '@apply h-[8.6rem]': {},\r\n  },\r\n  '.sk-meta-card[data-size=\"md\"]': {\r\n    '@apply h-[9.4rem]': {},\r\n  },\r\n  '.sk-meta-card[data-size=\"sm\"] .sk-meta-card-body-header': {\r\n    'h1, h2, h3, h4, h5, h6, h7, a, p': {\r\n      fontSize: '1.6rem ',\r\n      lineHeight: '2.4rem ',\r\n      fontWeight: 'bold ',\r\n    },\r\n  },\r\n  '.sk-meta-card[data-size=\"sm\"] .sk-meta-card-body-content': {\r\n    '@apply text-[1.4rem]': {},\r\n  },\r\n  '.sk-meta-card[data-size=\"md\"] .sk-meta-card-body-header': {\r\n    'h1, h2, h3, h4, h5, h6, h7, a, p': {\r\n      fontSize: '1.8rem',\r\n      lineHeight: '2.6rem',\r\n      fontWeight: 'bold',\r\n    },\r\n  },\r\n  '.sk-meta-card[data-size=\"md\"] .sk-meta-card-body-content': {\r\n    '@apply text-[1.6rem]': {},\r\n  },\r\n});\r\n"],"names":["Card","colors","span","time","reduce","styles","color","content","position","left","top","right","bottom","svg","height","width","fontSize","lineHeight","fontWeight"],"mappings":"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"}

package/dist/cjs/components/input.js

@@ -92,9 +92,94 @@ function addin() {
         }
     };
 }
+function addon() {
+    return {
+        '&-addon': {
+            '@apply flex relative': {},
+            '@apply items-center': {},
+            '@apply focus-within:ring': {},
+            '@apply focus-within:ring-ring': {},
+            '@apply text-dark-secondary': {},
+            //Focus
+            '@apply focus-within:border-input-field-surface': {},
+            '&:not(:invalid):not([aria-invalid="true"])': {
+                '@apply focus-within:border-input-field-surface': {}
+            },
+            '&&-lg': {
+                '@apply text-input-large': {},
+                '@apply rounded-button-lg': {},
+                '@apply h-48': {}
+            },
+            '&&-md': {
+                '@apply text-input-medium': {},
+                '@apply rounded-button-md': {},
+                '@apply h-40': {}
+            },
+            '&&-sm': {
+                '@apply text-input-small': {},
+                '@apply rounded-button-sm': {},
+                '@apply h-32': {}
+            },
+            '&&-left': {
+                '@apply rounded-r-0': {},
+                '@apply border-r-0': {}
+            },
+            '&&-right': {
+                '@apply rounded-l-0': {},
+                '@apply border-l-0': {}
+            },
+            ...inputStandards(),
+            '.sk-form-input': {
+                '@apply rounded-0': {},
+                '@apply border-0': {},
+                '@apply focus:ring-0': {},
+                '@apply focus:ring-offset-0': {},
+                '@apply bg-transparent': {},
+                '@apply dark:bg-transparent': {},
+                '@apply grow': {}
+            },
+            '.sk-form-select': {
+                '@apply rounded-0': {},
+                '@apply border-0 hover:border-0': {},
+                '@apply focus:ring-0 focus:z-10': {},
+                '@apply focus:ring-offset-0': {},
+                '@apply bg-transparent hover:bg-transparent': {},
+                '@apply dark:bg-transparent hover:dark:bg-transparent': {},
+                '@apply grow': {}
+            },
+            '&&-left .sk-form-select': {
+                '@apply border-r-1 border-r-divider': {},
+                '@apply focus:border-r-transparent': {}
+            },
+            '&&-right .sk-form-select': {
+                '@apply border-l-1 border-l-divider': {},
+                '@apply focus:border-l-transparent': {}
+            },
+            '.sk-form-combobox': {
+                '@apply rounded-0': {},
+                '@apply border-0': {},
+                '@apply focus-within:ring-0': {},
+                '@apply focus-within:ring-offset-0': {},
+                '@apply bg-transparent': {},
+                '@apply dark:bg-transparent': {}
+            },
+            '&&-left .sk-form-combobox': {
+                '@apply border-r-1 border-r-divider': {},
+                '@apply focus:border-r-transparent': {}
+            },
+            '&&-right .sk-form-combobox': {
+                '@apply border-l-1 border-l-divider': {},
+                '@apply focus:border-l-transparent': {}
+            }
+        }
+    };
+}
 function inputGroup() {
     return {
         '&-group': {
+            '&-wrapper': {
+                '@apply flex gap-0': {}
+            },
             '@apply flex relative': {},
             '@apply items-center': {},
             '@apply focus-within:ring': {},
@@ -107,15 +192,28 @@ function inputGroup() {
             },
             '&&-lg': {
                 '@apply text-input-large': {},
-                '@apply rounded-button-lg': {}
+                '@apply rounded-button-lg': {},
+                '@apply h-48': {}
             },
             '&&-md': {
                 '@apply text-input-medium': {},
-                '@apply rounded-button-md': {}
+                '@apply rounded-button-md': {},
+                '@apply h-40': {}
             },
             '&&-sm': {
                 '@apply text-input-small': {},
-                '@apply rounded-button-sm': {}
+                '@apply rounded-button-sm': {},
+                '@apply h-32': {}
+            },
+            '&[data-hasleftaddon="true"]': {
+                '@apply pl-0': {},
+                '@apply rounded-l-0': {},
+                '@apply border-l-0': {}
+            },
+            '&[data-hasrightaddon="true"]': {
+                '@apply pr-0': {},
+                '@apply rounded-r-0': {},
+                '@apply border-r-0': {}
             },
             ...inputStandards(),
             '.sk-form-input': {
@@ -246,7 +344,8 @@ const Input = ()=>({
             ...timeAndDatePicker(),
             ...inputStandards(),
             ...inputGroup(),
-            ...addin()
+            ...addin(),
+            ...addon()
         }
     });
 

package/dist/cjs/components/input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/input.ts"],"sourcesContent":["function calendar() {\r\n  return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2' ry='2' /><line x1='16' x2='16' y1='2' y2='6' /><line x1='8' x2='8' y1='2' y2='6' /><line x1='3' x2='21' y1='10' y2='10' /></svg>`;\r\n}\r\nfunction clock() {\r\n  return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' /><polyline points='12 6 12 12 16 14' /></svg>`;\r\n}\r\n\r\nfunction inputStandards() {\r\n  return {\r\n    '@apply border-1': {},\r\n    '@apply border-input-field-outline': {},\r\n    '@apply hover:border-input-field-outline-hover': {},\r\n\r\n    '@apply placeholder:text-dark-placeholder': {},\r\n\r\n    '@apply bg-input-field-surface': {},\r\n\r\n    //Invalid\r\n    '&:invalid, &[aria-invalid=\"true\"]': {\r\n      '@apply border-2 border-error-surface-primary': {},\r\n    },\r\n\r\n    //Disabled\r\n    '&:disabled, &[aria-disabled=\"true\"]': {\r\n      '@apply bg-input-field-surface-disabled': {},\r\n      '@apply border-input-field-outline-disabled': {},\r\n      '@apply hover:border-input-field-outline-disabled': {},\r\n      '@apply text-dark-disabled': {},\r\n    },\r\n\r\n    //readOnly\r\n    '&:read-only': {\r\n      '@apply bg-input-field-surface': {},\r\n      '@apply border-input-field-outline-disabled': {},\r\n      '@apply text-dark-secondary': {},\r\n      '@apply placeholder:text-dark-secondary': {},\r\n    },\r\n  };\r\n}\r\n\r\nfunction addin() {\r\n  return {\r\n    '&-addin': {\r\n      '@apply bg-transparent': {},\r\n      '@apply flex': {},\r\n      '@apply justify-start items-center': {},\r\n      '&-sm': {\r\n        '@apply px-6 gap-6': {},\r\n        '&.sk-form-input-addin-left': {\r\n          '@apply -mr-12': {},\r\n          '@apply pl-10': {},\r\n        },\r\n        '&.sk-form-input-addin-right': {\r\n          '@apply -ml-12': {},\r\n          '@apply pr-10': {},\r\n        },\r\n        svg: {\r\n          '@apply w-16 h-16': {},\r\n        },\r\n      },\r\n      '&-md': {\r\n        '@apply md:px-8 md:gap-8': {},\r\n        '&.sk-form-input-addin-left': {\r\n          '@apply -mr-16': {},\r\n          '@apply pl-12': {},\r\n        },\r\n        '&.sk-form-input-addin-right': {\r\n          '@apply -ml-16': {},\r\n          '@apply pr-12': {},\r\n        },\r\n        svg: {\r\n          '@apply w-20 h-20': {},\r\n        },\r\n      },\r\n      '&-lg': {\r\n        '@apply md:px-8 md:gap-8': {},\r\n        '&.sk-form-input-addin-left': {\r\n          '@apply -mr-20': {},\r\n          '@apply pl-16': {},\r\n        },\r\n        '&.sk-form-input-addin-right': {\r\n          '@apply -ml-20': {},\r\n          '@apply pr-16': {},\r\n        },\r\n        svg: {\r\n          '@apply w-22 h-22': {},\r\n        },\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nfunction inputGroup() {\r\n  return {\r\n    '&-group': {\r\n      '@apply flex relative': {},\r\n      '@apply items-center': {},\r\n      '@apply focus-within:ring': {},\r\n      '@apply focus-within:ring-ring': {},\r\n      '@apply text-dark-secondary': {},\r\n      //Focus\r\n      '@apply focus-within:border-input-field-surface': {},\r\n\r\n      '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n        '@apply focus-within:border-input-field-surface': {},\r\n      },\r\n\r\n      '&&-lg': {\r\n        '@apply text-input-large': {},\r\n        '@apply rounded-button-lg': {},\r\n      },\r\n      '&&-md': {\r\n        '@apply text-input-medium': {},\r\n        '@apply rounded-button-md': {},\r\n      },\r\n      '&&-sm': {\r\n        '@apply text-input-small': {},\r\n        '@apply rounded-button-sm': {},\r\n      },\r\n      ...inputStandards(),\r\n      '.sk-form-input': {\r\n        '@apply rounded-0': {},\r\n        '@apply border-0': {},\r\n        '@apply focus:ring-0': {},\r\n        '@apply focus:ring-offset-0': {},\r\n        '@apply bg-transparent': {},\r\n        '@apply dark:bg-transparent': {},\r\n        '@apply grow': {},\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nfunction timeAndDatePicker() {\r\n  return {\r\n    '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n      '@apply block': {},\r\n      '@apply p-0': {},\r\n      '@apply pl-6 md:pl-8': {},\r\n      '@apply m-0': {},\r\n      '@apply bg-none': {},\r\n      '@apply bg-dark-secondary': {},\r\n      '&.sk-form-input-sm': {\r\n        '@apply w-16 h-16': {},\r\n        '@apply -mr-2': {},\r\n      },\r\n      '&.sk-form-input-md': {\r\n        '@apply -mr-4': {},\r\n        '@apply w-18 h-18': {},\r\n      },\r\n      '&.sk-form-input-lg': {\r\n        '@apply -mr-6': {},\r\n        '@apply w-20 h-20': {},\r\n      },\r\n    },\r\n\r\n    '&[type=\"date\"]::-webkit-inner-spin-button, &[type=\"date\"]::-webkit-calendar-picker-indicator': {\r\n      mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n      '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n      maskSize: 'contain',\r\n      '-webkit-mask-size': 'contain',\r\n    },\r\n    '&[type=\"datetime-local\"]::-webkit-inner-spin-button, &[type=\"datetime-local\"]::-webkit-calendar-picker-indicator':\r\n      {\r\n        mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n        '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n        maskSize: 'contain',\r\n        '-webkit-mask-size': 'contain',\r\n      },\r\n    '&[type=\"time\"]::-webkit-inner-spin-button, &[type=\"time\"]::-webkit-calendar-picker-indicator': {\r\n      mask: [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n      '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n      maskSize: 'contain',\r\n      '-webkit-mask-size': 'contain',\r\n    },\r\n\r\n    '&:disabled, &[aria-disabled=\"true\"]': {\r\n      '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n        '@apply color-black-disabled': {},\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nexport const Input = () => ({\r\n  '.sk-form-input': {\r\n    '@apply grow-0': {},\r\n    '@apply text-dark-primary': {},\r\n\r\n    '&[data-hideextra=\"true\"]': {\r\n      '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\r\n        '-webkit-appearance': 'none',\r\n        display: 'none',\r\n        margin: '0px',\r\n      },\r\n      '-moz-appearance': 'textfield',\r\n    },\r\n\r\n    '&&-lg': {\r\n      '@apply rounded-button-lg': {},\r\n      '@apply px-20': {},\r\n      '@apply py-11': {},\r\n      '@apply gap-8': {},\r\n      '@apply text-input-large': {},\r\n      '@apply h-48': {},\r\n    },\r\n    '&&-md': {\r\n      '@apply rounded-button-md': {},\r\n      '@apply px-16': {},\r\n      '@apply py-7': {},\r\n      '@apply gap-8': {},\r\n      '@apply text-input-medium': {},\r\n      '@apply h-40': {},\r\n    },\r\n    '&&-sm': {\r\n      '@apply rounded-button-sm': {},\r\n      '@apply px-12': {},\r\n      '@apply py-5': {},\r\n      '@apply gap-6': {},\r\n      '@apply text-input-small': {},\r\n      '@apply h-32': {},\r\n    },\r\n    '&&-textarea': {\r\n      '@apply h-auto': {},\r\n      '&-warning': {\r\n        '@apply sr-only': {},\r\n      },\r\n    },\r\n\r\n    //Focus\r\n    '@apply focus:ring': {},\r\n    '@apply focus:ring-ring': {},\r\n    '@apply focus:ring-offset': {},\r\n    '@apply focus:border-input-field-surface': {},\r\n    '@apply focus-within:ring': {},\r\n    '@apply focus-within:ring-ring': {},\r\n    '@apply focus-within:ring-offset': {},\r\n    '@apply focus-within:border-input-field-surface': {},\r\n    '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n      '@apply focus:hover:border-input-field-surface': {},\r\n    },\r\n    ...timeAndDatePicker(),\r\n    ...inputStandards(),\r\n    ...inputGroup(),\r\n    ...addin(),\r\n  },\r\n});\r\n"],"names":["Input","calendar","clock","inputStandards","addin","svg","inputGroup","timeAndDatePicker","mask","maskSize","display","margin"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/input.ts"],"sourcesContent":["function calendar() {\r\n  return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2' ry='2' /><line x1='16' x2='16' y1='2' y2='6' /><line x1='8' x2='8' y1='2' y2='6' /><line x1='3' x2='21' y1='10' y2='10' /></svg>`;\r\n}\r\nfunction clock() {\r\n  return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' /><polyline points='12 6 12 12 16 14' /></svg>`;\r\n}\r\n\r\nfunction inputStandards() {\r\n  return {\r\n    '@apply border-1': {},\r\n    '@apply border-input-field-outline': {},\r\n    '@apply hover:border-input-field-outline-hover': {},\r\n\r\n    '@apply placeholder:text-dark-placeholder': {},\r\n\r\n    '@apply bg-input-field-surface': {},\r\n\r\n    //Invalid\r\n    '&:invalid, &[aria-invalid=\"true\"]': {\r\n      '@apply border-2 border-error-surface-primary': {},\r\n    },\r\n\r\n    //Disabled\r\n    '&:disabled, &[aria-disabled=\"true\"]': {\r\n      '@apply bg-input-field-surface-disabled': {},\r\n      '@apply border-input-field-outline-disabled': {},\r\n      '@apply hover:border-input-field-outline-disabled': {},\r\n      '@apply text-dark-disabled': {},\r\n    },\r\n\r\n    //readOnly\r\n    '&:read-only': {\r\n      '@apply bg-input-field-surface': {},\r\n      '@apply border-input-field-outline-disabled': {},\r\n      '@apply text-dark-secondary': {},\r\n      '@apply placeholder:text-dark-secondary': {},\r\n    },\r\n  };\r\n}\r\n\r\nfunction addin() {\r\n  return {\r\n    '&-addin': {\r\n      '@apply bg-transparent': {},\r\n      '@apply flex': {},\r\n      '@apply justify-start items-center': {},\r\n      '&-sm': {\r\n        '@apply px-6 gap-6': {},\r\n        '&.sk-form-input-addin-left': {\r\n          '@apply -mr-12': {},\r\n          '@apply pl-10': {},\r\n        },\r\n        '&.sk-form-input-addin-right': {\r\n          '@apply -ml-12': {},\r\n          '@apply pr-10': {},\r\n        },\r\n        svg: {\r\n          '@apply w-16 h-16': {},\r\n        },\r\n      },\r\n      '&-md': {\r\n        '@apply md:px-8 md:gap-8': {},\r\n        '&.sk-form-input-addin-left': {\r\n          '@apply -mr-16': {},\r\n          '@apply pl-12': {},\r\n        },\r\n        '&.sk-form-input-addin-right': {\r\n          '@apply -ml-16': {},\r\n          '@apply pr-12': {},\r\n        },\r\n        svg: {\r\n          '@apply w-20 h-20': {},\r\n        },\r\n      },\r\n      '&-lg': {\r\n        '@apply md:px-8 md:gap-8': {},\r\n        '&.sk-form-input-addin-left': {\r\n          '@apply -mr-20': {},\r\n          '@apply pl-16': {},\r\n        },\r\n        '&.sk-form-input-addin-right': {\r\n          '@apply -ml-20': {},\r\n          '@apply pr-16': {},\r\n        },\r\n        svg: {\r\n          '@apply w-22 h-22': {},\r\n        },\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nfunction addon() {\r\n  return {\r\n    '&-addon': {\r\n      '@apply flex relative': {},\r\n      '@apply items-center': {},\r\n      '@apply focus-within:ring': {},\r\n      '@apply focus-within:ring-ring': {},\r\n      '@apply text-dark-secondary': {},\r\n      //Focus\r\n      '@apply focus-within:border-input-field-surface': {},\r\n\r\n      '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n        '@apply focus-within:border-input-field-surface': {},\r\n      },\r\n\r\n      '&&-lg': {\r\n        '@apply text-input-large': {},\r\n        '@apply rounded-button-lg': {},\r\n        '@apply h-48': {},\r\n      },\r\n      '&&-md': {\r\n        '@apply text-input-medium': {},\r\n        '@apply rounded-button-md': {},\r\n        '@apply h-40': {},\r\n      },\r\n      '&&-sm': {\r\n        '@apply text-input-small': {},\r\n        '@apply rounded-button-sm': {},\r\n        '@apply h-32': {},\r\n      },\r\n      '&&-left': {\r\n        '@apply rounded-r-0': {},\r\n        '@apply border-r-0': {},\r\n      },\r\n      '&&-right': {\r\n        '@apply rounded-l-0': {},\r\n        '@apply border-l-0': {},\r\n      },\r\n      ...inputStandards(),\r\n      '.sk-form-input': {\r\n        '@apply rounded-0': {},\r\n        '@apply border-0': {},\r\n        '@apply focus:ring-0': {},\r\n        '@apply focus:ring-offset-0': {},\r\n        '@apply bg-transparent': {},\r\n        '@apply dark:bg-transparent': {},\r\n        '@apply grow': {},\r\n      },\r\n      '.sk-form-select': {\r\n        '@apply rounded-0': {},\r\n        '@apply border-0 hover:border-0': {},\r\n        '@apply focus:ring-0 focus:z-10': {},\r\n        '@apply focus:ring-offset-0': {},\r\n        '@apply bg-transparent hover:bg-transparent': {},\r\n        '@apply dark:bg-transparent hover:dark:bg-transparent': {},\r\n        '@apply grow': {},\r\n      },\r\n      '&&-left .sk-form-select': {\r\n        '@apply border-r-1 border-r-divider': {},\r\n        '@apply focus:border-r-transparent': {},\r\n      },\r\n      '&&-right .sk-form-select': {\r\n        '@apply border-l-1 border-l-divider': {},\r\n        '@apply focus:border-l-transparent': {},\r\n      },\r\n      '.sk-form-combobox': {\r\n        '@apply rounded-0': {},\r\n        '@apply border-0': {},\r\n        '@apply focus-within:ring-0': {},\r\n        '@apply focus-within:ring-offset-0': {},\r\n        '@apply bg-transparent': {},\r\n        '@apply dark:bg-transparent': {},\r\n      },\r\n      '&&-left .sk-form-combobox': {\r\n        '@apply border-r-1 border-r-divider': {},\r\n        '@apply focus:border-r-transparent': {},\r\n      },\r\n      '&&-right .sk-form-combobox': {\r\n        '@apply border-l-1 border-l-divider': {},\r\n        '@apply focus:border-l-transparent': {},\r\n      },\r\n    },\r\n  };\r\n}\r\nfunction inputGroup() {\r\n  return {\r\n    '&-group': {\r\n      '&-wrapper': {\r\n        '@apply flex gap-0': {},\r\n      },\r\n      '@apply flex relative': {},\r\n      '@apply items-center': {},\r\n      '@apply focus-within:ring': {},\r\n      '@apply focus-within:ring-ring': {},\r\n      '@apply text-dark-secondary': {},\r\n      //Focus\r\n      '@apply focus-within:border-input-field-surface': {},\r\n\r\n      '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n        '@apply focus-within:border-input-field-surface': {},\r\n      },\r\n\r\n      '&&-lg': {\r\n        '@apply text-input-large': {},\r\n        '@apply rounded-button-lg': {},\r\n        '@apply h-48': {},\r\n      },\r\n      '&&-md': {\r\n        '@apply text-input-medium': {},\r\n        '@apply rounded-button-md': {},\r\n        '@apply h-40': {},\r\n      },\r\n      '&&-sm': {\r\n        '@apply text-input-small': {},\r\n        '@apply rounded-button-sm': {},\r\n        '@apply h-32': {},\r\n      },\r\n      '&[data-hasleftaddon=\"true\"]': {\r\n        '@apply pl-0': {},\r\n        '@apply rounded-l-0': {},\r\n        '@apply border-l-0': {},\r\n      },\r\n      '&[data-hasrightaddon=\"true\"]': {\r\n        '@apply pr-0': {},\r\n        '@apply rounded-r-0': {},\r\n        '@apply border-r-0': {},\r\n      },\r\n      ...inputStandards(),\r\n      '.sk-form-input': {\r\n        '@apply rounded-0': {},\r\n        '@apply border-0': {},\r\n        '@apply focus:ring-0': {},\r\n        '@apply focus:ring-offset-0': {},\r\n        '@apply bg-transparent': {},\r\n        '@apply dark:bg-transparent': {},\r\n        '@apply grow': {},\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nfunction timeAndDatePicker() {\r\n  return {\r\n    '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n      '@apply block': {},\r\n      '@apply p-0': {},\r\n      '@apply pl-6 md:pl-8': {},\r\n      '@apply m-0': {},\r\n      '@apply bg-none': {},\r\n      '@apply bg-dark-secondary': {},\r\n      '&.sk-form-input-sm': {\r\n        '@apply w-16 h-16': {},\r\n        '@apply -mr-2': {},\r\n      },\r\n      '&.sk-form-input-md': {\r\n        '@apply -mr-4': {},\r\n        '@apply w-18 h-18': {},\r\n      },\r\n      '&.sk-form-input-lg': {\r\n        '@apply -mr-6': {},\r\n        '@apply w-20 h-20': {},\r\n      },\r\n    },\r\n\r\n    '&[type=\"date\"]::-webkit-inner-spin-button, &[type=\"date\"]::-webkit-calendar-picker-indicator': {\r\n      mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n      '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n      maskSize: 'contain',\r\n      '-webkit-mask-size': 'contain',\r\n    },\r\n    '&[type=\"datetime-local\"]::-webkit-inner-spin-button, &[type=\"datetime-local\"]::-webkit-calendar-picker-indicator':\r\n      {\r\n        mask: [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n        '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${calendar()}\") no-repeat 100% 100%`],\r\n        maskSize: 'contain',\r\n        '-webkit-mask-size': 'contain',\r\n      },\r\n    '&[type=\"time\"]::-webkit-inner-spin-button, &[type=\"time\"]::-webkit-calendar-picker-indicator': {\r\n      mask: [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n      '-webkit-mask': [`url(\"data:image/svg+xml;utf-8,${clock()}\") no-repeat 100% 100%`],\r\n      maskSize: 'contain',\r\n      '-webkit-mask-size': 'contain',\r\n    },\r\n\r\n    '&:disabled, &[aria-disabled=\"true\"]': {\r\n      '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {\r\n        '@apply color-black-disabled': {},\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nexport const Input = () => ({\r\n  '.sk-form-input': {\r\n    '@apply grow-0': {},\r\n    '@apply text-dark-primary': {},\r\n\r\n    '&[data-hideextra=\"true\"]': {\r\n      '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\r\n        '-webkit-appearance': 'none',\r\n        display: 'none',\r\n        margin: '0px',\r\n      },\r\n      '-moz-appearance': 'textfield',\r\n    },\r\n\r\n    '&&-lg': {\r\n      '@apply rounded-button-lg': {},\r\n      '@apply px-20': {},\r\n      '@apply py-11': {},\r\n      '@apply gap-8': {},\r\n      '@apply text-input-large': {},\r\n      '@apply h-48': {},\r\n    },\r\n    '&&-md': {\r\n      '@apply rounded-button-md': {},\r\n      '@apply px-16': {},\r\n      '@apply py-7': {},\r\n      '@apply gap-8': {},\r\n      '@apply text-input-medium': {},\r\n      '@apply h-40': {},\r\n    },\r\n    '&&-sm': {\r\n      '@apply rounded-button-sm': {},\r\n      '@apply px-12': {},\r\n      '@apply py-5': {},\r\n      '@apply gap-6': {},\r\n      '@apply text-input-small': {},\r\n      '@apply h-32': {},\r\n    },\r\n    '&&-textarea': {\r\n      '@apply h-auto': {},\r\n      '&-warning': {\r\n        '@apply sr-only': {},\r\n      },\r\n    },\r\n\r\n    //Focus\r\n    '@apply focus:ring': {},\r\n    '@apply focus:ring-ring': {},\r\n    '@apply focus:ring-offset': {},\r\n    '@apply focus:border-input-field-surface': {},\r\n    '@apply focus-within:ring': {},\r\n    '@apply focus-within:ring-ring': {},\r\n    '@apply focus-within:ring-offset': {},\r\n    '@apply focus-within:border-input-field-surface': {},\r\n    '&:not(:invalid):not([aria-invalid=\"true\"])': {\r\n      '@apply focus:hover:border-input-field-surface': {},\r\n    },\r\n    ...timeAndDatePicker(),\r\n    ...inputStandards(),\r\n    ...inputGroup(),\r\n    ...addin(),\r\n    ...addon(),\r\n  },\r\n});\r\n"],"names":["Input","calendar","clock","inputStandards","addin","svg","addon","inputGroup","timeAndDatePicker","mask","maskSize","display","margin"],"mappings":"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"}

package/dist/cjs/components/logo.js

@@ -28,7 +28,7 @@ const Logo = ()=>({
                 '@apply h-60': {},
                 '@apply pb-4': {},
                 '.sk-logo-figure': {
-                    '@apply w-auto h-56': {}
+                    '@apply w-34 h-56': {}
                 }
             },
             'a:focus-within &': {

package/dist/cjs/components/logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/logo.ts"],"sourcesContent":["export const Logo = () => ({\r\n  '.sk-logo': {\r\n    '@apply flex w-auto h-auto': {},\r\n    '@apply items-center': {},\r\n    '@apply text-dark-primary': {},\r\n    '&[data-inverted=\"true\"]': {\r\n      '@apply text-light-primary': {},\r\n      '.sk-logo-divider': {\r\n        '@apply border-inverted-divider': {},\r\n      },\r\n    },\r\n\r\n    '&-figure': {\r\n      '@apply w-full h-full': {},\r\n    },\r\n    '&[data-variant=\"service\"]': {\r\n      '@apply flex-row gap-6': {},\r\n      '@apply w-max': {},\r\n      '@apply h-60': {},\r\n      '@apply pb-4': {},\r\n      '.sk-logo-figure': {\r\n        '@apply w-auto h-56': {},\r\n      },\r\n    },\r\n    'a:focus-within &': {\r\n      '@apply outline outline-2 outline-ring': {},\r\n    },\r\n    'a &': {\r\n      '@apply no-underline': {},\r\n    },\r\n    'a:hover &': {\r\n      '@apply underline': {},\r\n    },\r\n    '&-service-content': {\r\n      '@apply h-full w-max': {},\r\n      '@apply flex flex-col justify-center': {},\r\n      '@apply pl-2 pt-2 pr-8 pb-0': {},\r\n    },\r\n    '&-title': {\r\n      '@apply font-header text-logo-header': {},\r\n    },\r\n    '&-subtitle': {\r\n      '@apply text-small font-normal block': {},\r\n    },\r\n    '&-divider': {\r\n      '@apply pt-8 pb-4': {},\r\n    },\r\n  },\r\n});\r\n"],"names":["Logo"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,OAAO,IAAO,CAAA;QACzB,YAAY;YACV,6BAA6B,CAAC;YAC9B,uBAAuB,CAAC;YACxB,4BAA4B,CAAC;YAC7B,2BAA2B;gBACzB,6BAA6B,CAAC;gBAC9B,oBAAoB;oBAClB,kCAAkC,CAAC;gBACrC;YACF;YAEA,YAAY;gBACV,wBAAwB,CAAC;YAC3B;YACA,6BAA6B;gBAC3B,yBAAyB,CAAC;gBAC1B,gBAAgB,CAAC;gBACjB,eAAe,CAAC;gBAChB,eAAe,CAAC;gBAChB,mBAAmB;oBACjB,sBAAsB,CAAC;gBACzB;YACF;YACA,oBAAoB;gBAClB,yCAAyC,CAAC;YAC5C;YACA,OAAO;gBACL,uBAAuB,CAAC;YAC1B;YACA,aAAa;gBACX,oBAAoB,CAAC;YACvB;YACA,qBAAqB;gBACnB,uBAAuB,CAAC;gBACxB,uCAAuC,CAAC;gBACxC,8BAA8B,CAAC;YACjC;YACA,WAAW;gBACT,uCAAuC,CAAC;YAC1C;YACA,cAAc;gBACZ,uCAAuC,CAAC;YAC1C;YACA,aAAa;gBACX,oBAAoB,CAAC;YACvB;QACF;IACF,CAAA"}
+{"version":3,"sources":["../../../src/components/logo.ts"],"sourcesContent":["export const Logo = () => ({\r\n  '.sk-logo': {\r\n    '@apply flex w-auto h-auto': {},\r\n    '@apply items-center': {},\r\n    '@apply text-dark-primary': {},\r\n    '&[data-inverted=\"true\"]': {\r\n      '@apply text-light-primary': {},\r\n      '.sk-logo-divider': {\r\n        '@apply border-inverted-divider': {},\r\n      },\r\n    },\r\n\r\n    '&-figure': {\r\n      '@apply w-full h-full': {},\r\n    },\r\n    '&[data-variant=\"service\"]': {\r\n      '@apply flex-row gap-6': {},\r\n      '@apply w-max': {},\r\n      '@apply h-60': {},\r\n      '@apply pb-4': {},\r\n      '.sk-logo-figure': {\r\n        '@apply w-34 h-56': {},\r\n      },\r\n    },\r\n    'a:focus-within &': {\r\n      '@apply outline outline-2 outline-ring': {},\r\n    },\r\n    'a &': {\r\n      '@apply no-underline': {},\r\n    },\r\n    'a:hover &': {\r\n      '@apply underline': {},\r\n    },\r\n    '&-service-content': {\r\n      '@apply h-full w-max': {},\r\n      '@apply flex flex-col justify-center': {},\r\n      '@apply pl-2 pt-2 pr-8 pb-0': {},\r\n    },\r\n    '&-title': {\r\n      '@apply font-header text-logo-header': {},\r\n    },\r\n    '&-subtitle': {\r\n      '@apply text-small font-normal block': {},\r\n    },\r\n    '&-divider': {\r\n      '@apply pt-8 pb-4': {},\r\n    },\r\n  },\r\n});\r\n"],"names":["Logo"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,OAAO,IAAO,CAAA;QACzB,YAAY;YACV,6BAA6B,CAAC;YAC9B,uBAAuB,CAAC;YACxB,4BAA4B,CAAC;YAC7B,2BAA2B;gBACzB,6BAA6B,CAAC;gBAC9B,oBAAoB;oBAClB,kCAAkC,CAAC;gBACrC;YACF;YAEA,YAAY;gBACV,wBAAwB,CAAC;YAC3B;YACA,6BAA6B;gBAC3B,yBAAyB,CAAC;gBAC1B,gBAAgB,CAAC;gBACjB,eAAe,CAAC;gBAChB,eAAe,CAAC;gBAChB,mBAAmB;oBACjB,oBAAoB,CAAC;gBACvB;YACF;YACA,oBAAoB;gBAClB,yCAAyC,CAAC;YAC5C;YACA,OAAO;gBACL,uBAAuB,CAAC;YAC1B;YACA,aAAa;gBACX,oBAAoB,CAAC;YACvB;YACA,qBAAqB;gBACnB,uBAAuB,CAAC;gBACxB,uCAAuC,CAAC;gBACxC,8BAA8B,CAAC;YACjC;YACA,WAAW;gBACT,uCAAuC,CAAC;YAC1C;YACA,cAAc;gBACZ,uCAAuC,CAAC;YAC1C;YACA,aAAa;gBACX,oBAAoB,CAAC;YACvB;QACF;IACF,CAAA"}

package/dist/cjs/components/tabs.js

@@ -48,7 +48,7 @@ const Tabs = (colors)=>({
                         }
                     },
                     '.sk-tabs-list-item-divider': {
-                        '@apply m-0 min-h-2 h-2 rounded-t-24 opacity-0': {}
+                        '@apply m-0 min-h-2 h-2 opacity-0': {}
                     },
                     '&[data-current="true"]': {
                         '.sk-tabs-list-item-divider': {

package/dist/cjs/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/tabs.ts"],"sourcesContent":["export const Tabs = (colors: string[]) => ({\r\n  '.sk-tabs': {\r\n    '@apply w-full': {},\r\n\r\n    '&-list': {\r\n      '@apply flex items-center gap-20 border-b-1 border-transparent': {},\r\n\r\n      '&[data-underline=\"true\"]': {\r\n        '@apply border-divider': {},\r\n      },\r\n\r\n      '&-item': {\r\n        '@apply flex flex-col gap-y-10': {},\r\n\r\n        '&[data-size=\"sm\"]': {\r\n          '> button': {\r\n            '@apply text-small': {},\r\n          },\r\n        },\r\n\r\n        '&:hover': {\r\n          // hover\r\n          '.sk-tabs-list-item-divider': {\r\n            '@apply opacity-90': {},\r\n          },\r\n        },\r\n\r\n        '&-button': {\r\n          '@apply h-auto border-0 py-0 px-2': {},\r\n          // ring\r\n          '@apply rounded-4': {},\r\n\r\n          '&[aria-disabled=\"true\"]': {\r\n            '@apply text-dark-disabled cursor-default': {},\r\n          },\r\n\r\n          '&:focus-visible': {\r\n            // focus\r\n            '@apply ring-[.3rem]': {},\r\n            '@apply ring-ring': {},\r\n            '@apply ring-offset-background-content': {},\r\n            '@apply outline-0': {},\r\n          },\r\n\r\n          '.sk-callout': {\r\n            '@apply absolute self-end': {},\r\n          },\r\n        },\r\n\r\n        '.sk-tabs-list-item-divider': {\r\n          '@apply m-0 min-h-2 h-2 rounded-t-24 opacity-0': {},\r\n        },\r\n\r\n        '&[data-current=\"true\"]': {\r\n          '.sk-tabs-list-item-divider': {\r\n            '@apply opacity-100': {},\r\n          },\r\n        },\r\n\r\n        ...colors.reduce(\r\n          (styles, color) => ({\r\n            ...styles,\r\n            [`&[data-color=\"${color}\"]`]: {\r\n              '.sk-tabs-list-item-divider': {\r\n                [`@apply bg-${color}-surface-primary`]: {},\r\n              },\r\n            },\r\n          }),\r\n          {}\r\n        ),\r\n        \"&[data-color='tertiary']\": {\r\n          '.sk-tabs-list-item-divider': {\r\n            '@apply bg-primary-surface': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-panels': {\r\n      '@apply mt-20': {},\r\n    },\r\n\r\n    '&-content': {\r\n      '&:not([data-selected=\"true\"])': {\r\n        '@apply hidden': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"names":["Tabs","colors","reduce","styles","color"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,OAAO,CAACC,SAAsB,CAAA;QACzC,YAAY;YACV,iBAAiB,CAAC;YAElB,UAAU;gBACR,iEAAiE,CAAC;gBAElE,4BAA4B;oBAC1B,yBAAyB,CAAC;gBAC5B;gBAEA,UAAU;oBACR,iCAAiC,CAAC;oBAElC,qBAAqB;wBACnB,YAAY;4BACV,qBAAqB,CAAC;wBACxB;oBACF;oBAEA,WAAW;wBACT,QAAQ;wBACR,8BAA8B;4BAC5B,qBAAqB,CAAC;wBACxB;oBACF;oBAEA,YAAY;wBACV,oCAAoC,CAAC;wBACrC,OAAO;wBACP,oBAAoB,CAAC;wBAErB,2BAA2B;4BACzB,4CAA4C,CAAC;wBAC/C;wBAEA,mBAAmB;4BACjB,QAAQ;4BACR,uBAAuB,CAAC;4BACxB,oBAAoB,CAAC;4BACrB,yCAAyC,CAAC;4BAC1C,oBAAoB,CAAC;wBACvB;wBAEA,eAAe;4BACb,4BAA4B,CAAC;wBAC/B;oBACF;oBAEA,8BAA8B;wBAC5B,iDAAiD,CAAC;oBACpD;oBAEA,0BAA0B;wBACxB,8BAA8B;4BAC5B,sBAAsB,CAAC;wBACzB;oBACF;oBAEA,GAAGA,OAAOC,MAAM,CACd,CAACC,QAAQC,QAAW,CAAA;4BAClB,GAAGD,MAAM;4BACT,CAAC,CAAC,cAAc,EAAEC,MAAM,EAAE,CAAC,CAAC,EAAE;gCAC5B,8BAA8B;oCAC5B,CAAC,CAAC,UAAU,EAAEA,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC;gCAC3C;4BACF;wBACF,CAAA,GACA,CAAC,EACF;oBACD,4BAA4B;wBAC1B,8BAA8B;4BAC5B,6BAA6B,CAAC;wBAChC;oBACF;gBACF;YACF;YAEA,YAAY;gBACV,gBAAgB,CAAC;YACnB;YAEA,aAAa;gBACX,iCAAiC;oBAC/B,iBAAiB,CAAC;gBACpB;YACF;QACF;IACF,CAAA"}
+{"version":3,"sources":["../../../src/components/tabs.ts"],"sourcesContent":["export const Tabs = (colors: string[]) => ({\r\n  '.sk-tabs': {\r\n    '@apply w-full': {},\r\n\r\n    '&-list': {\r\n      '@apply flex items-center gap-20 border-b-1 border-transparent': {},\r\n\r\n      '&[data-underline=\"true\"]': {\r\n        '@apply border-divider': {},\r\n      },\r\n\r\n      '&-item': {\r\n        '@apply flex flex-col gap-y-10': {},\r\n\r\n        '&[data-size=\"sm\"]': {\r\n          '> button': {\r\n            '@apply text-small': {},\r\n          },\r\n        },\r\n\r\n        '&:hover': {\r\n          // hover\r\n          '.sk-tabs-list-item-divider': {\r\n            '@apply opacity-90': {},\r\n          },\r\n        },\r\n\r\n        '&-button': {\r\n          '@apply h-auto border-0 py-0 px-2': {},\r\n          // ring\r\n          '@apply rounded-4': {},\r\n\r\n          '&[aria-disabled=\"true\"]': {\r\n            '@apply text-dark-disabled cursor-default': {},\r\n          },\r\n\r\n          '&:focus-visible': {\r\n            // focus\r\n            '@apply ring-[.3rem]': {},\r\n            '@apply ring-ring': {},\r\n            '@apply ring-offset-background-content': {},\r\n            '@apply outline-0': {},\r\n          },\r\n\r\n          '.sk-callout': {\r\n            '@apply absolute self-end': {},\r\n          },\r\n        },\r\n\r\n        '.sk-tabs-list-item-divider': {\r\n          '@apply m-0 min-h-2 h-2 opacity-0': {},\r\n        },\r\n\r\n        '&[data-current=\"true\"]': {\r\n          '.sk-tabs-list-item-divider': {\r\n            '@apply opacity-100': {},\r\n          },\r\n        },\r\n\r\n        ...colors.reduce(\r\n          (styles, color) => ({\r\n            ...styles,\r\n            [`&[data-color=\"${color}\"]`]: {\r\n              '.sk-tabs-list-item-divider': {\r\n                [`@apply bg-${color}-surface-primary`]: {},\r\n              },\r\n            },\r\n          }),\r\n          {}\r\n        ),\r\n        \"&[data-color='tertiary']\": {\r\n          '.sk-tabs-list-item-divider': {\r\n            '@apply bg-primary-surface': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-panels': {\r\n      '@apply mt-20': {},\r\n    },\r\n\r\n    '&-content': {\r\n      '&:not([data-selected=\"true\"])': {\r\n        '@apply hidden': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"names":["Tabs","colors","reduce","styles","color"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,OAAO,CAACC,SAAsB,CAAA;QACzC,YAAY;YACV,iBAAiB,CAAC;YAElB,UAAU;gBACR,iEAAiE,CAAC;gBAElE,4BAA4B;oBAC1B,yBAAyB,CAAC;gBAC5B;gBAEA,UAAU;oBACR,iCAAiC,CAAC;oBAElC,qBAAqB;wBACnB,YAAY;4BACV,qBAAqB,CAAC;wBACxB;oBACF;oBAEA,WAAW;wBACT,QAAQ;wBACR,8BAA8B;4BAC5B,qBAAqB,CAAC;wBACxB;oBACF;oBAEA,YAAY;wBACV,oCAAoC,CAAC;wBACrC,OAAO;wBACP,oBAAoB,CAAC;wBAErB,2BAA2B;4BACzB,4CAA4C,CAAC;wBAC/C;wBAEA,mBAAmB;4BACjB,QAAQ;4BACR,uBAAuB,CAAC;4BACxB,oBAAoB,CAAC;4BACrB,yCAAyC,CAAC;4BAC1C,oBAAoB,CAAC;wBACvB;wBAEA,eAAe;4BACb,4BAA4B,CAAC;wBAC/B;oBACF;oBAEA,8BAA8B;wBAC5B,oCAAoC,CAAC;oBACvC;oBAEA,0BAA0B;wBACxB,8BAA8B;4BAC5B,sBAAsB,CAAC;wBACzB;oBACF;oBAEA,GAAGA,OAAOC,MAAM,CACd,CAACC,QAAQC,QAAW,CAAA;4BAClB,GAAGD,MAAM;4BACT,CAAC,CAAC,cAAc,EAAEC,MAAM,EAAE,CAAC,CAAC,EAAE;gCAC5B,8BAA8B;oCAC5B,CAAC,CAAC,UAAU,EAAEA,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC;gCAC3C;4BACF;wBACF,CAAA,GACA,CAAC,EACF;oBACD,4BAA4B;wBAC1B,8BAA8B;4BAC5B,6BAA6B,CAAC;wBAChC;oBACF;gBACF;YACF;YAEA,YAAY;gBACV,gBAAgB,CAAC;YACnB;YAEA,aAAa;gBACX,iCAAiC;oBAC/B,iBAAiB,CAAC;gBACpB;YACF;QACF;IACF,CAAA"}