@seed-design/lynx-css 0.11.1 → 0.12.1

package/recipes/menu-sheet.css

@@ -8,7 +8,7 @@
     bottom: 0;
     left: 0;
     --sheet-z-index: 20;
-    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0))
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
 }
 .seed-menu-sheet__backdrop {
     position: fixed;
@@ -18,7 +18,7 @@
     left: 0;
     opacity: 0;
     background-color: var(--seed-color-bg-overlay);
-    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0))
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
 }
 .seed-menu-sheet__content {
     position: relative;
@@ -30,7 +30,7 @@
     max-width: 480px;
     border-top-left-radius: var(--seed-radius-r5);
     border-top-right-radius: var(--seed-radius-r5);
-    transform: translate3d(0, 100%, 0)
+    transform: translate3d(0, 100%, 0);
 }
 .seed-menu-sheet__contentInner {
     display: flex;
@@ -38,7 +38,7 @@
     width: 100%;
     padding-top: var(--seed-dimension-x6);
     padding-right: var(--seed-dimension-spacing-x-global-gutter);
-    padding-left: var(--seed-dimension-spacing-x-global-gutter)
+    padding-left: var(--seed-dimension-spacing-x-global-gutter);
 }
 .seed-menu-sheet__header {
     display: flex;
@@ -46,59 +46,64 @@
     align-items: center;
     text-align: center;
     gap: var(--seed-dimension-x1);
-    padding-bottom: var(--seed-dimension-x4)
+    padding-bottom: var(--seed-dimension-x4);
 }
 .seed-menu-sheet__title {
     color: var(--seed-color-fg-neutral);
     font-size: var(--seed-font-size-t6);
     line-height: var(--seed-line-height-t6);
     font-weight: var(--seed-font-weight-bold);
-    margin: 0
+    margin: 0;
 }
 .seed-menu-sheet__description {
     color: var(--seed-color-fg-neutral-muted);
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
     font-weight: var(--seed-font-weight-regular);
-    margin: 0
+    margin: 0;
 }
 .seed-menu-sheet__list {
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    gap: var(--seed-dimension-x2_5)
+    gap: var(--seed-dimension-x2_5);
 }
 .seed-menu-sheet__group {
     display: flex;
     flex-direction: column;
     align-items: stretch;
     overflow: hidden;
-    border-radius: var(--seed-radius-r4)
+    border-radius: var(--seed-radius-r4);
 }
 .seed-menu-sheet__footer {
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    padding-top: var(--seed-dimension-x2_5)
+    padding-top: var(--seed-dimension-x2_5);
 }
 .seed-menu-sheet__closeButton {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: var(--seed-color-bg-neutral-weak);
+}
+.seed-menu-sheet__closeButton:active {
+    background-color: var(--seed-color-bg-neutral-weak-pressed);
+}
+.seed-menu-sheet__closeButton {
     min-height: 52px;
     padding-top: var(--seed-dimension-x3_5);
     padding-right: var(--seed-dimension-x5);
     padding-bottom: var(--seed-dimension-x3_5);
     padding-left: var(--seed-dimension-x5);
-    border-radius: var(--seed-radius-r3)
+    border-radius: var(--seed-radius-r3);
 }
 .seed-menu-sheet__closeButtonLabel {
     color: var(--seed-color-fg-neutral);
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
-    font-weight: var(--seed-font-weight-medium)
+    font-weight: var(--seed-font-weight-medium);
 }
 .seed-menu-sheet__closeButton--closeButtonPressed_true {
-    background-color: var(--seed-color-bg-neutral-weak-pressed)
+    background-color: var(--seed-color-bg-neutral-weak-pressed);
 }

package/recipes/page-banner.css

@@ -9,6 +9,14 @@
     padding-top: var(--seed-dimension-x2_5);
     padding-bottom: var(--seed-dimension-x2_5);
 }
+.seed-page-banner__scaleContent {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 0;
+}
 .seed-page-banner__content {
     display: flex;
     flex-direction: row;

package/recipes/page-banner.d.ts

@@ -27,7 +27,7 @@ declare type PageBannerVariantMap = {
 
 export declare type PageBannerVariantProps = Partial<PageBannerVariant>;
 
-export declare type PageBannerSlotName = "root" | "content" | "body" | "title" | "description" | "button" | "closeButton" | "prefixIcon" | "suffixIcon" | "closeButtonIcon";
+export declare type PageBannerSlotName = "root" | "content" | "scaleContent" | "body" | "title" | "description" | "button" | "closeButton" | "prefixIcon" | "suffixIcon" | "closeButtonIcon";
 
 export declare const pageBannerVariantMap: PageBannerVariantMap;
 

package/recipes/page-banner.mjs

@@ -10,6 +10,10 @@ const pageBannerSlotNames = [
     "content",
     "seed-page-banner__content"
   ],
+  [
+    "scaleContent",
+    "seed-page-banner__scaleContent"
+  ],
   [
     "body",
     "seed-page-banner__body"

package/recipes/quantity-picker.css

@@ -0,0 +1,213 @@
+.seed-quantity-picker__root {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+    background-color: var(--seed-color-bg-layer-default);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak)
+}
+.seed-quantity-picker__decrementButton {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    padding: 0;
+    background-color: var(--seed-color-bg-transparent);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
+}
+.seed-quantity-picker__decrementIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral);
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral)
+}
+.seed-quantity-picker__valueDisplay {
+    display: grid;
+    flex-grow: 1;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-neutral)
+}
+.seed-quantity-picker__valueDisplayPlaceholder {
+    grid-column-start: 1;
+    grid-column-end: 2;
+    grid-row-start: 1;
+    grid-row-end: 2;
+    visibility: hidden
+}
+.seed-quantity-picker__valueDisplayText {
+    grid-column-start: 1;
+    grid-column-end: 2;
+    grid-row-start: 1;
+    grid-row-end: 2;
+    text-align: center
+}
+.seed-quantity-picker__divider {
+    flex-shrink: 0;
+    background-color: var(--seed-color-stroke-neutral-subtle)
+}
+.seed-quantity-picker__incrementButton {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    padding: 0;
+    background-color: var(--seed-color-bg-transparent);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
+}
+.seed-quantity-picker__incrementIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral);
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral)
+}
+.seed-quantity-picker__root--layout_fill {
+    flex-grow: 1
+}
+.seed-quantity-picker__root--size_small {
+    height: var(--seed-dimension-x9);
+    border-radius: var(--seed-radius-r2)
+}
+.seed-quantity-picker__decrementButton--size_small {
+    width: var(--seed-dimension-x9);
+    height: var(--seed-dimension-x9);
+    border-radius: var(--seed-radius-r2)
+}
+.seed-quantity-picker__decrementIcon--size_small {
+    width: 16px;
+    height: 16px;
+    --size: 16px;
+    --thickness: 2px
+}
+.seed-quantity-picker__valueDisplay--size_small {
+    padding-left: var(--seed-dimension-x2);
+    padding-right: var(--seed-dimension-x2);
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5)
+}
+.seed-quantity-picker__divider--size_small {
+    width: 1px;
+    height: var(--seed-dimension-x4)
+}
+.seed-quantity-picker__incrementButton--size_small {
+    width: var(--seed-dimension-x9);
+    height: var(--seed-dimension-x9);
+    border-radius: var(--seed-radius-r2)
+}
+.seed-quantity-picker__incrementIcon--size_small {
+    width: 16px;
+    height: 16px;
+    --size: 16px;
+    --thickness: 2px
+}
+.seed-quantity-picker__root--size_medium {
+    height: var(--seed-dimension-x10);
+    border-radius: var(--seed-radius-r2)
+}
+.seed-quantity-picker__decrementButton--size_medium {
+    width: var(--seed-dimension-x10);
+    height: var(--seed-dimension-x10);
+    border-radius: var(--seed-radius-r2)
+}
+.seed-quantity-picker__decrementIcon--size_medium {
+    width: 18px;
+    height: 18px;
+    --size: 18px;
+    --thickness: 2px
+}
+.seed-quantity-picker__valueDisplay--size_medium {
+    padding-left: var(--seed-dimension-x2);
+    padding-right: var(--seed-dimension-x2);
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5)
+}
+.seed-quantity-picker__divider--size_medium {
+    width: 1px;
+    height: var(--seed-dimension-x4)
+}
+.seed-quantity-picker__incrementButton--size_medium {
+    width: var(--seed-dimension-x10);
+    height: var(--seed-dimension-x10);
+    border-radius: var(--seed-radius-r2)
+}
+.seed-quantity-picker__incrementIcon--size_medium {
+    width: 18px;
+    height: 18px;
+    --size: 18px;
+    --thickness: 2px
+}
+.seed-quantity-picker__root--size_large {
+    height: var(--seed-dimension-x13);
+    border-radius: var(--seed-radius-r3)
+}
+.seed-quantity-picker__decrementButton--size_large {
+    width: var(--seed-dimension-x13);
+    height: var(--seed-dimension-x13);
+    border-radius: var(--seed-radius-r3)
+}
+.seed-quantity-picker__decrementIcon--size_large {
+    width: 22px;
+    height: 22px;
+    --size: 22px;
+    --thickness: 2px
+}
+.seed-quantity-picker__valueDisplay--size_large {
+    padding-left: var(--seed-dimension-x2);
+    padding-right: var(--seed-dimension-x2);
+    font-size: var(--seed-font-size-t6);
+    line-height: var(--seed-line-height-t6)
+}
+.seed-quantity-picker__divider--size_large {
+    width: 1px;
+    height: var(--seed-dimension-x4)
+}
+.seed-quantity-picker__incrementButton--size_large {
+    width: var(--seed-dimension-x13);
+    height: var(--seed-dimension-x13);
+    border-radius: var(--seed-radius-r3)
+}
+.seed-quantity-picker__incrementIcon--size_large {
+    width: 22px;
+    height: 22px;
+    --size: 22px;
+    --thickness: 2px
+}
+.seed-quantity-picker__root--invalid_true {
+    box-shadow: inset 0 0 0 2px var(--seed-color-stroke-critical-solid)
+}
+.seed-quantity-picker__decrementIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-quantity-picker__valueDisplay--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-quantity-picker__incrementIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-quantity-picker__decrementButton--pressed_true {
+    background-color: var(--seed-color-bg-transparent-pressed)
+}
+.seed-quantity-picker__incrementButton--pressed_true {
+    background-color: var(--seed-color-bg-transparent-pressed)
+}
+.seed-quantity-picker__decrementButton--loading_true {
+    background-color: var(--seed-color-bg-transparent-pressed)
+}
+.seed-quantity-picker__incrementButton--loading_true {
+    background-color: var(--seed-color-bg-transparent-pressed)
+}
+.seed-quantity-picker__decrementButton--disabled_false-loading_false:active {
+    background-color: var(--seed-color-bg-transparent-pressed)
+}
+.seed-quantity-picker__incrementButton--disabled_false-loading_false:active {
+    background-color: var(--seed-color-bg-transparent-pressed)
+}

package/recipes/quantity-picker.d.ts

@@ -0,0 +1,44 @@
+declare interface QuantityPickerVariant {
+  /**
+  * @default "hug"
+  */
+  layout: "hug" | "fill";
+/**
+  * @default "medium"
+  */
+  size: "small" | "medium" | "large";
+/**
+  * @default false
+  */
+  invalid: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+/**
+  * @default false
+  */
+  pressed: boolean;
+/**
+  * @default false
+  */
+  loading: boolean;
+}
+
+declare type QuantityPickerVariantMap = {
+  [key in keyof QuantityPickerVariant]: Array<QuantityPickerVariant[key]>;
+};
+
+export declare type QuantityPickerVariantProps = Partial<QuantityPickerVariant>;
+
+export declare type QuantityPickerSlotName = "root" | "decrementButton" | "decrementIcon" | "valueDisplay" | "valueDisplayPlaceholder" | "valueDisplayText" | "divider" | "incrementButton" | "incrementIcon";
+
+export declare const quantityPickerVariantMap: QuantityPickerVariantMap;
+
+export declare const quantityPicker: ((
+  props?: QuantityPickerVariantProps,
+) => Record<QuantityPickerSlotName, string>) & {
+  splitVariantProps: <T extends QuantityPickerVariantProps>(
+    props: T,
+  ) => [QuantityPickerVariantProps, Omit<T, keyof QuantityPickerVariantProps>];
+}

package/recipes/quantity-picker.mjs

@@ -0,0 +1,102 @@
+import './quantity-picker.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const quantityPickerSlotNames = [
+  [
+    "root",
+    "seed-quantity-picker__root"
+  ],
+  [
+    "decrementButton",
+    "seed-quantity-picker__decrementButton"
+  ],
+  [
+    "decrementIcon",
+    "seed-quantity-picker__decrementIcon"
+  ],
+  [
+    "valueDisplay",
+    "seed-quantity-picker__valueDisplay"
+  ],
+  [
+    "valueDisplayPlaceholder",
+    "seed-quantity-picker__valueDisplayPlaceholder"
+  ],
+  [
+    "valueDisplayText",
+    "seed-quantity-picker__valueDisplayText"
+  ],
+  [
+    "divider",
+    "seed-quantity-picker__divider"
+  ],
+  [
+    "incrementButton",
+    "seed-quantity-picker__incrementButton"
+  ],
+  [
+    "incrementIcon",
+    "seed-quantity-picker__incrementIcon"
+  ]
+];
+
+const defaultVariant = {
+  "layout": "hug",
+  "size": "medium",
+  "invalid": false,
+  "disabled": false,
+  "pressed": false,
+  "loading": false
+};
+
+const compoundVariants = [
+  {
+    "disabled": false,
+    "loading": false
+  }
+];
+
+export const quantityPickerVariantMap = {
+  "layout": [
+    "hug",
+    "fill"
+  ],
+  "size": [
+    "small",
+    "medium",
+    "large"
+  ],
+  "invalid": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ],
+  "pressed": [
+    true,
+    false
+  ],
+  "loading": [
+    true,
+    false
+  ]
+};
+
+export const quantityPickerVariantKeys = Object.keys(quantityPickerVariantMap);
+
+export function quantityPicker(props) {
+  return Object.fromEntries(
+    quantityPickerSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(quantityPicker, { splitVariantProps: (props) => splitVariantProps(props, quantityPickerVariantMap) });
+
+// @recipe(seed): quantity-picker

package/recipes/reaction-button.css

@@ -7,10 +7,9 @@
     flex-shrink: 0;
     background: var(--seed-color-bg-transparent);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
-    transform: scale(1);
     --track-color: var(--seed-color-palette-gray-500);
     --range-color: var(--seed-color-fg-neutral);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing)
 }
 .seed-reaction-button__content {
     display: flex;
@@ -119,23 +118,19 @@
     color: var(--seed-color-fg-disabled)
 }
 .seed-reaction-button__root--loading_true {
-    background: var(--seed-color-bg-neutral-weak-pressed);
-    transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
+    background: var(--seed-color-bg-neutral-weak-pressed)
 }
 .seed-reaction-button__content--loading_true {
     opacity: 0
 }
-.seed-reaction-button__root--selected_true-pressed_true {
+.seed-reaction-button__root--selected_true-pressed_true-disabled_false-loading_false {
     background: var(--seed-color-bg-transparent-pressed)
 }
-.seed-reaction-button__root--size_xsmall-pressed_true {
-    transform: scale(var(--seed-scale-s95))
-}
-.seed-reaction-button__root--size_small-pressed_true {
-    transform: scale(var(--seed-scale-s97))
+.seed-reaction-button__root--selected_false-disabled_false-loading_false:active {
+    background: var(--seed-color-bg-transparent-pressed)
 }
-.seed-reaction-button__root--selected_true-pressed_false-loading_false {
-    transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
+.seed-reaction-button__root--selected_true-disabled_false-loading_false:active {
+    background: var(--seed-color-bg-transparent-pressed)
 }
 .seed-reaction-button__root--selected_true-loading_true {
     background: var(--seed-color-bg-transparent-pressed);

package/recipes/reaction-button.mjs

@@ -39,19 +39,18 @@ const defaultVariant = {
 const compoundVariants = [
   {
     "selected": true,
-    "pressed": true
-  },
-  {
-    "size": "xsmall",
-    "pressed": true
+    "pressed": true,
+    "disabled": false,
+    "loading": false
   },
   {
-    "size": "small",
-    "pressed": true
+    "selected": false,
+    "disabled": false,
+    "loading": false
   },
   {
     "selected": true,
-    "pressed": false,
+    "disabled": false,
     "loading": false
   },
   {

package/recipes/scroll-fog.css

@@ -0,0 +1,66 @@
+.seed-scroll-fog__root {}
+.seed-scroll-fog__topMask {
+    width: 100%;
+    height: 100%;
+    mask-image: linear-gradient(#000000ff, #000000ff);
+    mask-position: top left;
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+    pointer-events: none
+}
+.seed-scroll-fog__bottomMask {
+    width: 100%;
+    height: 100%;
+    mask-image: linear-gradient(#000000ff, #000000ff);
+    mask-position: top left;
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+    pointer-events: none
+}
+.seed-scroll-fog__leftMask {
+    width: 100%;
+    height: 100%;
+    mask-image: linear-gradient(#000000ff, #000000ff);
+    mask-position: top left;
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+    pointer-events: none
+}
+.seed-scroll-fog__rightMask {
+    width: 100%;
+    height: 100%;
+    mask-image: linear-gradient(#000000ff, #000000ff);
+    mask-position: top left;
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+    pointer-events: none
+}
+.seed-scroll-fog__verticalScroll {
+    width: 100%;
+    height: 100%;
+    pointer-events: auto
+}
+.seed-scroll-fog__horizontalScroll {
+    width: 100%;
+    pointer-events: auto
+}
+.seed-scroll-fog__topMask--top_true {
+    mask-image: linear-gradient(to bottom, #00000000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #00000066 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000000ff 100%), linear-gradient(#000000ff, #000000ff);
+    mask-position: top, bottom;
+    mask-size: 100% var(--scroll-fog-size-top), 100% calc(100% - var(--scroll-fog-size-top))
+}
+.seed-scroll-fog__bottomMask--bottom_true {
+    mask-image: linear-gradient(to top, #00000000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #00000066 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000000ff 100%), linear-gradient(#000000ff, #000000ff);
+    mask-position: bottom, top;
+    mask-size: 100% var(--scroll-fog-size-bottom), 100% calc(100% - var(--scroll-fog-size-bottom))
+}
+.seed-scroll-fog__leftMask--left_true {
+    mask-image: linear-gradient(to right, #00000000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #00000066 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000000ff 100%), linear-gradient(#000000ff, #000000ff);
+    mask-position: left, right;
+    mask-size: var(--scroll-fog-size-left) 100%, calc(100% - var(--scroll-fog-size-left)) 100%
+}
+.seed-scroll-fog__rightMask--right_true {
+    mask-image: linear-gradient(to left, #00000000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #00000066 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000000ff 100%), linear-gradient(#000000ff, #000000ff);
+    mask-position: right, left;
+    mask-size: var(--scroll-fog-size-right) 100%, calc(100% - var(--scroll-fog-size-right)) 100%
+}

package/recipes/scroll-fog.d.ts

@@ -0,0 +1,36 @@
+declare interface ScrollFogVariant {
+  /**
+  * @default false
+  */
+  top: boolean;
+/**
+  * @default false
+  */
+  bottom: boolean;
+/**
+  * @default false
+  */
+  left: boolean;
+/**
+  * @default false
+  */
+  right: boolean;
+}
+
+declare type ScrollFogVariantMap = {
+  [key in keyof ScrollFogVariant]: Array<ScrollFogVariant[key]>;
+};
+
+export declare type ScrollFogVariantProps = Partial<ScrollFogVariant>;
+
+export declare type ScrollFogSlotName = "root" | "topMask" | "bottomMask" | "leftMask" | "rightMask" | "verticalScroll" | "horizontalScroll";
+
+export declare const scrollFogVariantMap: ScrollFogVariantMap;
+
+export declare const scrollFog: ((
+  props?: ScrollFogVariantProps,
+) => Record<ScrollFogSlotName, string>) & {
+  splitVariantProps: <T extends ScrollFogVariantProps>(
+    props: T,
+  ) => [ScrollFogVariantProps, Omit<T, keyof ScrollFogVariantProps>];
+}