welcome-ui 10.0.0-alpha.5 → 10.0.0-alpha.7

package/dist/Button.css

@@ -1 +1 @@
-@property --gradient-angle{syntax: "<angle>"; initial-value: -60deg; inherits: true;}@keyframes _rotate-gradient_9gw1k_1{to{--gradient-angle: 300deg}}@layer components{._root_9gw1k_12{position:relative;display:inline-flex;align-items:center;justify-content:center;border-style:solid;cursor:pointer;border-radius:var(--border-radius-md);transition-property:all;transition-duration:var(--duration-medium);transition-timing-function:ease-in-out;outline:transparent solid var(--border-width-md);font-weight:var(--font-weight-semi-bold);font-family:var(--font-family-body);line-height:var(--font-line-height-xs);height:var(--buttonHeight);padding-inline:var(--buttonPaddingInline);font-size:var(--buttonFontSize);color:var(--buttonColor, var(--color-neutral-90));background:var(--buttonBackground);border-width:var(--buttonBorderWidth, 0);border-color:var(--buttonBorderColor, transparent);box-shadow:var(--buttonBoxShadow, none);gap:var(--buttonGap)}._root_9gw1k_12[data-focus-visible],._root_9gw1k_12:focus-visible{outline-width:var(--components-dimensions-button-border-width-focused);outline-color:var(--buttonOutlineColorFocus)}@media (hover: hover) and (pointer: fine){._root_9gw1k_12:hover:not(:disabled):not([aria-disabled]){box-shadow:var(--elevation-20);--buttonBackground: var(--buttonBackgroundHover);--buttonBorderColor: var(--buttonBorderColorHover, transparent);--buttonColor: var(--buttonColorHover)}}._root_9gw1k_12:active:not(:disabled):not([aria-disabled]){--buttonBackground: var(--buttonBackgroundActive);--buttonBorderColor: var(--buttonBorderColorActive, transparent);--buttonColor: var(--buttonColorPressed)}._root_9gw1k_12:disabled,._root_9gw1k_12[aria-disabled]{--buttonBorderColor: var(--buttonBorderColorDisabled, transparent);--buttonColor: var(--buttonColorDisabled);--buttonBackground: var(--buttonBackgroundDisabled);cursor:not-allowed}._root_9gw1k_12 i.wui-icon-font,._root_9gw1k_12 svg{font-weight:initial;width:var(--buttonIconSize);height:var(--buttonIconSize);font-size:var(--buttonIconSize)}._root_9gw1k_12:has(svg:only-child),._root_9gw1k_12:has(i._wui-icon-font_9gw1k_64:only-child){padding-inline:var(--buttonPaddingInlineIconOnly, var(--buttonPaddingInline))}._size-sm_9gw1k_74{--buttonFontSize: var(--font-size-14);--buttonHeight: var(--components-dimensions-button-size-max-height-sm);--buttonPaddingInline: var(--spacing-sm);--buttonPaddingInlineIconOnly: var(--spacing-xs);--buttonIconSize: var(--components-dimensions-button-size-icon-sm);--buttonGap: var(--components-dimensions-button-gap-content-sm)}._size-md_9gw1k_82{--buttonFontSize: var(--font-size-14);--buttonHeight: var(--components-dimensions-button-size-max-height-md);--buttonPaddingInline: var(--spacing-md);--buttonPaddingInlineIconOnly: var(--spacing-sm);--buttonIconSize: var(--components-dimensions-button-size-icon-md);--buttonGap: var(--components-dimensions-button-gap-content-md)}._size-lg_9gw1k_90{--buttonFontSize: var(--font-size-16);--buttonHeight: var(--components-dimensions-button-size-max-height-lg);--buttonPaddingInline: var(--spacing-lg);--buttonPaddingInlineIconOnly: var(--spacing-md);--buttonIconSize: var(--components-dimensions-button-size-icon-lg);--buttonGap: var(--components-dimensions-button-gap-content-lg)}._variant-primary_9gw1k_98{--buttonBackground: var(--components-colors-button-color-background-primary-main-default);--buttonBackgroundActive: var( --components-colors-button-color-background-primary-main-pressed );--buttonBackgroundHover: var(--components-colors-button-color-background-primary-main-hover);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused);--buttonColorDisabled: var(--components-colors-button-color-text-primary-main-disabled);--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-main-disabled) 2.5px, var(--components-colors-button-color-background-primary-main-disabled) 5.25px) padding-box}._variant-primary-neutral_9gw1k_108{--buttonBackground: var(--components-colors-button-color-background-primary-neutral-default);--buttonBackgroundActive: var( --components-colors-button-color-background-primary-neutral-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-primary-neutral-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-neutral-disabled) 2.5px, var(--components-colors-button-color-background-primary-neutral-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-primary-neutral-default);--buttonColorDisabled: var(--components-colors-button-color-text-primary-neutral-disabled);--buttonColorHover: var(--components-colors-button-color-text-primary-neutral-hover);--buttonColorPressed: var(--components-colors-button-color-text-primary-neutral-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-primary-ai_9gw1k_123{--buttonBackground: linear-gradient(var(--components-colors-button-color-background-primary-ai-default) 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--buttonBackgroundActive: linear-gradient(var(--components-colors-button-color-background-primary-ai-pressed) 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--buttonBackgroundHover: linear-gradient(var(--components-colors-button-color-background-primary-ai-hover) 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-ai-disabled) 2.5px, var(--components-colors-button-color-background-primary-ai-disabled) 5.25px) padding-box, linear-gradient( 107.75deg, var(--color-neutral-30) 0%, var(--color-neutral-50) 20%, var(--color-neutral-40) 40%, var(--color-neutral-50) 60%, var(--color-neutral-60) 80%, var(--color-neutral-50) 100% ) border-box;--buttonBorderWidth: var(--components-dimensions-button-border-width-ai);--buttonColor: var(--components-colors-button-color-text-primary-ai-default);--buttonColorDisabled: var(--components-colors-button-color-text-primary-ai-disabled);--buttonColorHover: var(--components-colors-button-color-text-primary-ai-hover);--buttonColorPressed: var(--components-colors-button-color-text-primary-ai-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused);animation:_rotate-gradient_9gw1k_1 3s linear infinite paused}@media (hover: hover) and (pointer: fine){._variant-primary-ai_9gw1k_123:hover:not(:disabled):not([aria-disabled]){animation-play-state:running}}._variant-primary-ai_9gw1k_123:focus-visible{animation-play-state:running}._variant-primary-danger_9gw1k_155{--buttonBackground: var(--components-colors-button-color-background-primary-danger-default);--buttonBackgroundActive: var( --components-colors-button-color-background-primary-danger-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-primary-danger-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-danger-disabled) 2.5px, var(--components-colors-button-color-background-primary-danger-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-primary-danger-default);--buttonColorDisabled: var(--components-colors-button-color-text-primary-danger-disabled);--buttonColorHover: var(--components-colors-button-color-text-primary-danger-hover);--buttonColorPressed: var(--components-colors-button-color-text-primary-danger-pressed);--buttonBorderWidth: var(--components-dimensions-button-border-width-secondary);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-secondary_9gw1k_171{--buttonBackground: var(--components-colors-button-color-background-secondary-main-default);--buttonBackgroundActive: var( --components-colors-button-color-background-secondary-main-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-secondary-main-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-secondary-main-disabled) 2.5px, var(--components-colors-button-color-background-secondary-main-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-secondary-main-default);--buttonColorDisabled: var(--components-colors-button-color-text-secondary-main-disabled);--buttonColorHover: var(--components-colors-button-color-text-secondary-main-hover);--buttonColorPressed: var(--components-colors-button-color-text-secondary-main-pressed);--buttonBorderWidth: var(--components-dimensions-button-border-width-secondary);--buttonBorderColor: var(--components-colors-button-color-border-secondary-main-default);--buttonBorderColorHover: var(--components-colors-button-color-border-secondary-main-hover);--buttonBorderColorActive: var( --components-colors-button-color-border-secondary-main-pressed );--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-secondary-danger_9gw1k_192{--buttonBackground: var(--components-colors-button-color-background-secondary-danger-default);--buttonBackgroundActive: var( --components-colors-button-color-background-secondary-danger-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-secondary-danger-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-secondary-danger-disabled) 2.5px, var(--components-colors-button-color-background-secondary-danger-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-secondary-danger-default);--buttonColorDisabled: var(--components-colors-button-color-text-secondary-danger-disabled);--buttonColorHover: var(--components-colors-button-color-text-secondary-danger-hover);--buttonColorPressed: var(--components-colors-button-color-text-secondary-danger-pressed);--buttonBorderWidth: var(--components-dimensions-button-border-width-secondary);--buttonBorderColor: var(--components-colors-button-color-border-secondary-danger-default);--buttonBorderColorHover: var(--components-colors-button-color-border-secondary-danger-hover);--buttonBorderColorActive: var( --components-colors-button-color-border-secondary-danger-pressed );--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-tertiary_9gw1k_213{--buttonBackground: var(--components-colors-button-color-background-tertiary-main-default);--buttonBackgroundActive: var( --components-colors-button-color-background-tertiary-main-pressed );--buttonBackgroundHover: var(--components-colors-button-color-background-tertiary-main-hover);--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-tertiary-main-disabled) 2.5px, var(--components-colors-button-color-background-tertiary-main-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-tertiary-main-default);--buttonColorDisabled: var(--components-colors-button-color-text-tertiary-main-disabled);--buttonColorHover: var(--components-colors-button-color-text-tertiary-main-hover);--buttonColorPressed: var(--components-colors-button-color-text-tertiary-main-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-tertiary-danger_9gw1k_226{--buttonBackground: var(--components-colors-button-color-background-tertiary-danger-default);--buttonBackgroundActive: var( --components-colors-button-color-background-tertiary-danger-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-tertiary-danger-hover );--buttonBackgroundDisabled: var( --components-colors-button-color-background-tertiary-danger-disabled );--buttonColor: var(--components-colors-button-color-text-tertiary-danger-default);--buttonColorDisabled: var(--components-colors-button-color-text-tertiary-danger-disabled);--buttonColorHover: var(--components-colors-button-color-text-tertiary-danger-hover);--buttonColorPressed: var(--components-colors-button-color-text-tertiary-danger-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._loader_9gw1k_243{display:flex;align-items:center;justify-content:center;position:absolute;bottom:0;left:0;right:0;top:0}._loader-children_9gw1k_253{opacity:0}}
+@property --gradient-angle{syntax: "<angle>"; initial-value: -60deg; inherits: true;}@keyframes _rotate-gradient_vtvta_1{to{--gradient-angle: 300deg}}@layer components{._root_vtvta_12{position:relative;display:inline-flex;white-space:nowrap;flex-shrink:0;align-items:center;justify-content:center;border-style:solid;cursor:pointer;border-radius:var(--border-radius-md);transition-property:all;transition-duration:var(--duration-medium);transition-timing-function:ease-in-out;outline:transparent solid var(--border-width-md);font-weight:var(--font-weight-semi-bold);font-family:var(--font-family-body);line-height:var(--font-line-height-xs);height:var(--buttonHeight);padding-inline:var(--buttonPaddingInline);font-size:var(--buttonFontSize);color:var(--buttonColor, var(--color-neutral-90));background:var(--buttonBackground);border-width:var(--buttonBorderWidth, 0);border-color:var(--buttonBorderColor, transparent);box-shadow:var(--buttonBoxShadow, none);gap:var(--buttonGap)}._root_vtvta_12[data-focus-visible],._root_vtvta_12:focus-visible{outline-width:var(--components-dimensions-button-border-width-focused);outline-color:var(--buttonOutlineColorFocus)}@media (hover: hover) and (pointer: fine){._root_vtvta_12:hover:not(:disabled):not([aria-disabled]){box-shadow:var(--elevation-20);--buttonBackground: var(--buttonBackgroundHover);--buttonBorderColor: var(--buttonBorderColorHover, transparent);--buttonColor: var(--buttonColorHover)}}._root_vtvta_12:active:not(:disabled):not([aria-disabled]){--buttonBackground: var(--buttonBackgroundActive);--buttonBorderColor: var(--buttonBorderColorActive, transparent);--buttonColor: var(--buttonColorPressed)}._root_vtvta_12:disabled,._root_vtvta_12[aria-disabled]{--buttonBorderColor: var(--buttonBorderColorDisabled, transparent);--buttonColor: var(--buttonColorDisabled);--buttonBackground: var(--buttonBackgroundDisabled);cursor:not-allowed}._root_vtvta_12 i.wui-icon-font,._root_vtvta_12 svg{font-weight:initial;width:var(--buttonIconSize);height:var(--buttonIconSize);font-size:var(--buttonIconSize)}._root_vtvta_12:has(svg:only-child),._root_vtvta_12:has(i._wui-icon-font_vtvta_66:only-child){width:var(--buttonHeight);--buttonPaddingInline: 0}._size-sm_vtvta_77{--buttonFontSize: var(--font-size-14);--buttonHeight: var(--components-dimensions-button-size-max-height-sm);--buttonPaddingInline: var(--components-dimensions-button-padding-inline-sm);--buttonIconSize: var(--components-dimensions-button-size-icon-sm);--buttonGap: var(--components-dimensions-button-gap-content-sm)}._size-md_vtvta_84{--buttonFontSize: var(--font-size-14);--buttonHeight: var(--components-dimensions-button-size-max-height-md);--buttonPaddingInline: var(--components-dimensions-button-padding-inline-md);--buttonIconSize: var(--components-dimensions-button-size-icon-md);--buttonGap: var(--components-dimensions-button-gap-content-md)}._size-lg_vtvta_91{--buttonFontSize: var(--font-size-16);--buttonHeight: var(--components-dimensions-button-size-max-height-lg);--buttonPaddingInline: var(--components-dimensions-button-padding-inline-lg);--buttonIconSize: var(--components-dimensions-button-size-icon-lg);--buttonGap: var(--components-dimensions-button-gap-content-lg)}._variant-primary_vtvta_98{--buttonBackground: var(--components-colors-button-color-background-primary-main-default);--buttonBackgroundActive: var( --components-colors-button-color-background-primary-main-pressed );--buttonBackgroundHover: var(--components-colors-button-color-background-primary-main-hover);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused);--buttonColorDisabled: var(--components-colors-button-color-text-primary-main-disabled);--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-main-disabled) 2.5px, var(--components-colors-button-color-background-primary-main-disabled) 5.25px) padding-box}._variant-primary-neutral_vtvta_108{--buttonBackground: var(--components-colors-button-color-background-primary-neutral-default);--buttonBackgroundActive: var( --components-colors-button-color-background-primary-neutral-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-primary-neutral-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-neutral-disabled) 2.5px, var(--components-colors-button-color-background-primary-neutral-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-primary-neutral-default);--buttonColorDisabled: var(--components-colors-button-color-text-primary-neutral-disabled);--buttonColorHover: var(--components-colors-button-color-text-primary-neutral-hover);--buttonColorPressed: var(--components-colors-button-color-text-primary-neutral-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-primary-ai_vtvta_123{--buttonBackground: linear-gradient(var(--components-colors-button-color-background-primary-ai-default) 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--buttonBackgroundActive: linear-gradient(var(--components-colors-button-color-background-primary-ai-pressed) 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--buttonBackgroundHover: linear-gradient(var(--components-colors-button-color-background-primary-ai-hover) 0 0) padding-box, conic-gradient(from var(--gradient-angle) at 50% 50%, var(--color-green-30), var(--color-teal-40), var(--color-blue-40), var(--color-violet-40), var(--color-pink-40), var(--color-red-orange-40), var(--color-pink-40), var(--color-violet-40), var(--color-blue-40), var(--color-teal-40), var(--color-green-30)) border-box;--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-ai-disabled) 2.5px, var(--components-colors-button-color-background-primary-ai-disabled) 5.25px) padding-box, linear-gradient( 107.75deg, var(--color-neutral-30) 0%, var(--color-neutral-50) 20%, var(--color-neutral-40) 40%, var(--color-neutral-50) 60%, var(--color-neutral-60) 80%, var(--color-neutral-50) 100% ) border-box;--buttonBorderWidth: var(--components-dimensions-button-border-width-ai);--buttonColor: var(--components-colors-button-color-text-primary-ai-default);--buttonColorDisabled: var(--components-colors-button-color-text-primary-ai-disabled);--buttonColorHover: var(--components-colors-button-color-text-primary-ai-hover);--buttonColorPressed: var(--components-colors-button-color-text-primary-ai-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused);animation:_rotate-gradient_vtvta_1 3s linear infinite paused}@media (hover: hover) and (pointer: fine){._variant-primary-ai_vtvta_123:hover:not(:disabled):not([aria-disabled]){animation-play-state:running}}._variant-primary-ai_vtvta_123:focus-visible{animation-play-state:running}._variant-primary-danger_vtvta_155{--buttonBackground: var(--components-colors-button-color-background-primary-danger-default);--buttonBackgroundActive: var( --components-colors-button-color-background-primary-danger-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-primary-danger-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-primary-danger-disabled) 2.5px, var(--components-colors-button-color-background-primary-danger-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-primary-danger-default);--buttonColorDisabled: var(--components-colors-button-color-text-primary-danger-disabled);--buttonColorHover: var(--components-colors-button-color-text-primary-danger-hover);--buttonColorPressed: var(--components-colors-button-color-text-primary-danger-pressed);--buttonBorderWidth: var(--components-dimensions-button-border-width-secondary);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-secondary_vtvta_171{--buttonBackground: var(--components-colors-button-color-background-secondary-main-default);--buttonBackgroundActive: var( --components-colors-button-color-background-secondary-main-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-secondary-main-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-secondary-main-disabled) 2.5px, var(--components-colors-button-color-background-secondary-main-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-secondary-main-default);--buttonColorDisabled: var(--components-colors-button-color-text-secondary-main-disabled);--buttonColorHover: var(--components-colors-button-color-text-secondary-main-hover);--buttonColorPressed: var(--components-colors-button-color-text-secondary-main-pressed);--buttonBorderWidth: var(--components-dimensions-button-border-width-secondary);--buttonBorderColor: var(--components-colors-button-color-border-secondary-main-default);--buttonBorderColorHover: var(--components-colors-button-color-border-secondary-main-hover);--buttonBorderColorActive: var( --components-colors-button-color-border-secondary-main-pressed );--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-secondary-danger_vtvta_192{--buttonBackground: var(--components-colors-button-color-background-secondary-danger-default);--buttonBackgroundActive: var( --components-colors-button-color-background-secondary-danger-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-secondary-danger-hover );--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-secondary-danger-disabled) 2.5px, var(--components-colors-button-color-background-secondary-danger-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-secondary-danger-default);--buttonColorDisabled: var(--components-colors-button-color-text-secondary-danger-disabled);--buttonColorHover: var(--components-colors-button-color-text-secondary-danger-hover);--buttonColorPressed: var(--components-colors-button-color-text-secondary-danger-pressed);--buttonBorderWidth: var(--components-dimensions-button-border-width-secondary);--buttonBorderColor: var(--components-colors-button-color-border-secondary-danger-default);--buttonBorderColorHover: var(--components-colors-button-color-border-secondary-danger-hover);--buttonBorderColorActive: var( --components-colors-button-color-border-secondary-danger-pressed );--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-tertiary_vtvta_213{--buttonBackground: var(--components-colors-button-color-background-tertiary-main-default);--buttonBackgroundActive: var( --components-colors-button-color-background-tertiary-main-pressed );--buttonBackgroundHover: var(--components-colors-button-color-background-tertiary-main-hover);--buttonBackgroundDisabled: repeating-linear-gradient(-45deg, var(--color-neutral-10), var(--color-neutral-10) 2.5px, var(--components-colors-button-color-background-tertiary-main-disabled) 2.5px, var(--components-colors-button-color-background-tertiary-main-disabled) 5.25px) padding-box;--buttonColor: var(--components-colors-button-color-text-tertiary-main-default);--buttonColorDisabled: var(--components-colors-button-color-text-tertiary-main-disabled);--buttonColorHover: var(--components-colors-button-color-text-tertiary-main-hover);--buttonColorPressed: var(--components-colors-button-color-text-tertiary-main-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._variant-tertiary-danger_vtvta_226{--buttonBackground: var(--components-colors-button-color-background-tertiary-danger-default);--buttonBackgroundActive: var( --components-colors-button-color-background-tertiary-danger-pressed );--buttonBackgroundHover: var( --components-colors-button-color-background-tertiary-danger-hover );--buttonBackgroundDisabled: var( --components-colors-button-color-background-tertiary-danger-disabled );--buttonColor: var(--components-colors-button-color-text-tertiary-danger-default);--buttonColorDisabled: var(--components-colors-button-color-text-tertiary-danger-disabled);--buttonColorHover: var(--components-colors-button-color-text-tertiary-danger-hover);--buttonColorPressed: var(--components-colors-button-color-text-tertiary-danger-pressed);--buttonOutlineColorFocus: var(--components-colors-button-color-border-focused)}._loader_vtvta_243{display:flex;align-items:center;justify-content:center;position:absolute;bottom:0;left:0;right:0;top:0}._loader-children_vtvta_253{opacity:0}}

package/dist/Button.js

@@ -1,56 +1,56 @@
 "use client";
 import './Button.css';
-import { jsxs as o, jsx as r, Fragment as f } from "react/jsx-runtime";
-import { B as z } from "./XCKGTAUF-CJwwVibW.js";
-import { useButtonGroup as b } from "./ButtonGroup.js";
-import { Loader as h } from "./Loader.js";
-import { c as x } from "./index-PAaZGbyz.js";
-import { f as B } from "./forwardRefWithAs-8eP3ZN15.js";
+import { jsxs as o, jsx as t, Fragment as b } from "react/jsx-runtime";
+import { B as h } from "./XCKGTAUF-CJwwVibW.js";
+import { useButtonGroup as x } from "./ButtonGroup.js";
+import { Loader as B } from "./Loader.js";
+import { c as N } from "./index-PAaZGbyz.js";
+import { f as w } from "./forwardRefWithAs-8eP3ZN15.js";
 import "react";
-const N = "_root_9gw1k_12", $ = "_loader_9gw1k_243", j = {
-  root: N,
-  "wui-icon-font": "_wui-icon-font_9gw1k_64",
-  "size-sm": "_size-sm_9gw1k_74",
-  "size-md": "_size-md_9gw1k_82",
-  "size-lg": "_size-lg_9gw1k_90",
-  "variant-primary": "_variant-primary_9gw1k_98",
-  "variant-primary-neutral": "_variant-primary-neutral_9gw1k_108",
-  "variant-primary-ai": "_variant-primary-ai_9gw1k_123",
-  "rotate-gradient": "_rotate-gradient_9gw1k_1",
-  "variant-primary-danger": "_variant-primary-danger_9gw1k_155",
-  "variant-secondary": "_variant-secondary_9gw1k_171",
-  "variant-secondary-danger": "_variant-secondary-danger_9gw1k_192",
-  "variant-tertiary": "_variant-tertiary_9gw1k_213",
-  "variant-tertiary-danger": "_variant-tertiary-danger_9gw1k_226",
-  loader: $,
-  "loader-children": "_loader-children_9gw1k_253"
-}, t = x(j), D = B(
+const $ = "_root_vtvta_12", j = "_loader_vtvta_243", D = {
+  root: $,
+  "wui-icon-font": "_wui-icon-font_vtvta_66",
+  "size-sm": "_size-sm_vtvta_77",
+  "size-md": "_size-md_vtvta_84",
+  "size-lg": "_size-lg_vtvta_91",
+  "variant-primary": "_variant-primary_vtvta_98",
+  "variant-primary-neutral": "_variant-primary-neutral_vtvta_108",
+  "variant-primary-ai": "_variant-primary-ai_vtvta_123",
+  "rotate-gradient": "_rotate-gradient_vtvta_1",
+  "variant-primary-danger": "_variant-primary-danger_vtvta_155",
+  "variant-secondary": "_variant-secondary_vtvta_171",
+  "variant-secondary-danger": "_variant-secondary-danger_vtvta_192",
+  "variant-tertiary": "_variant-tertiary_vtvta_213",
+  "variant-tertiary-danger": "_variant-tertiary-danger_vtvta_226",
+  loader: j,
+  "loader-children": "_loader-children_vtvta_253"
+}, r = N(D), S = w(
   ({
-    accessibleWhenDisabled: s = !0,
+    accessibleWhenDisabled: v = !0,
     as: i,
     children: e,
-    className: _ = "",
-    disabled: d = !1,
+    className: s = "",
+    disabled: _ = !1,
     isLoading: a = !1,
-    size: l = "lg",
-    variant: m = "primary",
-    ...g
+    size: d = "lg",
+    variant: l = "primary",
+    ...m
   }, c) => {
-    const { disabled: p, size: v, variant: u } = b(), y = p || d || a, w = u || m, k = v || l, n = i || "button";
+    const { disabled: p, size: u, variant: y } = x(), f = p || _ || a, g = y || l, z = u || d, n = i || "button";
     return /* @__PURE__ */ o(
-      z,
+      h,
       {
         ...n === "button" ? { type: "button" } : {},
-        ...g,
-        accessibleWhenDisabled: s,
-        className: t("root", `variant-${w}`, `size-${k}`, _),
-        disabled: y,
+        ...m,
+        accessibleWhenDisabled: v,
+        className: r("root", `variant-${g}`, `size-${z}`, s),
+        disabled: f,
         ref: c,
-        render: i ? /* @__PURE__ */ r(n, {}) : void 0,
+        render: i ? /* @__PURE__ */ t(n, {}) : void 0,
         children: [
-          a ? /* @__PURE__ */ o(f, { children: [
-            /* @__PURE__ */ r("div", { className: t("loader"), children: /* @__PURE__ */ r(h, { size: "xs" }) }),
-            /* @__PURE__ */ r("div", { className: t("loader-children"), children: e })
+          a ? /* @__PURE__ */ o(b, { children: [
+            /* @__PURE__ */ t("div", { className: r("loader"), children: /* @__PURE__ */ t(B, { size: "xs" }) }),
+            /* @__PURE__ */ t("div", { className: r("loader-children"), children: e })
           ] }) : null,
           !a && e
         ]
@@ -58,7 +58,7 @@ const N = "_root_9gw1k_12", $ = "_loader_9gw1k_243", j = {
     );
   }
 );
-D.displayName = "Button";
+S.displayName = "Button";
 export {
-  D as Button
+  S as Button
 };

package/dist/CloseButton.js

@@ -16,7 +16,7 @@ const c = "_root_1r27z_2", l = "_fade_1r27z_1", f = {
       "aria-label": "Close",
       className: p("root", o && "animate-presence", t),
       ref: s,
-      size: "md",
+      size: "sm",
       variant: "tertiary",
       ...r,
       children: /* @__PURE__ */ e(m, { name: "times", size: "lg" })

package/dist/Drawer.js

@@ -1,99 +1,101 @@
 "use client";
 import './Drawer.css';
-import { jsx as e, jsxs as p, Fragment as I } from "react/jsx-runtime";
-import { D as W } from "./NI3IVY7K-Dy240mkD.js";
-import { u as fe } from "./NI3IVY7K-Dy240mkD.js";
-import { useCallback as D, forwardRef as h } from "react";
+import { jsx as e, jsxs as h, Fragment as P } from "react/jsx-runtime";
+import { D as S } from "./NI3IVY7K-Dy240mkD.js";
+import { u as Ne } from "./NI3IVY7K-Dy240mkD.js";
+import { useCallback as f, forwardRef as u } from "react";
 import { c as o } from "./index-PAaZGbyz.js";
-import { f as b } from "./forwardRefWithAs-8eP3ZN15.js";
-import { Button as E } from "./Button.js";
-import { Icon as x } from "./Icon.js";
-import { Text as v } from "./Text.js";
+import { f as z } from "./forwardRefWithAs-8eP3ZN15.js";
+import { Button as q } from "./Button.js";
+import { Icon as A } from "./Icon.js";
+import { Text as C } from "./Text.js";
 import { D as H } from "./DSAASPLT-Fx1kuAsk.js";
 import { CloseButton as M } from "./CloseButton.js";
-import { D as P } from "./ZTXFEM5L-WGHY_jqg.js";
-const R = "_content_1mhgf_13", S = "_title_1mhgf_67", f = {
+import { D as R } from "./ZTXFEM5L-WGHY_jqg.js";
+const J = "_content_1mhgf_13", K = "_title_1mhgf_67", b = {
   "asset-drawer": "_asset-drawer_1mhgf_3",
   "content-wrapper": "_content-wrapper_1mhgf_13",
   "content-max-width": "_content-max-width_1mhgf_24",
-  content: R,
+  content: J,
   "asset-drawer-header": "_asset-drawer-header_1mhgf_39",
   "back-button": "_back-button_1mhgf_57",
-  title: S,
+  title: K,
   "icon-block": "_icon-block_1mhgf_72",
   "size-md": "_size-md_1mhgf_84",
   "size-sm": "_size-sm_1mhgf_87"
-}, d = o(f), y = b(
+}, _ = o(b), T = z(
   ({
     children: t,
-    className: r,
-    getPersistentElements: s,
-    maxWidth: a,
+    className: s,
+    getPersistentElements: r,
+    hideOnInteractOutside: a = !0,
+    maxWidth: n,
     store: c,
-    ...i
-  }, m) => {
-    const l = D(
+    ...k
+  }, d) => {
+    const l = f(
       () => Array.from(
-        s ? s() : document.querySelectorAll("[data-wui-persistent]")
+        r ? r() : document.querySelectorAll("[data-wui-persistent]")
       ),
-      [s]
-    ), k = D(
-      (O) => {
-        const j = O.target;
+      [r]
+    ), g = f(
+      (m) => {
+        if (!a) return !1;
+        const N = m.target;
         return !l().some(
-          (B) => B.contains(j)
+          (D) => D.contains(N)
         );
       },
-      [l]
-    ), w = typeof a == "number" ? `${a}px` : a;
+      [l, a]
+    ), w = typeof n == "number" ? `${n}px` : n;
     return /* @__PURE__ */ e(
-      te,
+      ae,
       {
         autoFocusOnShow: !1,
-        className: d("asset-drawer", r),
+        className: _("asset-drawer", s),
         getPersistentElements: l,
-        hideOnInteractOutside: k,
+        hideOnInteractOutside: g,
         placement: "bottom",
-        ref: m,
+        ref: d,
         store: c,
         withBackdrop: !0,
-        ...i,
-        children: /* @__PURE__ */ e("div", { className: d("content-wrapper"), children: /* @__PURE__ */ e(
+        ...k,
+        children: /* @__PURE__ */ e("div", { className: _("content-wrapper"), children: /* @__PURE__ */ e(
           "div",
           {
-            className: d("content-max-width"),
+            className: _("content-max-width"),
             style: { "--assetDrawerContentMaxWidth": w },
-            children: /* @__PURE__ */ e("div", { className: d("content"), children: t })
+            children: /* @__PURE__ */ e("div", { className: _("content"), children: t })
           }
         ) })
       }
     );
   }
 );
-y.displayName = "AssetDrawer";
-const q = o(f), $ = ({ iconName: t, size: r = "md" }) => /* @__PURE__ */ e("div", { className: q("icon-block", `size-${r}`), children: /* @__PURE__ */ e(x, { className: "text-neutral-90", name: t, size: r }) });
-$.displayName = "AssetDrawer.IconBlock";
-const _ = o(f), z = ({
+T.displayName = "AssetDrawer";
+const L = o(b), F = ({ iconName: t, size: s = "md" }) => /* @__PURE__ */ e("div", { className: L("icon-block", `size-${s}`), children: /* @__PURE__ */ e(A, { className: "text-neutral-90", name: t, size: s }) });
+F.displayName = "AssetDrawer.IconBlock";
+const p = o(b), O = ({
   action: t,
-  className: r,
-  iconName: s,
+  className: s,
+  iconName: r,
   onBackButtonClick: a,
-  subtitle: c,
-  title: i
-}) => /* @__PURE__ */ p("div", { className: _("asset-drawer-header", r), children: [
-  /* @__PURE__ */ p("div", { className: _("back-button"), children: [
-    !!a && /* @__PURE__ */ e(E, { onClick: a, variant: "tertiary", children: /* @__PURE__ */ e(x, { name: "arrow-left" }) }),
-    !!s && /* @__PURE__ */ e($, { iconName: s }),
-    /* @__PURE__ */ p("div", { className: _("title"), children: [
-      /* @__PURE__ */ e(v, { as: "h3", className: "pr-xl", variant: "heading-lg", children: i }),
-      c
+  subtitle: n,
+  title: c
+}) => /* @__PURE__ */ h("div", { className: p("asset-drawer-header", s), children: [
+  /* @__PURE__ */ h("div", { className: p("back-button"), children: [
+    !!a && /* @__PURE__ */ e(q, { onClick: a, variant: "tertiary", children: /* @__PURE__ */ e(A, { name: "arrow-left" }) }),
+    !!r && /* @__PURE__ */ e(F, { iconName: r }),
+    /* @__PURE__ */ h("div", { className: p("title"), children: [
+      /* @__PURE__ */ e(C, { as: "h3", className: "pr-xl", variant: "heading-lg", children: c }),
+      n
     ] })
   ] }),
-  t ? /* @__PURE__ */ e("div", { className: _("actions"), children: t }) : null
+  t ? /* @__PURE__ */ e("div", { className: p("actions"), children: t }) : null
 ] });
-z.displayName = "AssetDrawer.Header";
-const J = "_root_iksk1_3", K = "_backdrop_iksk1_68", L = "_content_iksk1_85", Q = "_footer_iksk1_94", U = "_title_iksk1_108", n = {
-  root: J,
+O.displayName = "AssetDrawer.Header";
+const Q = "_root_iksk1_3", U = "_backdrop_iksk1_68", V = "_content_iksk1_85", X = "_footer_iksk1_94", Y = "_title_iksk1_108", i = {
+  root: Q,
   "placement-bottom": "_placement-bottom_iksk1_30",
   "placement-left": "_placement-left_iksk1_34",
   "placement-right": "_placement-right_iksk1_38",
@@ -101,79 +103,98 @@ const J = "_root_iksk1_3", K = "_backdrop_iksk1_68", L = "_content_iksk1_85", Q
   "size-sm": "_size-sm_iksk1_46",
   "size-md": "_size-md_iksk1_49",
   "size-lg": "_size-lg_iksk1_52",
-  backdrop: K,
+  backdrop: U,
   "drawer-hide-on-interact-outside": "_drawer-hide-on-interact-outside_iksk1_79",
-  content: L,
-  footer: Q,
-  title: U,
+  content: V,
+  footer: X,
+  title: Y,
   "drawer-close": "_drawer-close_iksk1_120"
-}, V = o(n), u = h(
-  ({ hideOnInteractOutside: t = !0, ...r }, s) => /* @__PURE__ */ e(
+}, Z = o(i), x = u(
+  ({ hideOnInteractOutside: t = !0, ...s }, r) => /* @__PURE__ */ e(
     "div",
     {
-      className: V("backdrop", t && "drawer-hide-on-interact-outside"),
-      ref: s,
-      ...r
+      className: Z("backdrop", t && "drawer-hide-on-interact-outside"),
+      ref: r,
+      ...s
     }
   )
 );
-u.displayName = "Drawer.Backdrop";
-const X = o(n), g = ({ className: t }) => /* @__PURE__ */ e(
+x.displayName = "Drawer.Backdrop";
+const G = o(i), y = ({ className: t }) => /* @__PURE__ */ e(
   H,
   {
-    render: (r) => /* @__PURE__ */ e(M, { className: X("drawer-close", t), ...r })
+    render: (s) => /* @__PURE__ */ e(M, { className: G("drawer-close", t), ...s })
   }
 );
-g.displayName = "Drawer.Close";
-const Y = o(n), C = h(({ className: t, ...r }, s) => /* @__PURE__ */ e("div", { className: Y("content", t), ref: s, ...r }));
-C.displayName = "Drawer.Content";
-const Z = o(n), A = h(({ className: t, ...r }, s) => /* @__PURE__ */ e("div", { className: Z("footer", t), ref: s, ...r }));
-A.displayName = "Drawer.Footer";
-const G = o(n), T = ({ children: t, className: r, ...s }) => /* @__PURE__ */ e("div", { className: G("title", r), ...s, children: /* @__PURE__ */ e(v, { as: "h3", className: "w-full", variant: "heading-lg", children: t }) });
-T.displayName = "Drawer.Title";
-const N = b(
-  ({ as: t, store: r, ...s }, a) => /* @__PURE__ */ e(P, { ref: a, render: t ? /* @__PURE__ */ e(t, {}) : void 0, store: r, ...s })
+y.displayName = "Drawer.Close";
+const ee = o(i), W = u(({ className: t, ...s }, r) => /* @__PURE__ */ e("div", { className: ee("content", t), ref: r, ...s }));
+W.displayName = "Drawer.Content";
+const te = o(i), j = u(({ className: t, ...s }, r) => /* @__PURE__ */ e("div", { className: te("footer", t), ref: r, ...s }));
+j.displayName = "Drawer.Footer";
+const se = o(i), B = ({ children: t, className: s, ...r }) => /* @__PURE__ */ e("div", { className: se("title", s), ...r, children: /* @__PURE__ */ e(C, { as: "h3", className: "w-full", variant: "heading-lg", children: t }) });
+B.displayName = "Drawer.Title";
+const v = z(
+  ({ as: t, store: s, ...r }, a) => /* @__PURE__ */ e(R, { ref: a, render: t ? /* @__PURE__ */ e(t, {}) : void 0, store: s, ...r })
 );
-N.displayName = "Drawer.Trigger";
-const ee = o(n), F = h(
+v.displayName = "Drawer.Trigger";
+const re = o(i), E = u(
   ({
     children: t,
-    className: r,
-    hideOnInteractOutside: s = !0,
-    placement: a = "right",
+    className: s,
+    getPersistentElements: r,
+    hideOnInteractOutside: a = !0,
+    placement: n = "right",
     size: c = "lg",
-    store: i,
-    withBackdrop: m = !1,
+    store: k,
+    withBackdrop: d = !1,
     withCloseButton: l = !0,
-    ...k
-  }, w) => /* @__PURE__ */ e(
-    W,
-    {
-      backdrop: m ? /* @__PURE__ */ e(u, { hideOnInteractOutside: s }) : !1,
-      hideOnInteractOutside: s,
-      modal: m,
-      ref: w,
-      render: /* @__PURE__ */ e("div", { className: ee("root", `placement-${a}`, `size-${c}`, r) }),
-      store: i,
-      ...k,
-      children: /* @__PURE__ */ p(I, { children: [
-        l ? /* @__PURE__ */ e(g, {}) : null,
-        t
-      ] })
-    }
-  )
+    ...g
+  }, w) => {
+    const m = f(
+      () => Array.from(
+        r ? r() : document.querySelectorAll("[data-wui-persistent]")
+      ),
+      [r]
+    ), N = f(
+      ($) => {
+        if (!a) return !1;
+        const D = $.target;
+        return !m().some(
+          (I) => I.contains(D)
+        );
+      },
+      [m, a]
+    );
+    return /* @__PURE__ */ e(
+      S,
+      {
+        backdrop: d ? /* @__PURE__ */ e(x, { hideOnInteractOutside: a }) : !1,
+        getPersistentElements: m,
+        hideOnInteractOutside: N,
+        modal: d,
+        ref: w,
+        render: /* @__PURE__ */ e("div", { className: re("root", `placement-${n}`, `size-${c}`, s) }),
+        store: k,
+        ...g,
+        children: /* @__PURE__ */ h(P, { children: [
+          l ? /* @__PURE__ */ e(y, {}) : null,
+          t
+        ] })
+      }
+    );
+  }
 );
-F.displayName = "Drawer";
-const te = Object.assign(F, {
-  Backdrop: u,
-  Close: g,
-  Content: C,
-  Footer: A,
-  Title: T,
-  Trigger: N
-}), he = Object.assign(y, { Header: z, Trigger: N });
+E.displayName = "Drawer";
+const ae = Object.assign(E, {
+  Backdrop: x,
+  Close: y,
+  Content: W,
+  Footer: j,
+  Title: B,
+  Trigger: v
+}), ke = Object.assign(T, { Header: O, Trigger: v });
 export {
-  he as AssetDrawer,
-  te as Drawer,
-  fe as useDrawer
+  ke as AssetDrawer,
+  ae as Drawer,
+  Ne as useDrawer
 };