@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/StatusLight.css

@@ -1,25 +1,25 @@
 @layer _.a {
-  .sd13 {
+  .sd15 {
     display: flex;
   }
 
-  .Uc13 {
+  .Uc15 {
     row-gap: .428571em;
   }
 
-  .qc13 {
+  .qc15 {
     column-gap: .428571em;
   }
 
-  .ea13 {
+  .ea15 {
     align-items: baseline;
   }
 
-  .ZJ13 {
+  .ZJ15 {
     width: fit-content;
   }
 
-  .uk13 {
+  .uk15 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
@@ -27,39 +27,39 @@
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-c13 {
+  .-_6BNtrc-c15 {
     --fs: pow(1.125, 0);
   }
 
-  .-_6BNtrc-a13 {
+  .-_6BNtrc-a15 {
     --fs: pow(1.125, -2);
   }
 
-  .-_6BNtrc-b13 {
+  .-_6BNtrc-b15 {
     --fs: pow(1.125, -1);
   }
 
-  .-_6BNtrc-d13 {
+  .-_6BNtrc-d15 {
     --fs: pow(1.125, 1);
   }
 
-  .-_6BNtrc-e13 {
+  .-_6BNtrc-e15 {
     --fs: pow(1.125, 2);
   }
 
-  .vx13 {
+  .vx15 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb13 {
+  .xb15 {
     font-weight: 400;
   }
 
-  ._xa13 {
+  ._xa15 {
     font-synthesis-weight: none;
   }
 
-  ._Fd13 {
+  ._Fd15 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
@@ -67,198 +67,198 @@
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .pt13 {
+  .pt15 {
     color: light-dark(#292929, #dbdbdb);
   }
 
-  .pn13 {
+  .pn15 {
     color: light-dark(#717171, #8a8a8a);
   }
 
-  .__ca13 {
+  .__ca15 {
     -webkit-tap-highlight-color: #0000;
   }
 
-  .Zh13 {
+  .Zh15 {
     width: calc(.5rem * var(--s2-scale));
   }
 
-  .Zi13 {
+  .Zi15 {
     width: calc(.625rem * var(--s2-scale));
   }
 
-  .Zj13 {
+  .Zj15 {
     width: calc(.75rem * var(--s2-scale));
   }
 
-  .Zk13 {
+  .Zk15 {
     width: calc(.875rem * var(--s2-scale));
   }
 
-  .Fi13 {
+  .Fi15 {
     height: calc(.5rem * var(--s2-scale));
   }
 
-  .Fj13 {
+  .Fj15 {
     height: calc(.625rem * var(--s2-scale));
   }
 
-  .Fk13 {
+  .Fk15 {
     height: calc(.75rem * var(--s2-scale));
   }
 
-  .Fl13 {
+  .Fl15 {
     height: calc(.875rem * var(--s2-scale));
   }
 
-  .tu13 {
+  .tu15 {
     fill: light-dark(#4b75ff, #5681ff);
   }
 
-  .tf13 {
+  .tf15 {
     fill: light-dark(#8f8f8f, #8a8a8a);
   }
 
-  .tt13 {
+  .tt15 {
     fill: light-dark(#079355, #099d59);
   }
 
-  .tm13 {
+  .tm15 {
     fill: light-dark(#d45b00, #e06400);
   }
 
-  .tq13 {
+  .tq15 {
     fill: light-dark(#f03823, #fc432e);
   }
 
-  .tv13 {
+  .tv15 {
     fill: light-dark(#52a119, #428612);
   }
 
-  .tg13 {
+  .tg15 {
     fill: light-dark(#8fac00, #7a9300);
   }
 
-  .ts13 {
+  .ts15 {
     fill: light-dark(#30a7fe, #188edc);
   }
 
-  .tk13 {
+  .tk15 {
     fill: light-dark(#c844dc, #d549eb);
   }
 
-  .ti13 {
+  .ti15 {
     fill: light-dark(#a65ce7, #ad69e9);
   }
 
-  .tp13 {
+  .tp15 {
     fill: light-dark(#f02d6e, #f37);
   }
 
-  .td13 {
+  .td15 {
     fill: light-dark(#7a6afd, #8077fe);
   }
 
-  .tc13 {
+  .tc15 {
     fill: light-dark(#0ba286, #088670);
   }
 
-  .tl13 {
+  .tl15 {
     fill: light-dark(#d29500, #da9f00);
   }
 
-  .to13 {
+  .to15 {
     fill: light-dark(#e434a3, #ec43af);
   }
 
-  .tb13 {
+  .tb15 {
     fill: light-dark(#0a8d99, #0b97a4);
   }
 
-  .tj13 {
+  .tj15 {
     fill: light-dark(#b86d46, #c07750);
   }
 
-  .th13 {
+  .th15 {
     fill: light-dark(#9a7b4d, #a38454);
   }
 
-  .te13 {
+  .te15 {
     fill: light-dark(gray, #898989);
   }
 
-  .tn13 {
+  .tn15 {
     fill: light-dark(#e1e1e1, #323232);
   }
 
-  ._Ne13 {
+  ._Ne15 {
     overflow-x: visible;
   }
 
-  .Pe13 {
+  .Pe15 {
     overflow-y: visible;
   }
 }
 
 @layer _.b {
-  .ucJ9TBTb13:lang(ar) {
+  .ucJ9TBTb15:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUweb13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb15:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 }
 
 @layer _.c {
-  .ud3Euai13:lang(he) {
+  .ud3Euai15:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea13:lang(ja) {
+  .uea15:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb13:lang(ko) {
+  .ugb15:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd13:lang(zh) {
+  .uhd15:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje13:lang(zh-hant) {
+  .uje15:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .u2NhKxcl13:lang(zh-HK) {
+  .u2NhKxcl15:lang(zh-HK) {
     font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.i {
-  .uic13:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic15:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
 
 @layer _.b.s {
   @media not ((hover: hover) and (pointer: fine)) {
-    .Usd13 {
+    .Usd15 {
       row-gap: .470588em;
     }
 
-    .qsd13 {
+    .qsd15 {
       column-gap: .470588em;
     }
   }

package/dist/private/StatusLight.css.map

@@ -1 +1 @@
-{"mappings":"ACuDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAfE;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA","sources":["dcb557d93c6b9336","packages/@react-spectrum/s2/src/StatusLight.tsx"],"sourcesContent":["@import \"f9aed9e8e46292d1\";\n@import \"946093cc8d031f9b\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from './useDOMRef';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n  /**\n   * The variant changes the color of the status light.\n   * When status lights have a semantic meaning, they should use the variant for semantic colors.\n   *\n   * @default 'neutral'\n   */\n  variant?: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n  /**\n   * The size of the StatusLight.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display as the label.\n   */\n  children?: ReactNode,\n  /**\n   * An accessibility role for the status light. Should be set when the status\n   * can change at runtime, and no more than one status light will update simultaneously.\n   * For cases where multiple statuses can change at the same time, use a Toast instead.\n   */\n  role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n  display: 'flex',\n  gap: 'text-to-visual',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: controlFont(),\n  color: {\n    default: 'neutral',\n    variant: {\n      neutral: 'gray-600'\n    }\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n  size: {\n    size: {\n      S: 8,\n      M: 10,\n      L: 12,\n      XL: 14\n    }\n  },\n  fill: {\n    variant: {\n      informative: 'informative',\n      neutral: 'neutral',\n      positive: 'positive',\n      notice: 'notice',\n      negative: 'negative',\n      celery: 'celery',\n      chartreuse: 'chartreuse',\n      cyan: 'cyan',\n      fuchsia: 'fuchsia',\n      purple: 'purple',\n      magenta: 'magenta',\n      indigo: 'indigo',\n      seafoam: 'seafoam',\n      yellow: 'yellow',\n      pink: 'pink',\n      turquoise: 'turquoise',\n      cinnamon: 'cinnamon',\n      brown: 'brown',\n      silver: 'silver'\n    },\n    isSkeleton: 'gray-200'\n  },\n  overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n  let {children, size = 'M', variant = 'neutral', role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let domRef = useDOMRef(ref);\n  let isSkeleton = useIsSkeleton();\n\n  if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') {\n    console.warn('If no children are provided, an aria-label must be specified');\n  }\n\n  if (!role && (props['aria-label'] || props['aria-labelledby']) && process.env.NODE_ENV !== 'production') {\n    console.warn('A labelled StatusLight must have a role.');\n  }\n\n  return (\n    <div\n      {...filterDOMProps(props, {labelable: !!role})}\n      ref={domRef}\n      role={role}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({size, variant}, styles)}>\n      <CenterBaseline>\n        <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n          <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n        </svg>\n      </CenterBaseline>\n      <Text>{children}</Text>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"StatusLight.css.map"}
+{"mappings":"AC4EgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkBF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAlBE;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA","sources":["dcb557d93c6b9336","packages/@react-spectrum/s2/src/StatusLight.tsx"],"sourcesContent":["@import \"f9aed9e8e46292d1\";\n@import \"946093cc8d031f9b\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from './useDOMRef';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n  /**\n   * The variant changes the color of the status light.\n   * When status lights have a semantic meaning, they should use the variant for semantic colors.\n   *\n   * @default 'neutral'\n   */\n  variant?:\n    | 'informative'\n    | 'neutral'\n    | 'positive'\n    | 'notice'\n    | 'negative'\n    | 'celery'\n    | 'chartreuse'\n    | 'cyan'\n    | 'fuchsia'\n    | 'purple'\n    | 'magenta'\n    | 'indigo'\n    | 'seafoam'\n    | 'yellow'\n    | 'pink'\n    | 'turquoise'\n    | 'cinnamon'\n    | 'brown'\n    | 'silver';\n  /**\n   * The size of the StatusLight.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n}\n\nexport interface StatusLightProps\n  extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display as the label.\n   */\n  children?: ReactNode;\n  /**\n   * An accessibility role for the status light. Should be set when the status\n   * can change at runtime, and no more than one status light will update simultaneously.\n   * For cases where multiple statuses can change at the same time, use a Toast instead.\n   */\n  role?: 'status';\n}\n\nexport const StatusLightContext =\n  createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>(\n  {\n    display: 'flex',\n    gap: 'text-to-visual',\n    alignItems: 'baseline',\n    width: 'fit',\n    font: controlFont(),\n    color: {\n      default: 'neutral',\n      variant: {\n        neutral: 'gray-600'\n      }\n    },\n    disableTapHighlight: true\n  },\n  getAllowedOverrides()\n);\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n  size: {\n    size: {\n      S: 8,\n      M: 10,\n      L: 12,\n      XL: 14\n    }\n  },\n  fill: {\n    variant: {\n      informative: 'informative',\n      neutral: 'neutral',\n      positive: 'positive',\n      notice: 'notice',\n      negative: 'negative',\n      celery: 'celery',\n      chartreuse: 'chartreuse',\n      cyan: 'cyan',\n      fuchsia: 'fuchsia',\n      purple: 'purple',\n      magenta: 'magenta',\n      indigo: 'indigo',\n      seafoam: 'seafoam',\n      yellow: 'yellow',\n      pink: 'pink',\n      turquoise: 'turquoise',\n      cinnamon: 'cinnamon',\n      brown: 'brown',\n      silver: 'silver'\n    },\n    isSkeleton: 'gray-200'\n  },\n  overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(\n  props: StatusLightProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n  let {\n    children,\n    size = 'M',\n    variant = 'neutral',\n    role,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles\n  } = props;\n  let domRef = useDOMRef(ref);\n  let isSkeleton = useIsSkeleton();\n\n  if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') {\n    console.warn('If no children are provided, an aria-label must be specified');\n  }\n\n  if (\n    !role &&\n    (props['aria-label'] || props['aria-labelledby']) &&\n    process.env.NODE_ENV !== 'production'\n  ) {\n    console.warn('A labelled StatusLight must have a role.');\n  }\n\n  return (\n    <div\n      {...filterDOMProps(props, {labelable: !!role})}\n      ref={domRef}\n      role={role}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({size, variant}, styles)}>\n      <CenterBaseline>\n        <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n          <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n        </svg>\n      </CenterBaseline>\n      <Text>{children}</Text>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"StatusLight.css.map"}

package/dist/private/StatusLight.mjs

@@ -35,149 +35,149 @@ const $cd71613dba8ee178$var$wrapper = function anonymous(props, overrides) {
         if (p[1] === "Z") width = true;
         rules += p[0];
     }
-    rules += ' sd13';
-    rules += ' Uc13';
-    rules += ' Usd13';
-    rules += ' qc13';
-    rules += ' qsd13';
-    rules += ' ea13';
-    if (!width) rules += ' ZJ13';
+    rules += ' sd15';
+    rules += ' Uc15';
+    rules += ' Usd15';
+    rules += ' qc15';
+    rules += ' qsd15';
+    rules += ' ea15';
+    if (!width) rules += ' ZJ15';
     if (props.size === "XL") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
+        rules += ' uk15';
+        rules += ' ucJ9TBTb15';
+        rules += ' ud3Euai15';
+        rules += ' uea15';
+        rules += ' ugb15';
+        rules += ' uhd15';
+        rules += ' uje15';
+        rules += ' u2NhKxcl15';
+        rules += ' uic15';
     } else if (props.size === "L") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
+        rules += ' uk15';
+        rules += ' ucJ9TBTb15';
+        rules += ' ud3Euai15';
+        rules += ' uea15';
+        rules += ' ugb15';
+        rules += ' uhd15';
+        rules += ' uje15';
+        rules += ' u2NhKxcl15';
+        rules += ' uic15';
     } else if (props.size === "S") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
+        rules += ' uk15';
+        rules += ' ucJ9TBTb15';
+        rules += ' ud3Euai15';
+        rules += ' uea15';
+        rules += ' ugb15';
+        rules += ' uhd15';
+        rules += ' uje15';
+        rules += ' u2NhKxcl15';
+        rules += ' uic15';
     } else if (props.size === "XS") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
+        rules += ' uk15';
+        rules += ' ucJ9TBTb15';
+        rules += ' ud3Euai15';
+        rules += ' uea15';
+        rules += ' ugb15';
+        rules += ' uhd15';
+        rules += ' uje15';
+        rules += ' u2NhKxcl15';
+        rules += ' uic15';
     } else {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
+        rules += ' uk15';
+        rules += ' ucJ9TBTb15';
+        rules += ' ud3Euai15';
+        rules += ' uea15';
+        rules += ' ugb15';
+        rules += ' uhd15';
+        rules += ' uje15';
+        rules += ' u2NhKxcl15';
+        rules += ' uic15';
     }
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-e15';
+        rules += ' vx15';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-d15';
+        rules += ' vx15';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-b15';
+        rules += ' vx15';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a15';
+        rules += ' vx15';
     } else {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-c15';
+        rules += ' vx15';
     }
     if (props.size === "XL") {
-        rules += ' xb13';
-        rules += ' _xa13';
+        rules += ' xb15';
+        rules += ' _xa15';
     } else if (props.size === "L") {
-        rules += ' xb13';
-        rules += ' _xa13';
+        rules += ' xb15';
+        rules += ' _xa15';
     } else if (props.size === "S") {
-        rules += ' xb13';
-        rules += ' _xa13';
+        rules += ' xb15';
+        rules += ' _xa15';
     } else if (props.size === "XS") {
-        rules += ' xb13';
-        rules += ' _xa13';
+        rules += ' xb15';
+        rules += ' _xa15';
     } else {
-        rules += ' xb13';
-        rules += ' _xa13';
+        rules += ' xb15';
+        rules += ' _xa15';
     }
     if (props.size === "XL") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+        rules += ' _Fd15';
+        rules += ' _FnuYUweb15';
     } else if (props.size === "L") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+        rules += ' _Fd15';
+        rules += ' _FnuYUweb15';
     } else if (props.size === "S") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+        rules += ' _Fd15';
+        rules += ' _FnuYUweb15';
     } else if (props.size === "XS") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+        rules += ' _Fd15';
+        rules += ' _FnuYUweb15';
     } else {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+        rules += ' _Fd15';
+        rules += ' _FnuYUweb15';
     }
-    if (props.variant === "neutral") rules += ' pn13';
-    else rules += ' pt13';
-    rules += ' __ca13';
+    if (props.variant === "neutral") rules += ' pn15';
+    else rules += ' pt15';
+    rules += ' __ca15';
     return rules;
 };
 const $cd71613dba8ee178$var$light = function anonymous(props) {
     let rules = " ";
-    if (props.size === "XL") rules += ' Zk13';
-    else if (props.size === "L") rules += ' Zj13';
-    else if (props.size === "M") rules += ' Zi13';
-    else if (props.size === "S") rules += ' Zh13';
-    if (props.size === "XL") rules += ' Fl13';
-    else if (props.size === "L") rules += ' Fk13';
-    else if (props.size === "M") rules += ' Fj13';
-    else if (props.size === "S") rules += ' Fi13';
-    if (props.isSkeleton) rules += ' tn13';
-    else if (props.variant === "silver") rules += ' te13';
-    else if (props.variant === "brown") rules += ' th13';
-    else if (props.variant === "cinnamon") rules += ' tj13';
-    else if (props.variant === "turquoise") rules += ' tb13';
-    else if (props.variant === "pink") rules += ' to13';
-    else if (props.variant === "yellow") rules += ' tl13';
-    else if (props.variant === "seafoam") rules += ' tc13';
-    else if (props.variant === "indigo") rules += ' td13';
-    else if (props.variant === "magenta") rules += ' tp13';
-    else if (props.variant === "purple") rules += ' ti13';
-    else if (props.variant === "fuchsia") rules += ' tk13';
-    else if (props.variant === "cyan") rules += ' ts13';
-    else if (props.variant === "chartreuse") rules += ' tg13';
-    else if (props.variant === "celery") rules += ' tv13';
-    else if (props.variant === "negative") rules += ' tq13';
-    else if (props.variant === "notice") rules += ' tm13';
-    else if (props.variant === "positive") rules += ' tt13';
-    else if (props.variant === "neutral") rules += ' tf13';
-    else if (props.variant === "informative") rules += ' tu13';
-    rules += ' _Ne13';
-    rules += ' Pe13';
+    if (props.size === "XL") rules += ' Zk15';
+    else if (props.size === "L") rules += ' Zj15';
+    else if (props.size === "M") rules += ' Zi15';
+    else if (props.size === "S") rules += ' Zh15';
+    if (props.size === "XL") rules += ' Fl15';
+    else if (props.size === "L") rules += ' Fk15';
+    else if (props.size === "M") rules += ' Fj15';
+    else if (props.size === "S") rules += ' Fi15';
+    if (props.isSkeleton) rules += ' tn15';
+    else if (props.variant === "silver") rules += ' te15';
+    else if (props.variant === "brown") rules += ' th15';
+    else if (props.variant === "cinnamon") rules += ' tj15';
+    else if (props.variant === "turquoise") rules += ' tb15';
+    else if (props.variant === "pink") rules += ' to15';
+    else if (props.variant === "yellow") rules += ' tl15';
+    else if (props.variant === "seafoam") rules += ' tc15';
+    else if (props.variant === "indigo") rules += ' td15';
+    else if (props.variant === "magenta") rules += ' tp15';
+    else if (props.variant === "purple") rules += ' ti15';
+    else if (props.variant === "fuchsia") rules += ' tk15';
+    else if (props.variant === "cyan") rules += ' ts15';
+    else if (props.variant === "chartreuse") rules += ' tg15';
+    else if (props.variant === "celery") rules += ' tv15';
+    else if (props.variant === "negative") rules += ' tq15';
+    else if (props.variant === "notice") rules += ' tm15';
+    else if (props.variant === "positive") rules += ' tt15';
+    else if (props.variant === "neutral") rules += ' tf15';
+    else if (props.variant === "informative") rules += ' tu15';
+    rules += ' _Ne15';
+    rules += ' Pe15';
     return rules;
 };
 const $cd71613dba8ee178$export$5f84c37a31c6e41c = /*#__PURE__*/ (0, $2PVgW$forwardRef)(function StatusLight(props, ref) {