@optiaxiom/react 0.8.1 → 0.9.0

package/README.md

@@ -1,6 +1,6 @@
 # Axiom
 
-Axiom is the technical implementation of the Optimizely Design System.
+A React implementation of Optimizely's Axiom Design System.
 
 ## Installation
 

package/dist/{PopoverContent-DWNFnl2l.d.ts → PopoverContent-CmbFiQwF.d.ts}

@@ -3,6 +3,8 @@ import { ElementType, ComponentPropsWithoutRef, ReactElement } from 'react';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as RadixPopover from '@radix-ui/react-popover';
 
+type ExcludeProps<P, T extends keyof P> = Omit<P, T>;
+
 type ExtendProps<T1, T2> = NonNullable<T2> & Omit<NonNullable<T1>, keyof NonNullable<T1> & keyof NonNullable<T2>>;
 
 interface ResponsiveArray<Length extends number, Value> extends ReadonlyArray<Value> {
@@ -1496,14 +1498,26 @@ type Sprinkles = Omit<Parameters<typeof sprinkles>[0], LonghandProps>;
 type LonghandProps = keyof Pick<Parameters<typeof sprinkles>[0], "backgroundColor" | "borderBottomWidth" | "borderLeftWidth" | "borderRadius" | "borderRightWidth" | "borderTopWidth" | "boxShadow" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "width" | "zIndex">;
 
 type BoxProps<T extends ElementType = "div", P = unknown> = ExtendProps<ComponentPropsWithoutRef<T>, ExtendProps<Sprinkles & {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * Read the {@link https://optimizely-axiom.github.io/optiaxiom/components/#composition Composition guide} for more details.
+     */
     asChild?: boolean;
     className?: string;
 }, P>>;
 declare const Box: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * Read the {@link https://optimizely-axiom.github.io/optiaxiom/components/#composition Composition guide} for more details.
+     */
     asChild?: boolean;
     className?: string;
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
+type RecipeVariants<RecipeFn extends (...args: any) => any> = Parameters<RecipeFn>[0];
+
 declare const Transition: react.ForwardRefExoticComponent<{
     duration?: "sm" | "md" | "lg" | undefined;
     type?: "pop" | "fade" | undefined;
@@ -1513,42 +1527,53 @@ declare const Transition: react.ForwardRefExoticComponent<{
     skipAnimations?: boolean;
 } & react.RefAttributes<HTMLDivElement>>;
 
-declare const DialogContent: react.ForwardRefExoticComponent<{
+declare const content: (props?: {
     size?: "sm" | "md" | "lg" | "fullscreen" | undefined;
-} & {
+} | undefined, className?: string) => {
+    className: string;
+};
+type DialogVariants = RecipeVariants<typeof content>;
+
+type DialogContentProps = ExcludeProps<BoxProps<typeof RadixDialog.Content, DialogVariants & {
     transitionType?: ComponentPropsWithoutRef<typeof Transition>["type"];
-} & Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, "size"> & Omit<Omit<RadixDialog.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref">, "asChild" | "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
+}>, "forceMount">;
+declare const DialogContent: react.ForwardRefExoticComponent<DialogContentProps & react.RefAttributes<HTMLDivElement>>;
 
 declare const MenuListbox: react.ForwardRefExoticComponent<{
+    maxH?: "sm" | "md" | "xs" | "lg" | "full" | undefined;
     minW?: "0" | "trigger" | undefined;
     provider?: "popover" | "dropdown-menu" | "popper" | undefined;
 } & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
-}>, never> & Omit<Omit<Omit<NonNullable<Sprinkles & {
+}>, "maxH"> & Omit<Omit<Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>, "ref">, "asChild" | "p" | "fontFamily" | "animation" | "fontSize" | "size" | "borderColor" | "color" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "pointerEvents" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "m" | "mx" | "my" | "mb" | "ml" | "mr" | "mt" | "overflow" | "px" | "py" | "pb" | "pl" | "pr" | "pt" | "rounded" | "shadow" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "maxH" | "maxW" | "h" | "w" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
 declare const Link: react.ForwardRefExoticComponent<{
     appearance?: "default" | "subtle" | "inverse" | undefined;
+    overlay?: boolean | undefined;
 } & {
+    /**
+     * Whether to show disabled state and disable interactions.
+     */
     disabled?: boolean;
+    /**
+     * Show an external link icon and sets the correct rel/target attributes.
+     */
     external?: boolean;
 } & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLAnchorElement>>;
 
-declare const PopoverContent: react.ForwardRefExoticComponent<{
-    minW?: ComponentPropsWithoutRef<typeof MenuListbox>["minW"];
+type PopoverContentProps = ExcludeProps<BoxProps<typeof RadixPopover.Content, Pick<ComponentPropsWithoutRef<typeof MenuListbox>, "maxH" | "minW"> & {
+    /**
+     * Whether to show an arrow.
+     */
     withArrow?: boolean;
-} & Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, never> & Omit<Omit<RadixPopover.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref">, "asChild" | "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
+}>, "alignOffset" | "arrowPadding" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "forceMount" | "hideWhenDetached" | "sticky" | "updatePositionStrategy">;
+declare const PopoverContent: react.ForwardRefExoticComponent<PopoverContentProps & react.RefAttributes<HTMLDivElement>>;
 
-export { type BoxProps as B, DialogContent as D, type ExtendProps as E, Link as L, MenuListbox as M, PopoverContent as P, type ResponsiveArray as R, type Sprinkles as S, Transition as T, Box as a, mapResponsiveValue as m, sprinkles as s };
+export { type BoxProps as B, DialogContent as D, type ExcludeProps as E, Link as L, MenuListbox as M, PopoverContent as P, type RecipeVariants as R, type Sprinkles as S, Transition as T, type ExtendProps as a, type ResponsiveArray as b, Box as c, mapResponsiveValue as m, sprinkles as s };

package/dist/assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-BDjo6i31.css

@@ -0,0 +1,24 @@
+@layer optiaxiom._1lcqm4m;
+@layer optiaxiom._1lcqm4m {
+  ._1ji87a3 {
+    inset: 0;
+    position: fixed;
+  }
+  .g9kf6a {
+    max-height: 50dvh;
+    max-width: calc(100dvw - 2 * 24px);
+    transform: 
+      translateY(calc(1rem * var(--_10f9i7g)))
+      scale(calc(1 - 0.06 * var(--_10f9i7g)))
+    ;
+  }
+  ._1c88878 {
+    width: 400px;
+  }
+  ._1f0dhch {
+    width: 600px;
+  }
+  ._1o7rduu {
+    width: 800px;
+  }
+}

package/dist/assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-Cz2HvZMx.css

@@ -0,0 +1,6 @@
+@layer optiaxiom._1lcqm4m;
+@layer optiaxiom._1lcqm4m {
+  .jc4512 {
+    border-top: 1px solid var(--ax-colors-border-secondary);
+  }
+}

package/dist/assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-B_wb60Sc.css

@@ -0,0 +1,10 @@
+@layer optiaxiom._1lcqm4m;
+@layer optiaxiom._1lcqm4m {
+  ._157xutq {
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+  ._157xutq:empty {
+    visibility: hidden;
+  }
+}

package/dist/assets/src/avatar/Avatar.css.ts.vanilla-Cw1M_qyD.css

@@ -0,0 +1,27 @@
+@layer optiaxiom._1lcqm4m;
+@layer optiaxiom._1lcqm4m {
+  .miagcj {
+    user-select: none;
+  }
+  ._18ophdl .miagcj {
+    border: 1px solid var(--ax-colors-bg-default);
+  }
+  ._18ophdl .lzczfd:not(:first-child) {
+    margin-left: -3px;
+  }
+  ._18ophdl ._866w6t:not(:first-child) {
+    margin-left: -5px;
+  }
+  ._18ophdl .lpnnh3:not(:first-child) {
+    margin-left: -7px;
+  }
+  ._18ophdl ._1w598n3:not(:first-child) {
+    margin-left: -9px;
+  }
+  ._18ophdl .eb1g0p:not(:first-child) {
+    margin-left: -11px;
+  }
+  ._18ophdl ._10aiqxg:not(:first-child) {
+    margin-left: -13px;
+  }
+}

package/dist/assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BbzMTUzd.css

@@ -0,0 +1,4 @@
+@layer optiaxiom._1lcqm4m;
+@layer optiaxiom._1lcqm4m {
+
+}

package/dist/assets/src/backdrop/{Backdrop.css.ts.vanilla-CgQ2BbGZ.css → Backdrop.css.ts.vanilla-DirKW22r.css}

@@ -1,6 +1,6 @@
-@layer optiaxiom._1no99yr;
-@layer optiaxiom._1no99yr {
-  .hanvim {
+@layer optiaxiom._1lcqm4m;
+@layer optiaxiom._1lcqm4m {
+  ._1ghr6gz {
     backdrop-filter: blur(4px);
     inset: 0;
     position: fixed;

package/dist/assets/src/badge/Badge.css.ts.vanilla-BvS_yf0c.css

@@ -0,0 +1,46 @@
+@layer optiaxiom._1lcqm4m;
+@layer optiaxiom._1lcqm4m {
+  .nt9omr {
+    --_3b8uz8: var(--ax-colors-fg-white);
+  }
+  .ul9xdj {
+    --_9xvone: var(--ax-colors-bg-error);
+    --_1lkp2a0: var(--ax-colors-bg-error-subtle);
+    --_12ufgpl: var(--ax-colors-fg-error-strong);
+  }
+  ._1wdecah {
+    --_9xvone: var(--ax-colors-bg-information);
+    --_1lkp2a0: var(--ax-colors-bg-information-subtle);
+    --_12ufgpl: var(--ax-colors-fg-information-strong);
+  }
+  ._1f9wywo {
+    --_9xvone: var(--ax-colors-bg-tertiary);
+    --_3b8uz8: var(--ax-colors-fg-default);
+    --_1lkp2a0: var(--ax-colors-bg-secondary);
+    --_12ufgpl: var(--ax-colors-fg-secondary);
+  }
+  .f4qf85 {
+    --_9xvone: var(--ax-colors-bg-accent);
+    --_1lkp2a0: var(--ax-colors-bg-accent-subtle);
+    --_12ufgpl: var(--ax-colors-fg-accent-strong);
+  }
+  .bcdgd2 {
+    --_9xvone: var(--ax-colors-bg-success);
+    --_1lkp2a0: var(--ax-colors-bg-success-subtle);
+    --_12ufgpl: var(--ax-colors-fg-success-strong);
+  }
+  ._7ct7xi {
+    --_9xvone: var(--ax-colors-bg-warning);
+    --_3b8uz8: var(--ax-colors-fg-warning-inverse);
+    --_1lkp2a0: var(--ax-colors-bg-warning-subtle);
+    --_12ufgpl: var(--ax-colors-fg-warning-strong);
+  }
+  .pi4oim {
+    background-color: var(--_1lkp2a0);
+    color: var(--_12ufgpl);
+  }
+  .hhpfmh {
+    background-color: var(--_9xvone);
+    color: var(--_3b8uz8);
+  }
+}

package/dist/assets/src/box/{Box.css.ts.vanilla-CV_xBQOM.css → Box.css.ts.vanilla-DIKXfgB7.css}

@@ -1,6 +1,6 @@
-@layer optiaxiom._1qc7hop;
-@layer optiaxiom._1qc7hop {
-  .epp8j4 {
+@layer optiaxiom._1bcsvj8;
+@layer optiaxiom._1bcsvj8 {
+  .uogfqd {
     border: 0 solid var(--ax-colors-border-default);
     box-sizing: border-box;
     font-family: var(--ax-fontFamily-sans);
@@ -9,79 +9,79 @@
     padding: 0;
     -webkit-font-smoothing: antialiased;
   }
-  .epp8j4:focus-visible {
+  .uogfqd:focus-visible {
     --tw-ring-offset-width: 0;
   }
-  .epp8j4:is(hr) {
+  .uogfqd:is(hr) {
     border-top-width: 1px;
     color: inherit;
     height: 0;
   }
-  .epp8j4:is(h1, h2, h3, h4, h5, h6) {
+  .uogfqd:is(h1, h2, h3, h4, h5, h6) {
     font-size: inherit;
     font-weight: inherit;
   }
-  .epp8j4:is(b, strong) {
+  .uogfqd:is(b, strong) {
     font-weight: bolder;
   }
-  .epp8j4:is(code, kbd, samp, pre) {
+  .uogfqd:is(code, kbd, samp, pre) {
     font-family: var(--ax-fontFamily-mono);
     font-feature-settings: normal;
     font-size: 1em;
   }
-  .epp8j4:is(table) {
+  .uogfqd:is(table) {
     border-collapse: collapse;
     border-color: inherit;
     text-indent: 0;
   }
-  .epp8j4:is(button, input, optgroup, select, textarea) {
+  .uogfqd:is(button, input, optgroup, select, textarea) {
     color: inherit;
     font-size: 100%;
     letter-spacing: inherit;
   }
-  .epp8j4:is(button, input:where([type=button], [type=reset], [type=submit])) {
+  .uogfqd:is(button, input:where([type=button], [type=reset], [type=submit])) {
     background-color: transparent;
     background-image: none;
     -webkit-appearance: button;
   }
-  .epp8j4:is([type=search]) {
+  .uogfqd:is([type=search]) {
     outline-offset: -2px;
     -webkit-appearance: textfield;
   }
-  .epp8j4::-webkit-file-upload-button {
+  .uogfqd::-webkit-file-upload-button {
     font: inherit;
     -webkit-appearance: button;
   }
-  .epp8j4:is(ol, ul, menu) {
+  .uogfqd:is(ol, ul, menu) {
     list-style: none;
   }
-  .epp8j4:is(textarea) {
+  .uogfqd:is(textarea) {
     resize: vertical;
   }
-  .epp8j4:is(input, textarea)::placeholder {
+  .uogfqd:is(input, textarea)::placeholder {
     color: var(--ax-colors-fg-tertiary);
     opacity: 1;
   }
-  .epp8j4:is(button, [role=button]) {
+  .uogfqd:is(button, [role=button]) {
     cursor: pointer;
   }
-  .epp8j4:is(:disabled) {
+  .uogfqd:is(:disabled) {
     cursor: default;
   }
-  .epp8j4::-webkit-search-decoration {
+  .uogfqd::-webkit-search-decoration {
     -webkit-appearance: none;
   }
-  .epp8j4::-webkit-search-cancel-button {
+  .uogfqd::-webkit-search-cancel-button {
     -webkit-appearance: none;
   }
-  .epp8j4:is(img, svg, video, canvas, audio, iframe, embed, object) {
+  .uogfqd:is(img, svg, video, canvas, audio, iframe, embed, object) {
     display: block;
   }
-  .epp8j4:is(img, video) {
+  .uogfqd:is(img, video) {
     height: auto;
     max-width: 100%;
   }
-  .epp8j4:is(select) {
+  .uogfqd:is(select) {
     appearance: none;
   }
 }

package/dist/assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-DKiGgQaa.css

@@ -0,0 +1,8 @@
+@layer optiaxiom._1lcqm4m;
+@layer optiaxiom._1lcqm4m {
+  .ei15i8:not(:first-child)::before {
+    content: "/";
+    color: var(--ax-colors-fg-tertiary);
+    margin-right: 8px;
+  }
+}

package/dist/assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-Dba3cqM2.css

@@ -0,0 +1,14 @@
+@layer optiaxiom._1lcqm4m;
+@layer optiaxiom._1lcqm4m {
+  .igp2ld {
+    color: var(--ax-colors-fg-tertiary);
+  }
+  .igp2ld:visited {
+    color: var(--ax-colors-fg-tertiary);
+  }
+  @media (hover: hover) {
+    .igp2ld:hover:not([data-disabled]) {
+      color: var(--ax-colors-fg-secondary);
+    }
+  }
+}

package/dist/assets/src/button-base/ButtonBase.css.ts.vanilla-CrqPWBsM.css

@@ -0,0 +1,147 @@
+@layer optiaxiom._1lcqm4m;
+@layer optiaxiom._1lcqm4m {
+  ._1po00ao {
+    border-radius: var(--ax-borderRadius-md);
+    padding-inline: var(--_1y4y6d6);
+    position: relative;
+    text-decoration: none;
+    user-select: none;
+  }
+  ._1po00ao:is(:focus-visible, :has(:focus-visible)):not([data-disabled], [data-loading]) {
+    outline: 2px solid var(--ax-colors-border-focus);
+    outline-offset: 1px;
+    z-index: 10;
+  }
+  ._1y076oe[data-orientation="horizontal"] > ._1po00ao:not(:first-child):not(:last-child),._1y076oe[data-orientation="horizontal"] > :not(:first-child):not(:last-child) ._1po00ao {
+    border-inline-width: 0.5px;
+  }
+  ._1y076oe[data-orientation="horizontal"] > ._1po00ao:not(:only-child):first-child,._1y076oe[data-orientation="horizontal"] > :not(:only-child):first-child ._1po00ao {
+    border-bottom-right-radius: 0;
+    border-right-width: 0.5px;
+    border-top-right-radius: 0;
+  }
+  ._1y076oe[data-orientation="horizontal"] > ._1po00ao:not(:only-child):last-child,._1y076oe[data-orientation="horizontal"] > :not(:only-child):last-child ._1po00ao {
+    border-bottom-left-radius: 0;
+    border-left-width: 0.5px;
+    border-top-left-radius: 0;
+  }
+  ._1y076oe[data-orientation="vertical"] > ._1po00ao:not(:first-child):not(:last-child),._1y076oe[data-orientation="vertical"] > :not(:first-child):not(:last-child) ._1po00ao {
+    border-block-width: 0.5px;
+  }
+  ._1y076oe[data-orientation="vertical"] > ._1po00ao:not(:only-child):first-child,._1y076oe[data-orientation="vertical"] > :not(:only-child):first-child ._1po00ao {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-width: 0.5px;
+  }
+  ._1y076oe[data-orientation="vertical"] > ._1po00ao:not(:only-child):last-child,._1y076oe[data-orientation="vertical"] > :not(:only-child):last-child ._1po00ao {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top-width: 0.5px;
+  }
+  ._1y076oe[data-orientation] > ._1po00ao:not(:first-child):not(:last-child),._1y076oe[data-orientation] > :not(:first-child):not(:last-child) ._1po00ao {
+    border-radius: 0;
+  }
+  .yrj1xf {
+    min-width: fit-content;
+  }
+  ._6t8e9e {
+    --_1379d7o: var(--ax-colors-bg-error);
+    --_1j6y331: var(--ax-colors-bg-error-hovered);
+    --x7opm0: var(--ax-colors-bg-error-pressed);
+    --_117mi0m: var(--ax-colors-bg-error-subtlest);
+    --_4p3vys: var(--ax-colors-bg-error-subtle);
+  }
+  .jhmgkb {
+    --_1379d7o: var(--ax-colors-bg-default-inverse);
+    --_1j6y331: var(--ax-colors-bg-default-inverse-hovered);
+    --x7opm0: var(--ax-colors-bg-default-inverse-pressed);
+    --_1k8bzi3: var(--ax-colors-fg-default-inverse);
+    --_117mi0m: var(--ax-colors-bg-page);
+    --g2oelm: var(--ax-colors-border-default);
+    --_8vla35: var(--ax-colors-border-default);
+    --_4p3vys: var(--ax-colors-bg-secondary);
+    --k2yh4b: var(--ax-colors-fg-default);
+    --_175l19o: var(--ax-colors-bg-default-hovered);
+    --_13yashv: var(--ax-colors-bg-default-pressed);
+  }
+  ._8466a3 {
+    --_1379d7o: var(--ax-colors-bg-accent);
+    --_1j6y331: var(--ax-colors-bg-accent-hovered);
+    --x7opm0: var(--ax-colors-bg-accent-pressed);
+    --_117mi0m: var(--ax-colors-bg-accent-subtle);
+    --_4p3vys: var(--ax-colors-bg-accent-light);
+  }
+  .s7w5h1 {
+    background-color: var(--ax-colors-bg-default);
+    border: 1px solid var(--_8vla35, var(--_1379d7o));
+    color: var(--k2yh4b, var(--_1379d7o));
+    padding-inline: calc(var(--_1y4y6d6) - 1px);
+  }
+  .s7w5h1:active:not([data-disabled], [data-loading], [data-state="active"], [data-state="on"]) {
+    background-color: var(--_4p3vys);
+    border-color: var(--g2oelm, var(--_1j6y331));
+  }
+  .s7w5h1:is([data-state="active"], [data-state="on"]) {
+    background-color: var(--ax-colors-bg-accent-subtle);
+    border-color: var(--ax-colors-fg-accent);
+    color: var(--ax-colors-fg-accent);
+  }
+  .s7w5h1[data-disabled]:not([data-loading]) {
+    border-color: var(--ax-colors-border-disabled);
+    color: var(--ax-colors-fg-disabled);
+  }
+  .fpw45 {
+    background-color: var(--_1379d7o);
+    color: var(--_1k8bzi3, var(--ax-colors-fg-white));
+  }
+  .fpw45:active:not([data-disabled], [data-loading]) {
+    background-color: var(--x7opm0);
+  }
+  .fpw45[data-disabled]:not([data-loading]) {
+    background-color: var(--ax-colors-bg-secondary);
+    border: 1px solid var(--ax-colors-border-disabled);
+    color: var(--ax-colors-fg-disabled);
+    padding-inline: calc(var(--_1y4y6d6) - 1px);
+  }
+  ._1wcb5mc {
+    background-color: transparent;
+    border-color: var(--_1379d7o);
+    color: var(--k2yh4b, var(--_1379d7o));
+  }
+  ._1wcb5mc:active:not([data-disabled], [data-loading], [data-state="active"], [data-state="on"]) {
+    background-color: var(--_13yashv, var(--_4p3vys));
+  }
+  ._1wcb5mc:is([data-state="active"], [data-state="on"]) {
+    background-color: var(--ax-colors-bg-accent-subtle);
+    color: var(--ax-colors-fg-accent);
+  }
+  ._1wcb5mc[data-disabled]:not([data-loading]) {
+    color: var(--ax-colors-fg-disabled);
+  }
+  .rt633a {
+    --_1y4y6d6: 4px;
+  }
+  .w4w2l0 {
+    --_1y4y6d6: 8px;
+  }
+  ._1mm8xp6 {
+    --_1y4y6d6: 12px;
+  }
+  .y66v4x {
+    left: 0;
+    position: absolute;
+    right: 0;
+  }
+  @media (hover: hover) {
+    .s7w5h1:hover:not(:active, [data-disabled], [data-loading], [data-state="active"], [data-state="on"]) {
+      background-color: var(--_117mi0m);
+      border-color: var(--g2oelm, var(--_1j6y331));
+    }
+    .fpw45:hover:not(:active, [data-disabled], [data-loading]) {
+      background-color: var(--_1j6y331);
+    }
+    ._1wcb5mc:hover:not(:active, [data-disabled], [data-loading], [data-state="active"], [data-state="on"]) {
+      background-color: var(--_175l19o, var(--_117mi0m));
+    }
+  }
+}

package/dist/assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-BGUfLaAx.css

@@ -0,0 +1,9 @@
+@layer optiaxiom._1lcqm4m;
+@layer optiaxiom._1lcqm4m {
+  ._1nfe9uj {
+    opacity: 1;
+  }
+  ._15m7x0z[data-loading] ._1nfe9uj {
+    opacity: 0;
+  }
+}

package/dist/assets/src/checkbox/Checkbox.css.ts.vanilla-CxccT3Rg.css

@@ -0,0 +1,22 @@
+@layer optiaxiom._1lcqm4m;
+@layer optiaxiom._1lcqm4m {
+  .uouv7i {
+    clip-path: inset(100% 0 0 0);
+    transition-delay: 125ms;
+  }
+  .gd9sx4:has(._1ywtts4:checked) .uouv7i {
+    clip-path: inset(0 0 0 0);
+  }
+  ._9gdsfl {
+    background-color: var(--ax-colors-bg-default);
+    border-color: var(--_1aupzrz);
+    border-width: 1px;
+    place-content: center;
+    transition-duration: 150ms;
+    transition-property: border-width;
+    transition-timing-function: ease;
+  }
+  .gd9sx4:has(._1ywtts4:checked) ._9gdsfl {
+    border-width: 8px;
+  }
+}

package/dist/assets/src/code/Code.css.ts.vanilla-B9UeDgSL.css

@@ -0,0 +1,11 @@
+@layer optiaxiom._1lcqm4m;
+@layer optiaxiom._1lcqm4m {
+  .n6drj0 {
+    font-size: 0.9em;
+    font-variant-ligatures: none;
+    -webkit-font-smoothing: auto;
+  }
+  .n6drj0::after, .n6drj0::before {
+    content: "`";
+  }
+}

package/dist/assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-BnQBFIMz.css

@@ -0,0 +1,7 @@
+@layer optiaxiom._1lcqm4m;
+@layer optiaxiom._1lcqm4m {
+  ._17rdj5q[data-highlighted][data-focus-visible] {
+    outline: 2px solid var(--ax-colors-border-active);
+    outline-offset: 1px;
+  }
+}