skillgrid 0.0.88 → 0.0.90

package/dist/assets/components/Radio/Radio.module-C97VGndQ.css

@@ -0,0 +1 @@
+:root{--radio-background-neutral: #FFFFFF;--radio-border-neutral: var(--base-graphite-90);--radio-icon-neutral: #FFFFFF;--radio-background-accent: var(--brand-primary-500);--radio-background-accent-hovered: var(--brand-primary-550);--radio-background-negative: var(--base-red-60);--radio-border-negative: var(--base-red-60);--radio-background-secondary: var(--base-graphite-85);--radio-border-secondary: var(--base-graphite-95);--radio-icon-secondary: var(--base-graphite-95);--radio-focused-accent: color-mix(in srgb, var(--brand-primary-500) 48%, transparent);--radio-focused-negative: color-mix(in srgb, var(--base-red-60) 48%, transparent);--radio-focused-secondary: color-mix(in srgb, var(--radio-background-secondary) 48%, transparent);--radio-animation-ease-in-out-200: all .2s ease-in-out;--radio-animation-ease-in-out-tiger-200: all .2s ease-in-out;--radio-scale-pressed: 1.05;--radio-size-small: 16.67px;--radio-size-medium: 16.67px;--radio-size-large: 20px;--radio-padding: 2px;--radio-border-width: 1.5px;--radio-focus-ring-width: 4px;--radio-icon-size: 8px;--radio-gap: 10px;--radio-mode-card-xl-padding: 16px;--radio-mode-card-m-padding: 14px;--radio-mode-card-s-padding: 10px 8px;--radio-mode-card-border-radius: 12px;--radio-mode-card-border: 1px solid var(--radio-border-neutral);--radio-label-font-size: 14px;--radio-label-line-height: 20px}._default_1mtjf_53{display:flex}._radio_1mtjf_59{cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:var(--radio-padding);color:var(--radio-icon-neutral);border-radius:50%;transition:var(--radio-animation-ease-in-out-tiger-200)}._radio_1mtjf_59._checked_1mtjf_78 ._background_1mtjf_78{fill:var(--radio-background-accent)}._radio_1mtjf_59._checked_1mtjf_78 ._outline_1mtjf_82{opacity:0}._radio_1mtjf_59._error_1mtjf_86 ._outline_1mtjf_82{stroke:var(--radio-border-negative)}._radio_1mtjf_59._error_1mtjf_86._checked_1mtjf_78 ._background_1mtjf_78{fill:var(--radio-background-negative)}._radio_1mtjf_59._disabled_1mtjf_94{cursor:not-allowed}._radio_1mtjf_59._disabled_1mtjf_94 ._outline_1mtjf_82{stroke:var(--radio-border-secondary)}._radio_1mtjf_59._checked_1mtjf_78._disabled_1mtjf_94 ._background_1mtjf_78{fill:var(--radio-background-secondary)}._radio_1mtjf_59:focus-visible:not(._disabled_1mtjf_94){outline:none;box-shadow:0 0 0 var(--radio-focus-ring-width) var(--radio-focused-accent)}._radio_1mtjf_59._checked_1mtjf_78:focus-visible:not(._disabled_1mtjf_94){outline:none;box-shadow:0 0 0 var(--radio-focus-ring-width) var(--radio-focused-accent)}._radio_1mtjf_59._error_1mtjf_86:focus-visible:not(._disabled_1mtjf_94){outline:none;box-shadow:0 0 0 var(--radio-focus-ring-width) var(--radio-focused-negative)}._radio_1mtjf_59._disabled_1mtjf_94:focus-visible{outline:none;box-shadow:0 0 0 var(--radio-focus-ring-width) var(--radio-focused-secondary)}._iconBaseline_1mtjf_127{display:block;width:var(--radio-icon-size);height:var(--radio-icon-size)}._icon_1mtjf_127{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;overflow:visible;width:100%;height:100%}._background_1mtjf_78{r:50%;fill:var(--radio-background-neutral);transition:var(--radio-animation-ease-in-out-tiger-200)}._outline_1mtjf_82{r:calc(50% - var(--radio-border-width) / 2);fill:none;stroke:var(--radio-border-neutral);stroke-width:var(--radio-border-width);transition:var(--radio-animation-ease-in-out-tiger-200)}._dot_1mtjf_161{r:calc(var(--radio-icon-size) / 2);fill:currentcolor;transition:var(--radio-animation-ease-in-out-200)}._small_1mtjf_168{width:var(--radio-size-small);min-width:var(--radio-size-small);height:var(--radio-size-small);min-height:var(--radio-size-small)}._medium_1mtjf_175{width:var(--radio-size-medium);min-width:var(--radio-size-medium);height:var(--radio-size-medium);min-height:var(--radio-size-medium)}._large_1mtjf_182{width:var(--radio-size-large);min-width:var(--radio-size-large);height:var(--radio-size-large);min-height:var(--radio-size-large)}._label_1mtjf_189{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;gap:var(--radio-gap);align-items:center}._label_1mtjf_189[aria-disabled=true]{cursor:not-allowed}._label_1mtjf_189:hover ._radio_1mtjf_59:not(._checked_1mtjf_78,._error_1mtjf_86,._disabled_1mtjf_94) ._dot_1mtjf_161{fill:var(--radio-icon-secondary)}._label_1mtjf_189:hover ._radio_1mtjf_59._checked_1mtjf_78:not(._error_1mtjf_86,._disabled_1mtjf_94) ._background_1mtjf_78{fill:var(--radio-background-accent-hovered)}._label_1mtjf_189:active ._radio_1mtjf_59:not(._disabled_1mtjf_94){transform:scale(var(--radio-scale-pressed))}._container_1mtjf_215{display:flex;gap:var(--radio-gap);align-items:baseline;width:fit-content;font-family:var(--font-family);font-size:var(--radio-label-font-size);line-height:var(--radio-label-line-height);color:var(--text-primary)}._input_1mtjf_228{position:absolute;width:0;height:0;opacity:0}._card_1mtjf_235{padding:var(--radio-mode-card-m-padding);border:var(--radio-mode-card-border);border-radius:var(--radio-mode-card-border-radius)}._smallCard_1mtjf_241{padding:var(--radio-mode-card-s-padding)}._mediumCard_1mtjf_245{padding:var(--radio-mode-card-m-padding)}._largeCard_1mtjf_249{padding:var(--radio-mode-card-xl-padding)}[data-skillgridDarkTheme=true]{--radio-background-neutral: var(--bg-secondary);--radio-border-neutral: var(--stroke-neutral);--radio-icon-neutral: var(--bg-secondary);--radio-background-secondary: var(--stroke-neutral-disabled);--radio-border-secondary: var(--stroke-neutral);--radio-icon-secondary: var(--stroke-neutral)}

package/dist/assets/styles/{button.module-DjunAbRS.css → button.module-BG9KYkTN.css}

@@ -1 +1 @@
-:root{--button-background-neutral: var(--bg-dark);--button-text-neutral: var(--text-contrast);--button-postfix-text-neutral: var(--text-secondary);--button-icon-neutral: var(--icon-contrast);--button-background-accent: var(--bg-accent);--button-text-accent: var(--text-contrast);--button-postfix-text-accent: var(--text-accent-80);--button-icon-accent: var(--icon-contrast);--button-background-gray: transparent;--button-text-gray: var(--text-secondary);--button-postfix-text-gray: var(--text-tertiary);--button-icon-gray: var(--icon-secondary);--button-background-positive: var(--bg-positive);--button-text-positive: var(--text-invert);--button-postfix-text-positive: var(--text-positive-tertiary);--button-icon-positive: var(--icon-contrast);--button-background-negative: var(--bg-negative);--button-text-negative: var(--text-invert);--button-postfix-text-negative: var(--text-negative-tertiary);--button-icon-negative: var(--icon-contrast);--button-background-contrast: var(--bg-primary);--button-text-contrast: var(--text-primary);--button-postfix-text-contrast: var(--text-secondary);--button-icon-contrast: var(--icon-primary);--button-background-dreamy: var(--bg-dreamy);--button-text-dreamy: var(--text-invert);--button-postfix-text-dreamy: var(--text-dreamy-tertiary);--button-icon-dreamy: var(--icon-contrast);--button-background-special: var(--bg-special-dark);--button-text-special: var(--text-contrast);--button-postfix-text-special: var(--text-special-tertiary);--button-icon-special: var(--icon-contrast);--button-background-lovely: var(--bg-lovely);--button-text-lovely: var(--text-contrast);--button-postfix-text-lovely: var(--text-lovely-tertiary);--button-icon-lovely: var(--icon-contrast);--button-background-warning: var(--bg-warning);--button-text-warning: var(--text-contrast);--button-postfix-text-warning: var(--text-warning-tertiary);--button-icon-warning: var(--icon-contrast);--button-background-vivid: var(--bg-vivid);--button-text-vivid: var(--text-vivid-dark);--button-postfix-text-vivid: var(--text-vivid-tertiary);--button-icon-vivid: var(--icon-vivid-dark);--button-background-blue: var(--bg-blue);--button-text-blue: var(--text-contrast);--button-postfix-text-blue: var(--text-blue-tertiary);--button-icon-blue: var(--icon-contrast);--button-background-neutral-secondary: var(--bg-secondary);--button-text-neutral-secondary: var(--text-primary);--button-postfix-text-neutral-secondary: var(--text-secondary);--button-icon-neutral-secondary: var(--icon-primary);--button-background-state-accent-secondary: var(--bg-accent-secondary);--button-text-accent-secondary: var(--text-accent);--button-postfix-text-accent-secondary: var(--text-accent-65);--button-icon-accent-secondary: var(--icon-accent);--button-background-positive-secondary: var(--bg-positive-secondary);--button-text-positive-secondary: var(--text-positive);--button-postfix-text-positive-secondary: var(--text-positive-secondary);--button-icon-positive-secondary: var(--icon-positive);--button-background-negative-secondary: var(--bg-negative-secondary);--button-text-negative-secondary: var(--text-negative);--button-postfix-text-negative-secondary: var(--text-negative-secondary);--button-icon-negative-secondary: var(--icon-negative);--button-background-contrast-secondary: var(--bg-dark-tertiary);--button-text-contrast-secondary: var(--text-invert);--button-postfix-text-contrast-secondary: var(--text-secondary);--button-icon-contrast-secondary: var(--icon-contrast);--button-background-state-dreamy-secondary: var(--bg-dreamy-secondary);--button-text-dreamy-secondary: var(--text-dreamy);--button-postfix-text-dreamy-secondary: var(--text-dreamy-secondary);--button-icon-dreamy-secondary: var(--icon-dreamy-dark);--button-background-state-special-secondary: var(--bg-special-secondary);--button-text-special-secondary: var(--text-special);--button-postfix-text-special-secondary: var(--text-special-secondary);--button-icon-special-secondary: var(--icon-special);--button-background-state-lovely-secondary: var(--bg-lovely-secondary);--button-text-lovely-secondary: var(--text-lovely);--button-postfix-text-lovely-secondary: var(--text-lovely-secondary);--button-icon-lovely-secondary: var(--icon-lovely);--button-background-state-warning-secondary: var(--bg-warning-secondary);--button-text-warning-secondary: var(--text-warning);--button-postfix-text-warning-secondary: var(--text-warning-secondary);--button-icon-warning-secondary: var(--icon-warning-dark);--button-background-state-vivid-secondary: var(--bg-vivid-secondary);--button-text-vivid-secondary: var(--text-vivid);--button-postfix-text-vivid-secondary: var(--text-vivid-secondary);--button-icon-vivid-secondary: var(--icon-vivid-dark-secondary);--button-background-state-blue-secondary: var(--bg-blue-secondary);--button-text-blue-secondary: var(--text-blue);--button-postfix-text-blue-secondary: var(--text-blue-65);--button-icon-blue-secondary: var(--icon-blue);--button-background-neutral-tertiary: transparent;--button-text-neutral-tertiary: var(--text-primary);--button-postfix-text-neutral-tertiary: var(--text-secondary);--button-icon-neutral-tertiary: var(--icon-primary);--button-background-accent-tertiary: transparent;--button-text-accent-tertiary: var(--text-accent);--button-postfix-text-accent-tertiary: var(--text-accent-70);--button-icon-accent-tertiary: var(--icon-accent);--button-background-positive-tertiary: transparent;--button-text-positive-tertiary: var(--text-positive);--button-postfix-text-positive-tertiary: var(--text-positive-secondary);--button-icon-positive-tertiary: var(--icon-positive);--button-background-negative-tertiary: transparent;--button-text-negative-tertiary: var(--text-negative);--button-postfix-text-negative-tertiary: var(--text-negative-secondary);--button-icon-negative-tertiary: var(--icon-negative);--button-background-contrast-tertiary: transparent;--button-text-contrast-tertiary: var(--text-invert);--button-postfix-text-contrast-tertiary: var(--text-secondary);--button-icon-contrast-tertiary: var(--icon-contrast);--button-background-dreamy-tertiary: transparent;--button-text-dreamy-tertiary: var(--text-dreamy);--button-postfix-text-dreamy-tertiary: var(--text-dreamy-secondary);--button-icon-dreamy-tertiary: var(--icon-dreamy-dark);--button-background-special-tertiary: transparent;--button-text-special-tertiary: var(--text-special);--button-postfix-text-special-tertiary: var(--text-special-secondary);--button-icon-special-tertiary: var(--icon-special);--button-background-lovely-tertiary: transparent;--button-text-lovely-tertiary: var(--text-lovely);--button-postfix-text-lovely-tertiary: var(--text-lovely-secondary);--button-icon-lovely-tertiary: var(--icon-lovely);--button-background-warning-tertiary: transparent;--button-text-warning-tertiary: var(--text-warning);--button-postfix-text-warning-tertiary: var(--text-warning-secondary);--button-icon-warning-tertiary: var(--icon-warning-dark);--button-background-vivid-tertiary: transparent;--button-text-vivid-tertiary: var(--text-vivid);--button-postfix-text-vivid-tertiary: var(--text-vivid-secondary);--button-icon-vivid-tertiary: var(--icon-vivid-dark-secondary);--button-background-blue-tertiary: transparent;--button-text-blue-tertiary: var(--text-blue);--button-postfix-text-blue-tertiary: var(--text-blue-tertiary);--button-icon-blue-tertiary: var(--icon-blue);--button-background-state-neutral-hovered: var(--base-graphite-25);--button-background-state-neutral-pressed: var(--bg-dark);--button-background-state-neutral-focused: var(--button-background-state-neutral-pressed);--button-background-state-neutral-disabled: var(--bg-tertiary);--button-text-state-neutral-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-neutral-disabled: var(--text-tertiary);--button-icon-state-neutral-disabled: var(--button-icon-neutral);--button-background-state-neutral-secondary-hovered: var(--base-graphite-97);--button-background-state-neutral-secondary-pressed: var(--bg-secondary);--button-background-state-neutral-secondary-disabled: var(--bg-disabled);--button-background-state-neutral-tertiary-hovered: var(--bg-secondary);--button-background-state-neutral-tertiary-pressed: transparent;--button-background-state-neutral-tertiary-disabled: transparent;--button-background-state-accent-hovered: var(--bg-accent-55);--button-background-state-accent-pressed: var(--bg-accent);--button-background-state-accent-focused: var(--bg-accent);--button-background-state-accent-disabled: var(--bg-tertiary);--button-text-state-accent-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-accent-disabled: var(--text-tertiary);--button-icon-state-accent-disabled: var(--icon-disabled);--button-background-state-accent-secondary-hovered: var(--brand-primary-970);--button-background-state-accent-secondary-pressed: var(--bg-accent-secondary);--button-background-state-accent-secondary-disabled: var(--bg-disabled);--button-background-state-accent-tertiary-hovered: var(--bg-accent-secondary);--button-background-state-accent-tertiary-pressed: transparent;--button-background-state-accent-tertiary-disabled: transparent;--button-background-state-gray-hovered: var(--bg-secondary);--button-text-state-gray-hovered: var(--text-primary);--button-postfix-text-state-gray-hovered: var(--text-tertiary);--button-icon-state-gray-hovered: var(--icon-primary);--button-background-state-gray-pressed: transparent;--button-background-state-gray-focused: var(--bg-secondary);--button-background-state-gray-disabled: transparent;--button-text-state-gray-disabled: var(--text-state-secondary-disabled);--button-postfix-text-state-gray-disabled: var(--text-state-secondary-disabled);--button-icon-state-gray-disabled: var(--base-graphite-85);--button-background-state-positive-hovered: var(--bg-positive-hover);--button-background-state-positive-pressed: var(--bg-positive);--button-background-state-positive-focused: var(--bg-positive);--button-background-state-positive-disabled: var(--bg-tertiary);--button-text-state-positive-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-positive-disabled: var(--text-tertiary);--button-icon-state-positive-disabled: var(--icon-disabled);--button-background-state-positive-secondary-hovered: var(--base-green-97);--button-background-state-positive-secondary-pressed: var(--bg-positive-secondary);--button-background-state-positive-secondary-disabled: var(--bg-disabled);--button-background-state-positive-tertiary-hovered: var(--base-green-97);--button-background-state-positive-tertiary-pressed: transparent;--button-background-state-positive-tertiary-disabled: transparent;--button-background-state-negative-hovered: var(--bg-negative-hover);--button-background-state-negative-pressed: var(--bg-negative);--button-background-state-negative-focused: var(--button-background-state-negative-pressed);--button-background-state-negative-disabled: var(--bg-tertiary);--button-text-state-negative-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-negative-disabled: var(--text-tertiary);--button-icon-state-negative-disabled: var(--icon-disabled);--button-background-state-negative-secondary-hovered: var(--base-red-97);--button-background-state-negative-secondary-pressed: var(--bg-negative-secondary);--button-background-state-negative-secondary-disabled: var(--bg-disabled);--button-background-state-negative-tertiary-hovered: var(--base-red-97);--button-background-state-negative-tertiary-pressed: transparent;--button-background-state-negative-tertiary-disabled: transparent;--button-background-state-contrast-hovered: var(--base-graphite-95);--button-background-state-contrast-pressed: var(--bg-primary);--button-background-state-contrast-focused: var(--button-background-state-contrast-pressed);--button-background-state-contrast-disabled: var(--base-graphite-40);--button-text-state-contrast-disabled: var(--base-graphite-25);--button-postfix-text-state-contrast-disabled: var(--base-graphite-30);--button-icon-state-contrast-disabled: var(--base-graphite-25);--button-background-state-contrast-secondary-hovered: var(--base-graphite-35);--button-background-state-contrast-secondary-pressed: var(--bg-dark-tertiary);--button-background-state-contrast-secondary-disabled: var(--base-graphite-15);--button-text-state-contrast-secondary-disabled: var(--base-graphite-45);--button-postfix-text-state-contrast-secondary-disabled: var(--base-graphite-30);--button-background-state-contrast-tertiary-hovered: var(--base-graphite-35);--button-background-state-contrast-tertiary-pressed: transparent;--button-background-state-contrast-tertiary-disabled: transparent;--button-text-state-contrast-tertiary-disabled: var(--base-graphite-40);--button-postfix-text-state-contrast-tertiary-disabled: var(--base-graphite-25);--button-background-state-dreamy-hovered: var(--bg-dreamy-hover);--button-background-state-dreamy-pressed: var(--bg-dreamy);--button-background-state-dreamy-focused: var(--bg-dreamy);--button-background-state-dreamy-disabled: var(--bg-tertiary);--button-text-state-dreamy-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-dreamy-disabled: var(--text-tertiary);--button-icon-state-dreamy-disabled: var(--icon-disabled);--button-background-state-dreamy-secondary-hovered: var(--bg-dreamy-secondary-hover);--button-background-state-dreamy-secondary-pressed: var(--bg-dreamy-secondary);--button-background-state-dreamy-secondary-focused: var(--bg-dreamy-secondary);--button-background-state-dreamy-secondary-disabled: var(--bg-disabled);--button-text-state-dreamy-secondary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-dreamy-secondary-disabled: var(--text-state-secondary-disabled);--button-icon-state-dreamy-secondary-disabled: var(--icon-disabled);--button-background-state-dreamy-tertiary-hovered: var(--bg-dreamy-secondary-hover);--button-background-state-dreamy-tertiary-pressed: transparent;--button-background-state-dreamy-tertiary-focused: transparent;--button-background-state-dreamy-tertiary-disabled: transparent;--button-text-state-dreamy-tertiary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-dreamy-tertiary-disabled: var(--text-state-secondary-disabled);--button-icon-state-dreamy-tertiary-disabled: var(--icon-disabled);--button-background-state-special-hovered: var(--bg-special-dark-hover);--button-background-state-special-pressed: var(--bg-special-dark);--button-background-state-special-focused: var(--bg-special-dark);--button-background-state-special-disabled: var(--bg-tertiary);--button-text-state-special-disabled: var(--text-tertiary);--button-postfix-text-state-special-disabled: var(--text-tertiary);--button-icon-state-special-disabled: var(--icon-disabled);--button-background-state-special-secondary-hovered: var(--bg-special-secondary-hover);--button-background-state-special-secondary-pressed: var(--bg-special-secondary);--button-background-state-special-secondary-focused: var(--bg-special-secondary);--button-background-state-special-secondary-disabled: var(--bg-disabled);--button-text-state-special-secondary-disabled: var(--text-tertiary);--button-postfix-text-state-special-secondary-disabled: var(--text-state-secondary-disabled);--button-icon-state-special-secondary-disabled: var(--icon-disabled);--button-background-state-special-tertiary-hovered: var(--bg-special-secondary-hover);--button-background-state-special-tertiary-pressed: transparent;--button-background-state-special-tertiary-focused: transparent;--button-background-state-special-tertiary-disabled: transparent;--button-text-state-special-tertiary-disabled: var(--text-tertiary);--button-postfix-text-state-special-tertiary-disabled: var(--text-state-secondary-disabled);--button-icon-state-special-tertiary-disabled: var(--icon-disabled);--button-background-state-lovely-hovered: var(--bg-lovely-hover-62);--button-background-state-lovely-pressed: var(--bg-lovely);--button-background-state-lovely-focused: var(--bg-lovely);--button-background-state-lovely-disabled: var(--bg-tertiary);--button-text-state-lovely-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-lovely-disabled: var(--text-tertiary);--button-icon-state-lovely-disabled: var(--icon-disabled);--button-background-state-lovely-secondary-hovered: var(--bg-lovely-secondary-hover);--button-background-state-lovely-secondary-pressed: var(--bg-lovely-secondary);--button-background-state-lovely-secondary-focused: var(--bg-lovely-secondary);--button-background-state-lovely-secondary-disabled: var(--bg-disabled);--button-text-state-lovely-secondary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-lovely-secondary-disabled: var(--text-state-secondary-disabled);--button-icon-state-lovely-secondary-disabled: var(--icon-disabled);--button-background-state-lovely-tertiary-hovered: var(--bg-lovely-secondary-hover);--button-background-state-lovely-tertiary-pressed: transparent;--button-background-state-lovely-tertiary-focused: transparent;--button-background-state-lovely-tertiary-disabled: transparent;--button-text-state-lovely-tertiary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-lovely-tertiary-disabled: var(--text-state-secondary-disabled);--button-icon-state-lovely-tertiary-disabled: var(--icon-disabled);--button-background-state-warning-hovered: var(--bg-warning-hover);--button-background-state-warning-pressed: var(--bg-warning);--button-background-state-warning-focused: var(--bg-warning);--button-background-state-warning-disabled: var(--bg-tertiary);--button-text-state-warning-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-warning-disabled: var(--text-tertiary);--button-icon-state-warning-disabled: var(--icon-disabled);--button-background-state-warning-secondary-hovered: var(--bg-warning-secondary-hover);--button-background-state-warning-secondary-pressed: var(--bg-warning-secondary);--button-background-state-warning-secondary-focused: var(--bg-warning-secondary);--button-background-state-warning-secondary-disabled: var(--bg-disabled);--button-text-state-warning-secondary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-warning-secondary-disabled: var(--text-state-secondary-disabled);--button-icon-state-warning-secondary-disabled: var(--icon-disabled);--button-background-state-warning-tertiary-hovered: var(--bg-warning-secondary-hover);--button-background-state-warning-tertiary-pressed: transparent;--button-background-state-warning-tertiary-focused: transparent;--button-background-state-warning-tertiary-disabled: transparent;--button-text-state-warning-tertiary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-warning-tertiary-disabled: var(--text-state-secondary-disabled);--button-icon-state-warning-tertiary-disabled: var(--icon-disabled);--button-background-state-vivid-hovered: var(--bg-vivid-hover-87);--button-background-state-vivid-pressed: var(--bg-vivid);--button-background-state-vivid-focused: var(--bg-vivid);--button-background-state-vivid-disabled: var(--bg-tertiary);--button-text-state-vivid-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-vivid-disabled: var(--text-tertiary);--button-icon-state-vivid-disabled: var(--icon-disabled);--button-background-state-vivid-secondary-hovered: var(--bg-vivid-secondary-hover);--button-background-state-vivid-secondary-pressed: var(--bg-vivid-secondary);--button-background-state-vivid-secondary-focused: var(--bg-vivid-secondary);--button-background-state-vivid-secondary-disabled: var(--bg-disabled);--button-text-state-vivid-secondary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-vivid-secondary-disabled: var(--text-state-secondary-disabled);--button-icon-state-vivid-secondary-disabled: var(--icon-disabled);--button-background-state-vivid-tertiary-hovered: var(--bg-vivid-secondary-hover);--button-background-state-vivid-tertiary-pressed: transparent;--button-background-state-vivid-tertiary-focused: transparent;--button-background-state-vivid-tertiary-disabled: transparent;--button-text-state-vivid-tertiary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-vivid-tertiary-disabled: var(--text-state-secondary-disabled);--button-icon-state-vivid-tertiary-disabled: var(--icon-disabled);--button-background-state-blue-hovered: var(--bg-blue-hover);--button-background-state-blue-pressed: var(--bg-blue);--button-background-state-blue-focused: var(--bg-blue);--button-background-state-blue-disabled: var(--bg-tertiary);--button-text-state-blue-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-blue-disabled: var(--text-tertiary);--button-icon-state-blue-disabled: var(--icon-disabled);--button-background-state-blue-secondary-hovered: var(--bg-blue-secondary-hover);--button-background-state-blue-secondary-pressed: var(--bg-blue-secondary);--button-background-state-blue-secondary-focused: var(--bg-blue-secondary);--button-background-state-blue-secondary-disabled: var(--bg-disabled);--button-text-state-blue-secondary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-blue-secondary-disabled: var(--text-state-secondary-disabled);--button-icon-state-blue-secondary-disabled: var(--icon-disabled);--button-background-state-blue-tertiary-hovered: var(--bg-blue-secondary-hover);--button-background-state-blue-tertiary-pressed: transparent;--button-background-state-blue-tertiary-focused: transparent;--button-background-state-blue-tertiary-disabled: transparent;--button-text-state-blue-tertiary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-blue-tertiary-disabled: var(--text-state-secondary-disabled);--button-icon-state-blue-tertiary-disabled: var(--icon-disabled);--button-stroke-state-neutral-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-accent-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-positive-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-negative-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-contrast-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-gray-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-dreamy-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-special-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-lovely-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-warning-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-vivid-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-blue-focused-accessible: var(--stroke-accent-disabled);--semantic-borderRadius-form: 12px;--semantic-borderRadius-200: 8px;--semantic-borderWidth-tab-focused: 4px;--semantic-animation-ease-in-out-200: background-color .2s ease-in-out;--semantic-animation-ease-in-out-400: background-color .4s ease-in-out;--semantic-color-animation-ease-in-out-400: color .4s ease-in-out;--semantic-scale-pressed: .96;--back-button-text: var(--text-primary);--back-button-icon: var(--icon-secondary);--back-button-icon-state-hovered: var(--icon-primary);--back-button-text-disabled: var(--text-state-primary-disabled);--back-button-icon-disabled: var(--icon-tertiary)}[data-skillgridDarkTheme=true]{--button-background-neutral: var(--base-gray-100);--button-text-neutral: var(--base-gray-0);--button-postfix-text-neutral: var(--base-graphite-55);--button-icon-neutral: var(--base-gray-0);--button-background-neutral-secondary: var(--bg-dark-secondary);--button-text-neutral-secondary: var(--text-invert);--button-postfix-text-neutral-secondary: var(--text-secondary);--button-icon-neutral-secondary: var(--icon-contrast);--button-background-neutral-tertiary: transparent;--button-text-neutral-tertiary: var(--text-primary);--button-postfix-text-neutral-tertiary: var(--text-secondary);--button-icon-neutral-tertiary: var(--icon-primary);--button-background-state-neutral-hovered: var(--base-graphite-96);--button-background-state-neutral-pressed: var(--base-graphite-90);--button-background-state-neutral-focused: var(--button-background-state-neutral-pressed);--button-background-state-neutral-disabled: var(--base-graphite-75);--button-text-state-neutral-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-neutral-disabled: var(--text-tertiary);--button-icon-state-neutral-disabled: var(--text-state-primary-disabled);--button-background-state-neutral-secondary-hovered: var(--base-graphite-20);--button-background-state-neutral-secondary-pressed: var(--base-graphite-10);--button-background-state-neutral-secondary-disabled: var(--bg-dark-secondary-disabled);--button-background-state-neutral-tertiary-hovered: var(--base-graphite-20);--button-background-state-neutral-tertiary-pressed: var(--base-graphite-10);--button-background-state-neutral-tertiary-disabled: var(--bg-dark-secondary-disabled);--button-background-state-negative-secondary-hovered: var(--base-red-15);--button-background-state-negative-secondary-pressed: var(--base-red-20);--button-background-state-negative-secondary-disabled: var(--bg-disabled);--button-background-state-negative-tertiary-hovered: var(--base-red-20)}
+:root{--button-background-neutral: var(--bg-dark);--button-text-neutral: var(--text-contrast);--button-postfix-text-neutral: var(--text-secondary);--button-icon-neutral: var(--icon-contrast);--button-background-accent: var(--bg-accent);--button-text-accent: var(--text-contrast);--button-postfix-text-accent: var(--text-accent-80);--button-icon-accent: var(--icon-contrast);--button-background-gray: transparent;--button-text-gray: var(--text-secondary);--button-postfix-text-gray: var(--text-tertiary);--button-icon-gray: var(--icon-secondary);--button-background-positive: var(--bg-positive);--button-text-positive: var(--text-invert);--button-postfix-text-positive: var(--text-positive-tertiary);--button-icon-positive: var(--icon-contrast);--button-background-negative: var(--bg-negative);--button-text-negative: var(--text-invert);--button-postfix-text-negative: var(--text-negative-tertiary);--button-icon-negative: var(--icon-contrast);--button-background-contrast: var(--bg-primary);--button-text-contrast: var(--text-primary);--button-postfix-text-contrast: var(--text-secondary);--button-icon-contrast: var(--icon-primary);--button-background-dreamy: var(--bg-dreamy);--button-text-dreamy: var(--text-invert);--button-postfix-text-dreamy: var(--text-dreamy-tertiary);--button-icon-dreamy: var(--icon-contrast);--button-background-special: var(--bg-special-dark);--button-text-special: var(--text-contrast);--button-postfix-text-special: var(--text-special-tertiary);--button-icon-special: var(--icon-contrast);--button-background-lovely: var(--bg-lovely);--button-text-lovely: var(--text-contrast);--button-postfix-text-lovely: var(--text-lovely-tertiary);--button-icon-lovely: var(--icon-contrast);--button-background-warning: var(--bg-warning);--button-text-warning: var(--text-contrast);--button-postfix-text-warning: var(--text-warning-tertiary);--button-icon-warning: var(--icon-contrast);--button-background-vivid: var(--bg-vivid);--button-text-vivid: var(--text-vivid-dark);--button-postfix-text-vivid: var(--text-vivid-tertiary);--button-icon-vivid: var(--icon-vivid-dark);--button-background-blue: var(--bg-blue);--button-text-blue: var(--text-contrast);--button-postfix-text-blue: var(--text-blue-tertiary);--button-icon-blue: var(--icon-contrast);--button-background-neutral-secondary: var(--bg-secondary);--button-text-neutral-secondary: var(--text-primary);--button-postfix-text-neutral-secondary: var(--text-secondary);--button-icon-neutral-secondary: var(--icon-primary);--button-background-state-accent-secondary: var(--bg-accent-secondary);--button-text-accent-secondary: var(--text-accent);--button-postfix-text-accent-secondary: var(--text-accent-65);--button-icon-accent-secondary: var(--icon-accent);--button-background-positive-secondary: var(--bg-positive-secondary);--button-text-positive-secondary: var(--text-positive);--button-postfix-text-positive-secondary: var(--text-positive-secondary);--button-icon-positive-secondary: var(--icon-positive);--button-background-negative-secondary: var(--bg-negative-secondary);--button-text-negative-secondary: var(--text-negative);--button-postfix-text-negative-secondary: var(--text-negative-secondary);--button-icon-negative-secondary: var(--icon-negative);--button-background-contrast-secondary: var(--bg-dark-tertiary);--button-text-contrast-secondary: var(--text-invert);--button-postfix-text-contrast-secondary: var(--text-secondary);--button-icon-contrast-secondary: var(--icon-contrast);--button-background-state-dreamy-secondary: var(--bg-dreamy-secondary);--button-text-dreamy-secondary: var(--text-dreamy);--button-postfix-text-dreamy-secondary: var(--text-dreamy-secondary);--button-icon-dreamy-secondary: var(--icon-dreamy-dark);--button-background-state-special-secondary: var(--bg-special-secondary);--button-text-special-secondary: var(--text-special);--button-postfix-text-special-secondary: var(--text-special-secondary);--button-icon-special-secondary: var(--icon-special);--button-background-state-lovely-secondary: var(--bg-lovely-secondary);--button-text-lovely-secondary: var(--text-lovely);--button-postfix-text-lovely-secondary: var(--text-lovely-secondary);--button-icon-lovely-secondary: var(--icon-lovely);--button-background-state-warning-secondary: var(--bg-warning-secondary);--button-text-warning-secondary: var(--text-warning);--button-postfix-text-warning-secondary: var(--text-warning-secondary);--button-icon-warning-secondary: var(--icon-warning-dark);--button-background-state-vivid-secondary: var(--bg-vivid-secondary);--button-text-vivid-secondary: var(--text-vivid);--button-postfix-text-vivid-secondary: var(--text-vivid-secondary);--button-icon-vivid-secondary: var(--icon-vivid-dark-secondary);--button-background-state-blue-secondary: var(--bg-blue-secondary);--button-text-blue-secondary: var(--text-blue);--button-postfix-text-blue-secondary: var(--text-blue-65);--button-icon-blue-secondary: var(--icon-blue);--button-background-neutral-tertiary: transparent;--button-text-neutral-tertiary: var(--text-primary);--button-postfix-text-neutral-tertiary: var(--text-secondary);--button-icon-neutral-tertiary: var(--icon-primary);--button-background-accent-tertiary: transparent;--button-text-accent-tertiary: var(--text-accent);--button-postfix-text-accent-tertiary: var(--text-accent-70);--button-icon-accent-tertiary: var(--icon-accent);--button-background-positive-tertiary: transparent;--button-text-positive-tertiary: var(--text-positive);--button-postfix-text-positive-tertiary: var(--text-positive-secondary);--button-icon-positive-tertiary: var(--icon-positive);--button-background-negative-tertiary: transparent;--button-text-negative-tertiary: var(--text-negative);--button-postfix-text-negative-tertiary: var(--text-negative-secondary);--button-icon-negative-tertiary: var(--icon-negative);--button-background-contrast-tertiary: transparent;--button-text-contrast-tertiary: var(--text-invert);--button-postfix-text-contrast-tertiary: var(--text-secondary);--button-icon-contrast-tertiary: var(--icon-contrast);--button-background-dreamy-tertiary: transparent;--button-text-dreamy-tertiary: var(--text-dreamy);--button-postfix-text-dreamy-tertiary: var(--text-dreamy-secondary);--button-icon-dreamy-tertiary: var(--icon-dreamy-dark);--button-background-special-tertiary: transparent;--button-text-special-tertiary: var(--text-special);--button-postfix-text-special-tertiary: var(--text-special-secondary);--button-icon-special-tertiary: var(--icon-special);--button-background-lovely-tertiary: transparent;--button-text-lovely-tertiary: var(--text-lovely);--button-postfix-text-lovely-tertiary: var(--text-lovely-secondary);--button-icon-lovely-tertiary: var(--icon-lovely);--button-background-warning-tertiary: transparent;--button-text-warning-tertiary: var(--text-warning);--button-postfix-text-warning-tertiary: var(--text-warning-secondary);--button-icon-warning-tertiary: var(--icon-warning-dark);--button-background-vivid-tertiary: transparent;--button-text-vivid-tertiary: var(--text-vivid);--button-postfix-text-vivid-tertiary: var(--text-vivid-secondary);--button-icon-vivid-tertiary: var(--icon-vivid-dark-secondary);--button-background-blue-tertiary: transparent;--button-text-blue-tertiary: var(--text-blue);--button-postfix-text-blue-tertiary: var(--text-blue-tertiary);--button-icon-blue-tertiary: var(--icon-blue);--button-background-state-neutral-hovered: var(--base-graphite-25);--button-background-state-neutral-pressed: var(--bg-dark);--button-background-state-neutral-focused: var(--button-background-state-neutral-pressed);--button-background-state-neutral-disabled: var(--bg-tertiary);--button-text-state-neutral-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-neutral-disabled: var(--text-tertiary);--button-icon-state-neutral-disabled: var(--button-icon-neutral);--button-background-state-neutral-secondary-hovered: var(--base-graphite-97);--button-background-state-neutral-secondary-pressed: var(--bg-secondary);--button-background-state-neutral-secondary-disabled: var(--bg-disabled);--button-background-state-neutral-tertiary-hovered: var(--bg-secondary);--button-background-state-neutral-tertiary-pressed: transparent;--button-background-state-neutral-tertiary-disabled: transparent;--button-background-state-accent-hovered: var(--bg-accent-55);--button-background-state-accent-pressed: var(--bg-accent);--button-background-state-accent-focused: var(--bg-accent);--button-background-state-accent-disabled: var(--bg-tertiary);--button-text-state-accent-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-accent-disabled: var(--text-tertiary);--button-icon-state-accent-disabled: var(--icon-disabled);--button-background-state-accent-secondary-hovered: var(--brand-primary-970);--button-background-state-accent-secondary-pressed: var(--bg-accent-secondary);--button-background-state-accent-secondary-disabled: var(--bg-disabled);--button-background-state-accent-tertiary-hovered: var(--bg-accent-secondary);--button-background-state-accent-tertiary-pressed: transparent;--button-background-state-accent-tertiary-disabled: transparent;--button-background-state-gray-hovered: var(--bg-secondary);--button-text-state-gray-hovered: var(--text-primary);--button-postfix-text-state-gray-hovered: var(--text-tertiary);--button-icon-state-gray-hovered: var(--icon-primary);--button-background-state-gray-pressed: transparent;--button-background-state-gray-focused: var(--bg-secondary);--button-background-state-gray-disabled: transparent;--button-text-state-gray-disabled: var(--text-state-secondary-disabled);--button-postfix-text-state-gray-disabled: var(--text-state-secondary-disabled);--button-icon-state-gray-disabled: var(--base-graphite-85);--button-background-state-positive-hovered: var(--bg-positive-hover);--button-background-state-positive-pressed: var(--bg-positive);--button-background-state-positive-focused: var(--bg-positive);--button-background-state-positive-disabled: var(--bg-tertiary);--button-text-state-positive-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-positive-disabled: var(--text-tertiary);--button-icon-state-positive-disabled: var(--icon-disabled);--button-background-state-positive-secondary-hovered: var(--base-green-97);--button-background-state-positive-secondary-pressed: var(--bg-positive-secondary);--button-background-state-positive-secondary-disabled: var(--bg-disabled);--button-background-state-positive-tertiary-hovered: var(--base-green-97);--button-background-state-positive-tertiary-pressed: transparent;--button-background-state-positive-tertiary-disabled: transparent;--button-background-state-negative-hovered: var(--bg-negative-hover);--button-background-state-negative-pressed: var(--bg-negative);--button-background-state-negative-focused: var(--button-background-state-negative-pressed);--button-background-state-negative-disabled: var(--bg-tertiary);--button-text-state-negative-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-negative-disabled: var(--text-tertiary);--button-icon-state-negative-disabled: var(--icon-disabled);--button-background-state-negative-secondary-hovered: var(--base-red-97);--button-background-state-negative-secondary-pressed: var(--bg-negative-secondary);--button-background-state-negative-secondary-disabled: var(--bg-disabled);--button-background-state-negative-tertiary-hovered: var(--base-red-97);--button-background-state-negative-tertiary-pressed: transparent;--button-background-state-negative-tertiary-disabled: transparent;--button-background-state-contrast-hovered: var(--base-graphite-95);--button-background-state-contrast-pressed: var(--bg-primary);--button-background-state-contrast-focused: var(--button-background-state-contrast-pressed);--button-background-state-contrast-disabled: var(--base-graphite-40);--button-text-state-contrast-disabled: var(--base-graphite-25);--button-postfix-text-state-contrast-disabled: var(--base-graphite-30);--button-icon-state-contrast-disabled: var(--base-graphite-25);--button-background-state-contrast-secondary-hovered: var(--base-graphite-35);--button-background-state-contrast-secondary-pressed: var(--bg-dark-tertiary);--button-background-state-contrast-secondary-disabled: var(--base-graphite-15);--button-text-state-contrast-secondary-disabled: var(--base-graphite-45);--button-postfix-text-state-contrast-secondary-disabled: var(--base-graphite-30);--button-background-state-contrast-tertiary-hovered: var(--base-graphite-35);--button-background-state-contrast-tertiary-pressed: transparent;--button-background-state-contrast-tertiary-disabled: transparent;--button-text-state-contrast-tertiary-disabled: var(--base-graphite-40);--button-postfix-text-state-contrast-tertiary-disabled: var(--base-graphite-25);--button-background-state-dreamy-hovered: var(--bg-dreamy-hover);--button-background-state-dreamy-pressed: var(--bg-dreamy);--button-background-state-dreamy-focused: var(--bg-dreamy);--button-background-state-dreamy-disabled: var(--bg-tertiary);--button-text-state-dreamy-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-dreamy-disabled: var(--text-tertiary);--button-icon-state-dreamy-disabled: var(--icon-disabled);--button-background-state-dreamy-secondary-hovered: var(--bg-dreamy-secondary-hover);--button-background-state-dreamy-secondary-pressed: var(--bg-dreamy-secondary);--button-background-state-dreamy-secondary-focused: var(--bg-dreamy-secondary);--button-background-state-dreamy-secondary-disabled: var(--bg-disabled);--button-text-state-dreamy-secondary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-dreamy-secondary-disabled: var(--text-state-secondary-disabled);--button-icon-state-dreamy-secondary-disabled: var(--icon-disabled);--button-background-state-dreamy-tertiary-hovered: var(--bg-dreamy-secondary-hover);--button-background-state-dreamy-tertiary-pressed: transparent;--button-background-state-dreamy-tertiary-focused: transparent;--button-background-state-dreamy-tertiary-disabled: transparent;--button-text-state-dreamy-tertiary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-dreamy-tertiary-disabled: var(--text-state-secondary-disabled);--button-icon-state-dreamy-tertiary-disabled: var(--icon-disabled);--button-background-state-special-hovered: var(--bg-special-dark-hover);--button-background-state-special-pressed: var(--bg-special-dark);--button-background-state-special-focused: var(--bg-special-dark);--button-background-state-special-disabled: var(--bg-tertiary);--button-text-state-special-disabled: var(--text-tertiary);--button-postfix-text-state-special-disabled: var(--text-tertiary);--button-icon-state-special-disabled: var(--icon-disabled);--button-background-state-special-secondary-hovered: var(--bg-special-secondary-hover);--button-background-state-special-secondary-pressed: var(--bg-special-secondary);--button-background-state-special-secondary-focused: var(--bg-special-secondary);--button-background-state-special-secondary-disabled: var(--bg-disabled);--button-text-state-special-secondary-disabled: var(--text-tertiary);--button-postfix-text-state-special-secondary-disabled: var(--text-state-secondary-disabled);--button-icon-state-special-secondary-disabled: var(--icon-disabled);--button-background-state-special-tertiary-hovered: var(--bg-special-secondary-hover);--button-background-state-special-tertiary-pressed: transparent;--button-background-state-special-tertiary-focused: transparent;--button-background-state-special-tertiary-disabled: transparent;--button-text-state-special-tertiary-disabled: var(--text-tertiary);--button-postfix-text-state-special-tertiary-disabled: var(--text-state-secondary-disabled);--button-icon-state-special-tertiary-disabled: var(--icon-disabled);--button-background-state-lovely-hovered: var(--bg-lovely-hover-62);--button-background-state-lovely-pressed: var(--bg-lovely);--button-background-state-lovely-focused: var(--bg-lovely);--button-background-state-lovely-disabled: var(--bg-tertiary);--button-text-state-lovely-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-lovely-disabled: var(--text-tertiary);--button-icon-state-lovely-disabled: var(--icon-disabled);--button-background-state-lovely-secondary-hovered: var(--bg-lovely-secondary-hover);--button-background-state-lovely-secondary-pressed: var(--bg-lovely-secondary);--button-background-state-lovely-secondary-focused: var(--bg-lovely-secondary);--button-background-state-lovely-secondary-disabled: var(--bg-disabled);--button-text-state-lovely-secondary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-lovely-secondary-disabled: var(--text-state-secondary-disabled);--button-icon-state-lovely-secondary-disabled: var(--icon-disabled);--button-background-state-lovely-tertiary-hovered: var(--bg-lovely-secondary-hover);--button-background-state-lovely-tertiary-pressed: transparent;--button-background-state-lovely-tertiary-focused: transparent;--button-background-state-lovely-tertiary-disabled: transparent;--button-text-state-lovely-tertiary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-lovely-tertiary-disabled: var(--text-state-secondary-disabled);--button-icon-state-lovely-tertiary-disabled: var(--icon-disabled);--button-background-state-warning-hovered: var(--bg-warning-hover);--button-background-state-warning-pressed: var(--bg-warning);--button-background-state-warning-focused: var(--bg-warning);--button-background-state-warning-disabled: var(--bg-tertiary);--button-text-state-warning-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-warning-disabled: var(--text-tertiary);--button-icon-state-warning-disabled: var(--icon-disabled);--button-background-state-warning-secondary-hovered: var(--bg-warning-secondary-hover);--button-background-state-warning-secondary-pressed: var(--bg-warning-secondary);--button-background-state-warning-secondary-focused: var(--bg-warning-secondary);--button-background-state-warning-secondary-disabled: var(--bg-disabled);--button-text-state-warning-secondary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-warning-secondary-disabled: var(--text-state-secondary-disabled);--button-icon-state-warning-secondary-disabled: var(--icon-disabled);--button-background-state-warning-tertiary-hovered: var(--bg-warning-secondary-hover);--button-background-state-warning-tertiary-pressed: transparent;--button-background-state-warning-tertiary-focused: transparent;--button-background-state-warning-tertiary-disabled: transparent;--button-text-state-warning-tertiary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-warning-tertiary-disabled: var(--text-state-secondary-disabled);--button-icon-state-warning-tertiary-disabled: var(--icon-disabled);--button-background-state-vivid-hovered: var(--bg-vivid-hover-87);--button-background-state-vivid-pressed: var(--bg-vivid);--button-background-state-vivid-focused: var(--bg-vivid);--button-background-state-vivid-disabled: var(--bg-tertiary);--button-text-state-vivid-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-vivid-disabled: var(--text-tertiary);--button-icon-state-vivid-disabled: var(--icon-disabled);--button-background-state-vivid-secondary-hovered: var(--bg-vivid-secondary-hover);--button-background-state-vivid-secondary-pressed: var(--bg-vivid-secondary);--button-background-state-vivid-secondary-focused: var(--bg-vivid-secondary);--button-background-state-vivid-secondary-disabled: var(--bg-disabled);--button-text-state-vivid-secondary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-vivid-secondary-disabled: var(--text-state-secondary-disabled);--button-icon-state-vivid-secondary-disabled: var(--icon-disabled);--button-background-state-vivid-tertiary-hovered: var(--bg-vivid-secondary-hover);--button-background-state-vivid-tertiary-pressed: transparent;--button-background-state-vivid-tertiary-focused: transparent;--button-background-state-vivid-tertiary-disabled: transparent;--button-text-state-vivid-tertiary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-vivid-tertiary-disabled: var(--text-state-secondary-disabled);--button-icon-state-vivid-tertiary-disabled: var(--icon-disabled);--button-background-state-blue-hovered: var(--bg-blue-hover);--button-background-state-blue-pressed: var(--bg-blue);--button-background-state-blue-focused: var(--bg-blue);--button-background-state-blue-disabled: var(--bg-tertiary);--button-text-state-blue-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-blue-disabled: var(--text-tertiary);--button-icon-state-blue-disabled: var(--icon-disabled);--button-background-state-blue-secondary-hovered: var(--bg-blue-secondary-hover);--button-background-state-blue-secondary-pressed: var(--bg-blue-secondary);--button-background-state-blue-secondary-focused: var(--bg-blue-secondary);--button-background-state-blue-secondary-disabled: var(--bg-disabled);--button-text-state-blue-secondary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-blue-secondary-disabled: var(--text-state-secondary-disabled);--button-icon-state-blue-secondary-disabled: var(--icon-disabled);--button-background-state-blue-tertiary-hovered: var(--bg-blue-secondary-hover);--button-background-state-blue-tertiary-pressed: transparent;--button-background-state-blue-tertiary-focused: transparent;--button-background-state-blue-tertiary-disabled: transparent;--button-text-state-blue-tertiary-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-blue-tertiary-disabled: var(--text-state-secondary-disabled);--button-icon-state-blue-tertiary-disabled: var(--icon-disabled);--button-stroke-state-neutral-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-accent-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-positive-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-negative-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-contrast-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-gray-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-dreamy-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-special-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-lovely-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-warning-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-vivid-focused-accessible: var(--stroke-accent-disabled);--button-stroke-state-blue-focused-accessible: var(--stroke-accent-disabled);--semantic-borderRadius-form: 12px;--semantic-borderRadius-200: 8px;--semantic-borderWidth-tab-focused: 4px;--semantic-animation-ease-in-out-200: background-color .2s ease-in-out;--semantic-animation-ease-in-out-400: background-color .4s ease-in-out;--semantic-color-animation-ease-in-out-400: color .4s ease-in-out;--semantic-scale-pressed: .96;--back-button-text: var(--text-primary);--back-button-icon: var(--icon-secondary);--back-button-icon-state-hovered: var(--icon-primary);--back-button-text-disabled: var(--text-state-primary-disabled);--back-button-icon-disabled: var(--icon-tertiary)}[data-skillgridDarkTheme=true]{--button-background-neutral: var(--base-gray-100);--button-text-neutral: var(--base-gray-0);--button-postfix-text-neutral: var(--base-graphite-55);--button-icon-neutral: var(--base-gray-0);--button-background-neutral-secondary: var(--bg-dark-secondary);--button-text-neutral-secondary: var(--text-invert);--button-postfix-text-neutral-secondary: var(--text-secondary);--button-icon-neutral-secondary: var(--icon-contrast);--button-background-neutral-tertiary: transparent;--button-text-neutral-tertiary: var(--text-primary);--button-postfix-text-neutral-tertiary: var(--text-secondary);--button-icon-neutral-tertiary: var(--icon-primary);--button-background-state-accent-secondary: var(--brand-primary-100);--button-text-accent-secondary: var(--brand-primary-900);--button-background-state-accent-secondary-hovered: var(--brand-primary-150);--button-background-state-accent-secondary-pressed: var(--brand-primary-100);--button-background-state-accent-secondary-disabled: var(--bg-tertiary);--button-text-state-accent-disabled: var(--base-graphite-80);--button-postfix-text-state-accent-disabled: var(--base-graphite-60);--button-icon-state-accent-disabled: var(--base-graphite-80);--button-background-positive-secondary: var(--base-green-10);--button-text-positive-secondary: var(--base-green-90);--button-postfix-text-positive-secondary: var(--base-green-65);--button-background-state-positive-secondary-hovered: var(--base-green-15);--button-background-state-positive-secondary-pressed: var(--base-green-10);--button-background-state-positive-secondary-disabled: var(--bg-tertiary);--button-text-state-positive-disabled: var(--base-graphite-80);--button-postfix-text-state-positive-disabled: var(--base-graphite-60);--button-icon-state-positive-disabled: var(--base-graphite-80);--button-background-negative-secondary: var(--base-red-10);--button-text-negative-secondary: var(--base-red-90);--button-postfix-text-negative-secondary: var(--base-red-55);--button-background-state-negative-secondary-hovered: var(--base-red-15);--button-background-state-negative-secondary-pressed: var(--base-red-10);--button-background-state-negative-secondary-disabled: var(--bg-tertiary);--button-text-state-negative-disabled: var(--base-graphite-80);--button-postfix-text-state-negative-disabled: var(--base-graphite-60);--button-icon-state-negative-disabled: var(--base-graphite-80);--button-background-state-neutral-hovered: var(--base-graphite-96);--button-background-state-neutral-pressed: var(--base-graphite-90);--button-background-state-neutral-focused: var(--button-background-state-neutral-pressed);--button-background-state-neutral-disabled: var(--base-graphite-75);--button-text-state-neutral-disabled: var(--text-state-primary-disabled);--button-postfix-text-state-neutral-disabled: var(--text-tertiary);--button-icon-state-neutral-disabled: var(--text-state-primary-disabled);--button-background-state-neutral-secondary-hovered: var(--base-graphite-20);--button-background-state-neutral-secondary-pressed: var(--base-graphite-10);--button-background-state-neutral-secondary-disabled: var(--bg-dark-secondary-disabled);--button-background-state-neutral-tertiary-hovered: var(--base-graphite-20);--button-background-state-neutral-tertiary-pressed: var(--base-graphite-10);--button-background-state-neutral-tertiary-disabled: var(--bg-dark-secondary-disabled);--button-background-state-negative-tertiary-hovered: var(--base-red-20)}

package/dist/components/Avatar/AvatarGroup/AvatarGroupRoot.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import d from "classnames";
-import { useBackgroundColor as g } from "../../../hooks/useBackgroundColor.js";
-import v from "./AvatarGroup.module.css.js";
-import { AvatarGroupProvider as B } from "./AvatarGroupProvider.js";
+import g from "./AvatarGroup.module.css.js";
+import { AvatarGroupProvider as v } from "./AvatarGroupProvider.js";
+import { useBackgroundColor as B } from "../../../hooks/useBackgroundColor.js";
 const G = (t) => {
   const {
     children: a,
@@ -12,12 +12,12 @@ const G = (t) => {
     cutoutBackground: u,
     className: m,
     style: n
-  } = t, { ref: p, bgColor: f } = g(), o = u || f || "#ffffff", l = d(v.avatarGroup, m), i = {
+  } = t, { ref: p, bgColor: f } = B(), o = u || f || "#ffffff", l = d(g.avatarGroup, m), i = {
     "--avatar-cutout-bg": o,
     ...n
   };
   return /* @__PURE__ */ r(
-    B,
+    v,
     {
       size: s,
       shape: c,

package/dist/components/ConfigProvider/ConfigProvider.js

@@ -2,7 +2,7 @@ import { jsxs as c, jsx as a } from "react/jsx-runtime";
 import { useMemo as u, useLayoutEffect as l, Fragment as p } from "react";
 import { useConfig as k, ConfigContext as g } from "./ConfigProvider.hook.js";
 import { clsx as h } from "clsx";
-import y from "../../styles/brand.module.css.js";
+import y from "../../styles/brand.module.css2.js";
 import T from "../../styles/tokens.module.css.js";
 import b from "../../styles/palette.module.css.js";
 import v from "../../styles/link.module.css.js";

package/dist/components/FileUpload/FileUpload.js

@@ -2,11 +2,11 @@ import { jsxs as m, jsx as a } from "react/jsx-runtime";
 import { clsx as p } from "clsx";
 import Ge from "rc-upload";
 import { forwardRef as je, useContext as Fe, useState as W, useRef as se, useMemo as we, useLayoutEffect as He } from "react";
-import { useIsMobile as ze } from "../../hooks/useIsMobile.js";
 import { interpolate as de } from "../../locale/interpolate.js";
 import t from "./FileUpload.module.css.js";
 import { isMobileViewport as ve } from "../../utils/adaptive.js";
 import { useLocale as ue } from "../ConfigProvider/ConfigProvider.hook.js";
+import { useIsMobile as ze } from "../../hooks/useIsMobile.js";
 import { SnackbarContext as We } from "../Snackbar/lib/useSnackbar.js";
 import { Button as M } from "../Button/Button.js";
 import { Icon as h } from "../Icon/IconWithCategories.js";

package/dist/components/InputBase/Input.js

@@ -2,9 +2,9 @@ import { jsx as r, jsxs as W } from "react/jsx-runtime";
 import { forwardRef as z, useImperativeHandle as P } from "react";
 import { clsx as f } from "clsx";
 import e from "./InputBase.module.css.js";
-import { useCompatId as Q } from "../../hooks/useCompatId.js";
-import { useInputSync as Y } from "./lib/useInputSync.js";
-import { useTextareaResize as Z } from "./lib/useTextareaResize.js";
+import { useInputSync as Q } from "./lib/useInputSync.js";
+import { useTextareaResize as Y } from "./lib/useTextareaResize.js";
+import { useCompatId as Z } from "../../hooks/useCompatId.js";
 import { MAX_HINT_LENGTH as k } from "./lib/constants.js";
 import { useGripResize as U } from "./lib/useGripResize.js";
 import { GripIcon as E } from "./assets/GripIcon.js";
@@ -32,8 +32,8 @@ const K = z(
     resize: c,
     ...H
   }, R) => {
-    const { textareaRef: w, inputRef: j, currentRef: d } = Y(a, t);
-    if (Z(a, c, w), P(R, () => d.current, [d]), t === "textarea")
+    const { textareaRef: w, inputRef: j, currentRef: d } = Q(a, t);
+    if (Y(a, c, w), P(R, () => d.current, [d]), t === "textarea")
       return /* @__PURE__ */ r(
         "textarea",
         {
@@ -132,7 +132,7 @@ const K = z(
     showGrip: T = !1,
     ...L
   }, O) => {
-    const X = Q("input-wrapper"), S = D || X, _ = y && s && (d || p), q = s && s.length > k ? s.substring(0, k) + "..." : s, B = f(
+    const X = Z("input-wrapper"), S = D || X, _ = y && s && (d || p), q = s && s.length > k ? s.substring(0, k) + "..." : s, B = f(
       e.wrapper,
       e[`size-${m}`],
       a && e.error,

package/dist/components/Popover/lib/use-popover.js

@@ -1,7 +1,7 @@
 import { offset as G, flip as H, shift as V, inline as q, size as J, hide as K, useFloating as Q, autoUpdate as Z, useTransitionStyles as M, useClick as ee, useHover as te, useFocus as oe, useDismiss as ne, useRole as se, useInteractions as re } from "@floating-ui/react";
 import { useState as i, useMemo as v, useCallback as ce, useEffect as ae, useLayoutEffect as ie } from "react";
-import { useCompatId as S } from "../../../hooks/useCompatId.js";
 import { DEFAULT_FLOATING as le, hasMiddleware as fe } from "./utils.js";
+import { useCompatId as S } from "../../../hooks/useCompatId.js";
 const r = 8, ue = (c) => {
   switch (c.split("-")[0]) {
     case "top":

package/dist/components/Radio/Radio.js

@@ -1,101 +1,115 @@
-import { jsxs as c, jsx as m } from "react/jsx-runtime";
+import { jsxs as c, jsx as d } from "react/jsx-runtime";
 import { forwardRef as O } from "react";
-import { clsx as d } from "clsx";
+import { clsx as l } from "clsx";
 import a from "./Radio.module.css.js";
 const P = "radio-container-", j = "radio-label", q = O(
-  (y, C) => {
+  (I, C) => {
     const {
       name: f,
       id: R,
       value: o,
       size: b = "large",
       loading: v = !1,
-      error: h,
+      error: N,
       disabled: D = !1,
-      checked: l = !1,
-      containerClassName: p,
+      checked: n = !1,
+      containerClassName: h,
       className: T,
-      children: N,
+      children: p,
       clickable: _ = "all",
-      mode: n = "default",
-      tabIndex: $,
-      style: g,
-      containerStyle: w,
+      mode: m = "default",
+      tabIndex: g,
+      style: $,
+      containerStyle: A,
       onChange: e,
-      "data-testid": E,
-      ...A
-    } = y, I = !!h, r = D || v, t = _ === "all", k = n === "card", u = a[`${b}Card`], s = R ?? f, S = (i) => {
-      r || e == null || e(o, i);
+      "data-testid": u,
+      ...S
+    } = I, y = !!N, s = D || v, r = _ === "all", k = m === "card", x = a[`${b}Card`], t = R ?? f, w = (i) => {
+      s || e == null || e(o, i);
     }, B = (i) => {
-      i.key === "Enter" && !r && (i.preventDefault(), e == null || e(o));
+      i.key === "Enter" && !s && (i.preventDefault(), e == null || e(o));
     }, F = (i) => i.stopPropagation(), L = () => /* @__PURE__ */ c(
       "div",
       {
-        className: d(
+        className: l(
           a.radio,
           a[b],
           {
-            [a.checked]: l,
-            [a.disabled]: r,
-            [a.error]: I && !r
+            [a.checked]: n,
+            [a.disabled]: s,
+            [a.error]: y && !s
           },
           T
         ),
-        style: g,
-        tabIndex: $ || 1,
-        "data-testid": `${P}${s}`,
+        style: $,
+        tabIndex: g || 1,
+        "data-testid": `${P}${t}`,
         children: [
-          /* @__PURE__ */ m(
+          /* @__PURE__ */ d(
             "input",
             {
-              "aria-errormessage": h,
-              "aria-invalid": I,
-              checked: l,
+              "aria-errormessage": N,
+              "aria-invalid": y,
+              checked: n,
               className: a.input,
-              "data-testid": `radio-${s}`,
-              disabled: r,
-              id: s,
+              "data-testid": `radio-${t}`,
+              disabled: s,
+              id: t,
               name: f,
               ref: C,
               type: "radio",
               value: o,
-              onChange: S,
+              onChange: w,
               onClick: F
             }
           ),
-          /* @__PURE__ */ m("svg", { "data-testid": `radio-icon-${s}`, viewBox: "0 0 8 8", className: a.icon, children: /* @__PURE__ */ m("circle", { cx: 4, cy: 4, fill: "current", r: 4 }) })
+          /* @__PURE__ */ d("span", { className: a.iconBaseline, "aria-hidden": !0 }),
+          /* @__PURE__ */ c(
+            "svg",
+            {
+              "data-testid": `radio-icon-${t}`,
+              className: a.icon,
+              "aria-hidden": !0,
+              focusable: !1,
+              children: [
+                /* @__PURE__ */ d("circle", { cx: "50%", cy: "50%", className: a.background }),
+                /* @__PURE__ */ d("circle", { cx: "50%", cy: "50%", className: a.outline }),
+                /* @__PURE__ */ d("circle", { cx: "50%", cy: "50%", className: a.dot })
+              ]
+            }
+          )
         ]
       }
-    ), x = () => /* @__PURE__ */ c(
+    ), E = () => /* @__PURE__ */ c(
       "label",
       {
-        "aria-checked": l,
-        "aria-disabled": r,
-        "data-testid": t ? E : j,
-        htmlFor: s,
-        style: w,
-        className: d(a.label, {
-          [d(a.container, a[n], p)]: t,
-          [u]: t && k
+        "aria-checked": n,
+        "aria-disabled": s,
+        "data-testid": r ? u : j,
+        htmlFor: t,
+        style: A,
+        className: l(a.label, {
+          [l(a.container, a[m], h)]: r,
+          [x]: r && k
         }),
         onKeyDown: B,
-        ...A,
+        ...S,
         children: [
           L(),
-          t && N
+          r && p
         ]
       }
     );
-    return t ? x() : /* @__PURE__ */ c(
+    return r ? E() : /* @__PURE__ */ c(
       "div",
       {
-        className: d(a.container, a[n], p, {
-          [u]: k
+        className: l(a.container, a[m], h, {
+          [x]: k
         }),
-        "data-testid": E,
+        "data-testid": u,
         children: [
-          x(),
-          N
+          E(),
+          p
         ]
       }
     );

package/dist/components/Radio/Radio.module.css.js

@@ -1,36 +1,44 @@
-import '../../assets/components/Radio/Radio.module-TNOIshDX.css';const d = "_radio_nm7dp_59", _ = "_checked_nm7dp_80", n = "_error_nm7dp_85", a = "_disabled_nm7dp_94", e = "_icon_nm7dp_130", m = "_small_nm7dp_138", r = "_medium_nm7dp_145", c = "_large_nm7dp_152", l = "_label_nm7dp_159", o = "_container_nm7dp_185", s = "_input_nm7dp_198", t = "_card_nm7dp_205", i = "_smallCard_nm7dp_211", p = "_mediumCard_nm7dp_215", u = "_largeCard_nm7dp_219", C = {
-  default: "_default_nm7dp_53",
-  radio: d,
-  checked: _,
+import '../../assets/components/Radio/Radio.module-C97VGndQ.css';const _ = "_radio_1mtjf_59", t = "_checked_1mtjf_78", a = "_background_1mtjf_78", o = "_outline_1mtjf_82", n = "_error_1mtjf_86", e = "_disabled_1mtjf_94", c = "_iconBaseline_1mtjf_127", d = "_icon_1mtjf_127", m = "_dot_1mtjf_161", r = "_small_1mtjf_168", l = "_medium_1mtjf_175", s = "_large_1mtjf_182", i = "_label_1mtjf_189", f = "_container_1mtjf_215", j = "_input_1mtjf_228", u = "_card_1mtjf_235", b = "_smallCard_1mtjf_241", g = "_mediumCard_1mtjf_245", C = "_largeCard_1mtjf_249", k = {
+  default: "_default_1mtjf_53",
+  radio: _,
+  checked: t,
+  background: a,
+  outline: o,
   error: n,
-  disabled: a,
-  icon: e,
-  small: m,
-  medium: r,
-  large: c,
-  label: l,
-  container: o,
-  input: s,
-  card: t,
-  smallCard: i,
-  mediumCard: p,
-  largeCard: u
+  disabled: e,
+  iconBaseline: c,
+  icon: d,
+  dot: m,
+  small: r,
+  medium: l,
+  large: s,
+  label: i,
+  container: f,
+  input: j,
+  card: u,
+  smallCard: b,
+  mediumCard: g,
+  largeCard: C
 };
 export {
-  t as card,
-  _ as checked,
-  o as container,
-  C as default,
-  a as disabled,
+  a as background,
+  u as card,
+  t as checked,
+  f as container,
+  k as default,
+  e as disabled,
+  m as dot,
   n as error,
-  e as icon,
-  s as input,
-  l as label,
-  c as large,
-  u as largeCard,
-  r as medium,
-  p as mediumCard,
-  d as radio,
-  m as small,
-  i as smallCard
+  d as icon,
+  c as iconBaseline,
+  j as input,
+  i as label,
+  s as large,
+  C as largeCard,
+  l as medium,
+  g as mediumCard,
+  o as outline,
+  _ as radio,
+  r as small,
+  b as smallCard
 };

package/dist/components/Tabs/ScrollWrapper.js

@@ -1,8 +1,8 @@
 import { jsxs as N, jsx as r } from "react/jsx-runtime";
 import { useRef as W, useState as g, useEffect as w } from "react";
-import { useBackgroundColor as M } from "../../hooks/useBackgroundColor.js";
 import { clsx as a } from "clsx";
 import e from "./ScrollWrapper.module.css.js";
+import { useBackgroundColor as M } from "../../hooks/useBackgroundColor.js";
 const B = "white", G = ({
   children: b,
   withControls: i = !0,

package/dist/components/Tabs/Tabs.js

@@ -1,10 +1,10 @@
 import { jsx as l, jsxs as w } from "react/jsx-runtime";
 import F, { useState as U, createContext as V, useContext as M } from "react";
 import { ScrollWrapper as R } from "./ScrollWrapper.js";
-import { useIsMobile as j } from "../../hooks/useIsMobile.js";
 import { clsx as p } from "clsx";
 import f from "../../styles/typography.module.css.js";
 import a from "./Tabs.module.css.js";
+import { useIsMobile as j } from "../../hooks/useIsMobile.js";
 import { Badge as k } from "../Badge/Badge.js";
 const G = "md", W = !1, Y = !1, Z = 8, z = "top-right-inside", P = V(null), h = () => {
   const t = M(P);