@pathscale/ui 2.7.2 → 2.7.4

package/dist/components/chip/Chip.css

@@ -21,7 +21,11 @@
     --chip-flat-bg: color-mix(in oklab, var(--color-default) 18%, transparent);
     --chip-flat-fg: var(--color-default-foreground);
     --chip-bordered-fg: var(--color-default-foreground);
-    --chip-bordered-border: color-mix(in oklab, var(--color-default) 44%, transparent);
+    --chip-bordered-border: color-mix(
+      in oklab,
+      var(--color-default) 44%,
+      transparent
+    );
 
     background-color: var(--chip-bg);
     color: var(--chip-fg);
@@ -72,12 +76,6 @@
     --chip-border: var(--chip-bordered-border);
   }
 
-
-
-
-
-
-
   .chip__label {
     padding-inline: 0.125rem;
   }
@@ -153,7 +151,11 @@
     --chip-flat-bg: color-mix(in oklab, var(--color-default) 18%, transparent);
     --chip-flat-fg: var(--color-default-foreground);
     --chip-bordered-fg: var(--color-default-foreground);
-    --chip-bordered-border: color-mix(in oklab, var(--color-default) 44%, transparent);
+    --chip-bordered-border: color-mix(
+      in oklab,
+      var(--color-default) 44%,
+      transparent
+    );
   }
 
   .chip--flavor-primary {
@@ -162,16 +164,33 @@
     --chip-flat-bg: color-mix(in oklab, var(--color-primary) 18%, transparent);
     --chip-flat-fg: var(--color-primary);
     --chip-bordered-fg: var(--color-primary);
-    --chip-bordered-border: color-mix(in oklab, var(--color-primary) 50%, transparent);
+    --chip-bordered-border: color-mix(
+      in oklab,
+      var(--color-primary) 50%,
+      transparent
+    );
   }
 
   .chip--flavor-secondary {
     --chip-solid-bg: var(--color-secondary);
-    --chip-solid-fg: var(--color-secondary-content, var(--color-secondary-foreground));
-    --chip-flat-bg: var(--color-secondary-soft, color-mix(in oklab, var(--color-secondary) 18%, transparent));
-    --chip-flat-fg: var(--color-secondary-soft-foreground, var(--color-secondary));
+    --chip-solid-fg: var(
+      --color-secondary-content,
+      var(--color-secondary-foreground)
+    );
+    --chip-flat-bg: var(
+      --color-secondary-soft,
+      color-mix(in oklab, var(--color-secondary) 18%, transparent)
+    );
+    --chip-flat-fg: var(
+      --color-secondary-soft-foreground,
+      var(--color-secondary)
+    );
     --chip-bordered-fg: var(--color-secondary);
-    --chip-bordered-border: color-mix(in oklab, var(--color-secondary) 52%, transparent);
+    --chip-bordered-border: color-mix(
+      in oklab,
+      var(--color-secondary) 52%,
+      transparent
+    );
   }
 
   .chip--flavor-accent {
@@ -180,7 +199,11 @@
     --chip-flat-bg: var(--color-accent-soft);
     --chip-flat-fg: var(--color-accent-soft-foreground);
     --chip-bordered-fg: var(--color-accent);
-    --chip-bordered-border: color-mix(in oklab, var(--color-accent) 52%, transparent);
+    --chip-bordered-border: color-mix(
+      in oklab,
+      var(--color-accent) 52%,
+      transparent
+    );
   }
 
   .chip--flavor-destructive {
@@ -189,7 +212,11 @@
     --chip-flat-bg: var(--color-danger-soft);
     --chip-flat-fg: var(--color-danger-soft-foreground);
     --chip-bordered-fg: var(--color-danger);
-    --chip-bordered-border: color-mix(in oklab, var(--color-danger) 52%, transparent);
+    --chip-bordered-border: color-mix(
+      in oklab,
+      var(--color-danger) 52%,
+      transparent
+    );
   }
 
   .chip--flavor-success {
@@ -198,7 +225,11 @@
     --chip-flat-bg: var(--color-success-soft);
     --chip-flat-fg: var(--color-success-soft-foreground);
     --chip-bordered-fg: var(--color-success);
-    --chip-bordered-border: color-mix(in oklab, var(--color-success) 52%, transparent);
+    --chip-bordered-border: color-mix(
+      in oklab,
+      var(--color-success) 52%,
+      transparent
+    );
   }
 
   .chip--flavor-warning {
@@ -207,15 +238,26 @@
     --chip-flat-bg: var(--color-warning-soft);
     --chip-flat-fg: var(--color-warning-soft-foreground);
     --chip-bordered-fg: var(--color-warning);
-    --chip-bordered-border: color-mix(in oklab, var(--color-warning) 52%, transparent);
+    --chip-bordered-border: color-mix(
+      in oklab,
+      var(--color-warning) 52%,
+      transparent
+    );
   }
 
   .chip--flavor-info {
     --chip-solid-bg: var(--color-info);
     --chip-solid-fg: var(--color-info-content, var(--color-info-foreground));
-    --chip-flat-bg: var(--color-info-soft, color-mix(in oklab, var(--color-info) 18%, transparent));
+    --chip-flat-bg: var(
+      --color-info-soft,
+      color-mix(in oklab, var(--color-info) 18%, transparent)
+    );
     --chip-flat-fg: var(--color-info-soft-foreground, var(--color-info));
     --chip-bordered-fg: var(--color-info);
-    --chip-bordered-border: color-mix(in oklab, var(--color-info) 52%, transparent);
+    --chip-bordered-border: color-mix(
+      in oklab,
+      var(--color-info) 52%,
+      transparent
+    );
   }
 }

package/dist/components/chip/index.d.ts

@@ -4,5 +4,5 @@ declare const Chip: import("solid-js").Component<import("./Chip.generated").Chip
     Label: import("solid-js").Component<import("./Chip.generated").ChipLabelProps>;
 };
 export default Chip;
-export { Chip, ChipRoot, ChipLabel };
-export type { ChipRootProps, ChipRootProps as ChipProps, ChipLabelProps, ChipVariant, ChipColor, ChipSize, } from "./Chip.generated";
+export type { ChipColor, ChipLabelProps, ChipRootProps, ChipRootProps as ChipProps, ChipSize, ChipVariant, } from "./Chip.generated";
+export { Chip, ChipLabel, ChipRoot };

package/dist/components/close-button/CloseButton.css

@@ -26,7 +26,11 @@
     --close-button-bg: var(--color-base-100);
     --close-button-bg-hover: var(--color-base-200);
     --close-button-bg-pressed: var(--color-base-300);
-    --close-button-fg: color-mix(in oklab, var(--color-base-content) 58%, transparent);
+    --close-button-fg: color-mix(
+      in oklab,
+      var(--color-base-content) 58%,
+      transparent
+    );
 
     background-color: var(--close-button-bg);
     color: var(--close-button-fg);

package/dist/components/close-button/index.d.ts

@@ -1 +1 @@
-export { default, type CloseButtonProps, type CloseButtonVariant } from "./CloseButton.generated";
+export { type CloseButtonProps, type CloseButtonVariant, default, } from "./CloseButton.generated";

package/dist/components/collapsible/index.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "solid-js";
-import Collapsible, { CollapsibleRoot, CollapsibleHeading, CollapsibleTrigger, CollapsibleContent, CollapsibleBody, CollapsibleIndicator } from "./Collapsible.generated";
+import Collapsible, { CollapsibleBody, CollapsibleContent, CollapsibleHeading, CollapsibleIndicator, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.generated";
 export type CollapsibleProps = ComponentProps<typeof CollapsibleRoot>;
 export type CollapsibleRootProps = ComponentProps<typeof CollapsibleRoot>;
 export type CollapsibleHeadingProps = ComponentProps<typeof CollapsibleHeading>;
@@ -7,5 +7,5 @@ export type CollapsibleTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
 export type CollapsibleContentProps = ComponentProps<typeof CollapsibleContent>;
 export type CollapsibleBodyProps = ComponentProps<typeof CollapsibleBody>;
 export type CollapsibleIndicatorProps = ComponentProps<typeof CollapsibleIndicator>;
-export { CollapsibleRoot, CollapsibleHeading, CollapsibleTrigger, CollapsibleContent, CollapsibleBody, CollapsibleIndicator, };
+export { CollapsibleBody, CollapsibleContent, CollapsibleHeading, CollapsibleIndicator, CollapsibleRoot, CollapsibleTrigger, };
 export default Collapsible;

package/dist/components/color-field/ColorField.css

@@ -36,13 +36,18 @@
   @media (hover: hover) {
     .color-field__group:hover:not(:focus-within):not([data-disabled="true"]) {
       background-color: var(--color-base-200);
-      border-color: color-mix(in oklab, var(--color-base-content) 22%, transparent);
+      border-color: color-mix(
+        in oklab,
+        var(--color-base-content) 22%,
+        transparent
+      );
     }
   }
 
   .color-field__group:focus-within {
     border-color: var(--color-accent);
-    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 24%, transparent);
+    box-shadow: 0 0 0 3px
+      color-mix(in oklab, var(--color-accent) 24%, transparent);
   }
 
   .color-field__group--invalid,
@@ -53,7 +58,8 @@
 
   .color-field__group--invalid:focus-within,
   .color-field__group[data-invalid="true"]:focus-within {
-    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-error) 24%, transparent);
+    box-shadow: 0 0 0 3px
+      color-mix(in oklab, var(--color-error) 24%, transparent);
   }
 
   .color-field__group[data-disabled="true"] {
@@ -73,7 +79,9 @@
     color: inherit;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
     padding-inline: 0.75rem;
     outline: none;
   }

package/dist/components/color-field/index.d.ts

@@ -1,3 +1,3 @@
 import ColorField from "./ColorField.generated";
-export type { ColorFieldProps, ColorFieldFormat } from "./ColorField.generated";
+export type { ColorFieldFormat, ColorFieldProps } from "./ColorField.generated";
 export default ColorField;

package/dist/components/color-picker/index.d.ts

@@ -1,2 +1,2 @@
-export { default, ColorPicker, ColorPickerRoot, ColorPickerArea, ColorPickerSlider, ColorPickerField, } from "./ColorPicker.generated";
-export type { ColorPickerProps, ColorPickerAreaProps, ColorPickerSliderProps, ColorPickerFieldProps, } from "./ColorPicker.generated";
+export type { ColorPickerAreaProps, ColorPickerFieldProps, ColorPickerProps, ColorPickerSliderProps, } from "./ColorPicker.generated";
+export { ColorPicker, ColorPickerArea, ColorPickerField, ColorPickerRoot, ColorPickerSlider, default, } from "./ColorPicker.generated";

package/dist/components/color-slider/ColorSlider.css

@@ -52,6 +52,7 @@
 
   .color-slider:focus-visible,
   .color-slider[data-focus-visible="true"] {
-    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent);
+    box-shadow: 0 0 0 3px
+      color-mix(in oklab, var(--color-accent) 22%, transparent);
   }
 }

package/dist/components/color-slider/index.d.ts

@@ -1,3 +1,3 @@
 import ColorSlider from "./ColorSlider.generated";
-export type { ColorSliderProps, ColorSliderType } from "./ColorSlider.generated";
+export type { ColorSliderProps, ColorSliderType, } from "./ColorSlider.generated";
 export default ColorSlider;

package/dist/components/color-swatch/index.d.ts

@@ -1,3 +1,3 @@
 import ColorSwatch from "./ColorSwatch.generated";
-export type { ColorSwatchProps, ColorSwatchShape, ColorSwatchSize } from "./ColorSwatch.generated";
+export type { ColorSwatchProps, ColorSwatchShape, ColorSwatchSize, } from "./ColorSwatch.generated";
 export default ColorSwatch;

package/dist/components/color-swatch-picker/index.d.ts

@@ -1,3 +1,2 @@
-export { default, ColorSwatchPicker } from "./ColorSwatchPicker.generated";
-export type { ColorSwatchPickerProps, ColorSwatchPickerContextValue } from "./ColorSwatchPicker.generated";
-export { ColorSwatchPickerContext } from "./ColorSwatchPicker.generated";
+export type { ColorSwatchPickerContextValue, ColorSwatchPickerProps, } from "./ColorSwatchPicker.generated";
+export { ColorSwatchPicker, ColorSwatchPickerContext, default, } from "./ColorSwatchPicker.generated";

package/dist/components/color-wheel-flower/ColorWheelFlower.css

@@ -97,7 +97,9 @@
     background: var(--color-swatch-current) !important;
     transform: none !important;
     box-shadow: 0 2px 8px rgb(var(--shadow-color, 0 0 0) / 25%) !important;
-    transition: box-shadow 200ms ease-out, opacity 140ms ease-out !important;
+    transition:
+      box-shadow 200ms ease-out,
+      opacity 140ms ease-out !important;
   }
 
   .color-wheel-flower__swatch:hover:not([data-disabled="true"]) {
@@ -132,7 +134,9 @@
     mix-blend-mode: overlay;
     pointer-events: none;
     opacity: 0;
-    transition: opacity 300ms ease-out, box-shadow 300ms ease-out;
+    transition:
+      opacity 300ms ease-out,
+      box-shadow 300ms ease-out;
   }
 
   .color-wheel-flower__highlight--hovered {

package/dist/components/color-wheel-flower/colorWheelFlowerContext.d.ts

@@ -1,5 +1,5 @@
 import { type Accessor } from "solid-js";
-import type { ColorValue, ColorFormat } from "./ColorUtils";
+import type { ColorFormat, ColorValue } from "./ColorUtils";
 export interface ColorPickerContextType {
     color: Accessor<ColorValue>;
     format: Accessor<ColorFormat>;

package/dist/components/color-wheel-flower/index.d.ts

@@ -1,7 +1,7 @@
-export { default as ColorWheelFlower } from "./ColorWheelFlower.generated";
+export type { ColorFormat, ColorValue, HSL, HSLA, RGB, RGBA, } from "./ColorUtils";
 export type { ColorWheelFlowerProps } from "./ColorWheelFlower.generated";
-export { COLOR_WHEEL_FLOWER_COLOR_COUNT, COLOR_WHEEL_FLOWER_PALETTES, resolveColorWheelFlowerPalette, } from "./ColorWheelFlower.palette";
+export { default as ColorWheelFlower } from "./ColorWheelFlower.generated";
 export type { ColorWheelFlowerMode } from "./ColorWheelFlower.palette";
-export { ColorPickerContext, useColorPickerContext, } from "./colorWheelFlowerContext";
+export { COLOR_WHEEL_FLOWER_COLOR_COUNT, COLOR_WHEEL_FLOWER_PALETTES, resolveColorWheelFlowerPalette, } from "./ColorWheelFlower.palette";
 export type { ColorPickerContextType } from "./colorWheelFlowerContext";
-export type { ColorFormat, ColorValue, RGB, RGBA, HSL, HSLA, } from "./ColorUtils";
+export { ColorPickerContext, useColorPickerContext, } from "./colorWheelFlowerContext";

package/dist/components/combo-box/ComboBox.css

@@ -3,12 +3,27 @@
     --combobox-bg: var(--color-field, var(--color-base-100));
     --combobox-bg-hover: var(--color-field-hover, var(--color-base-200));
     --combobox-bg-focus: var(--color-field-focus, var(--color-base-100));
-    --combobox-border: var(--color-field-border, color-mix(in oklab, var(--color-base-content) 16%, transparent));
-    --combobox-border-hover: var(--color-field-border-hover, color-mix(in oklab, var(--color-base-content) 22%, transparent));
-    --combobox-border-focus: var(--color-field-border-focus, var(--color-accent));
-    --combobox-border-invalid: var(--color-field-border-invalid, var(--color-danger));
+    --combobox-border: var(
+      --color-field-border,
+      color-mix(in oklab, var(--color-base-content) 16%, transparent)
+    );
+    --combobox-border-hover: var(
+      --color-field-border-hover,
+      color-mix(in oklab, var(--color-base-content) 22%, transparent)
+    );
+    --combobox-border-focus: var(
+      --color-field-border-focus,
+      var(--color-accent)
+    );
+    --combobox-border-invalid: var(
+      --color-field-border-invalid,
+      var(--color-danger)
+    );
     --combobox-fg: var(--color-field-foreground, var(--color-base-content));
-    --combobox-placeholder: var(--color-field-placeholder, color-mix(in oklab, var(--color-base-content) 45%, transparent));
+    --combobox-placeholder: var(
+      --color-field-placeholder,
+      color-mix(in oklab, var(--color-base-content) 45%, transparent)
+    );
 
     position: relative;
     display: flex;
@@ -66,7 +81,9 @@
   }
 
   @media (hover: hover) {
-    .combo-box__input-group:hover:not(:focus-within):not([data-disabled="true"]):not([data-invalid="true"]) {
+    .combo-box__input-group:hover:not(:focus-within):not(
+        [data-disabled="true"]
+      ):not([data-invalid="true"]) {
       background-color: var(--combobox-bg-hover);
       border-color: var(--combobox-border-hover);
     }
@@ -202,7 +219,8 @@
     overflow-y: auto;
     overscroll-behavior: contain;
     border-radius: 1.5rem;
-    border: var(--border, 1px) solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
+    border: var(--border, 1px) solid
+      color-mix(in oklch, var(--color-base-content) 8%, transparent);
     background-color: var(--color-base-100);
     box-shadow:
       0 20px 32px rgb(var(--shadow-color, 0 0 0) / 16%),
@@ -316,9 +334,10 @@
   }
 
   @media (hover: hover) {
-    .combo-box--secondary .combo-box__input-group:hover:not(:focus-within):not([data-disabled="true"]):not(
-        [data-invalid="true"]
-      ) {
+    .combo-box--secondary
+      .combo-box__input-group:hover:not(:focus-within):not(
+        [data-disabled="true"]
+      ):not([data-invalid="true"]) {
       background-color: var(--color-base-300);
     }
   }

package/dist/components/combo-box/index.d.ts

@@ -1 +1 @@
-export { default, ComboBox, ComboBoxRoot, ComboBoxInputGroup, ComboBoxInput, ComboBoxTrigger, ComboBoxPopover, ComboBoxList, type ComboBoxProps, type ComboBoxRootProps, type ComboBoxInputGroupProps, type ComboBoxInputProps, type ComboBoxTriggerProps, type ComboBoxPopoverProps, type ComboBoxListProps, type ComboBoxListRenderItem, type ComboBoxVariant, type ComboBoxMenuTrigger, type ComboBoxItem, type ComboBoxKey, } from "./ComboBox.generated";
+export { ComboBox, ComboBoxInput, ComboBoxInputGroup, type ComboBoxInputGroupProps, type ComboBoxInputProps, type ComboBoxItem, type ComboBoxKey, ComboBoxList, type ComboBoxListProps, type ComboBoxListRenderItem, type ComboBoxMenuTrigger, ComboBoxPopover, type ComboBoxPopoverProps, type ComboBoxProps, ComboBoxRoot, type ComboBoxRootProps, ComboBoxTrigger, type ComboBoxTriggerProps, type ComboBoxVariant, default, } from "./ComboBox.generated";

package/dist/components/composer/Composer.css

@@ -9,17 +9,41 @@
     border: var(--border, 1px) solid var(--color-base-300);
   }
 
-  .composer--solid { background: var(--color-base-200); border-color: transparent; }
-  .composer--soft { background: var(--color-base-200); }
-  .composer--outline { background: transparent; }
-  .composer--ghost { background: transparent; border-color: transparent; }
-  .composer--plain { background: none; border: 0; padding: 0; }
-
-  .composer--radius-none { border-radius: 0; }
-  .composer--radius-sm { border-radius: var(--radius-field, 0.25rem); }
-  .composer--radius-md { border-radius: 0.5rem; }
-  .composer--radius-lg { border-radius: 0.75rem; }
-  .composer--radius-full { border-radius: 1.5rem; }
+  .composer--solid {
+    background: var(--color-base-200);
+    border-color: transparent;
+  }
+  .composer--soft {
+    background: var(--color-base-200);
+  }
+  .composer--outline {
+    background: transparent;
+  }
+  .composer--ghost {
+    background: transparent;
+    border-color: transparent;
+  }
+  .composer--plain {
+    background: none;
+    border: 0;
+    padding: 0;
+  }
+
+  .composer--radius-none {
+    border-radius: 0;
+  }
+  .composer--radius-sm {
+    border-radius: var(--radius-field, 0.25rem);
+  }
+  .composer--radius-md {
+    border-radius: 0.5rem;
+  }
+  .composer--radius-lg {
+    border-radius: 0.75rem;
+  }
+  .composer--radius-full {
+    border-radius: 1.5rem;
+  }
 
   .composer:focus-within {
     border-color: var(--color-primary);
@@ -84,26 +108,46 @@
     font-size: 0.8125rem;
   }
 
-  .composer__issues [data-severity="error"] { color: var(--color-error); }
-  .composer__issues [data-severity="warning"] { color: var(--color-warning); }
+  .composer__issues [data-severity="error"] {
+    color: var(--color-error);
+  }
+  .composer__issues [data-severity="warning"] {
+    color: var(--color-warning);
+  }
 
-  .composer--xs { font-size: 0.75rem; }
-  .composer--sm { font-size: 0.8125rem; }
-  .composer--md { font-size: 0.875rem; }
-  .composer--lg { font-size: 1rem; }
-  .composer--xl { font-size: 1.125rem; }
+  .composer--xs {
+    font-size: 0.75rem;
+  }
+  .composer--sm {
+    font-size: 0.8125rem;
+  }
+  .composer--md {
+    font-size: 0.875rem;
+  }
+  .composer--lg {
+    font-size: 1rem;
+  }
+  .composer--xl {
+    font-size: 1.125rem;
+  }
 
   /* Sending keeps the text readable: a greyed-out box during a send reads as
      "your message was lost" to anyone who looks away and back. */
-  .composer--loading .composer__field { opacity: 0.85; }
+  .composer--loading .composer__field {
+    opacity: 0.85;
+  }
 
   .composer--error,
-  .composer--invalid { border-color: var(--color-error); }
+  .composer--invalid {
+    border-color: var(--color-error);
+  }
 
   .composer--disabled {
     opacity: 0.5;
     pointer-events: none;
   }
 
-  .composer--hidden { display: none; }
+  .composer--hidden {
+    display: none;
+  }
 }

package/dist/components/composer/index.d.ts

@@ -1,5 +1,5 @@
-export { ComposerLayout as default, ComposerLayout as Composer } from "./Composer.generated";
 export type { ComposerProps } from "./Composer.generated";
-export { composer } from "./Composer.recipe";
-export { autosize, boundsFromRows, isSubmittable, newAutosizeMemo, shouldSubmit, viewportHeight, ROW_HEIGHT, } from "./Composer.interactions";
+export { ComposerLayout as default, ComposerLayout as Composer, } from "./Composer.generated";
 export type { AutosizeBounds, AutosizeField, AutosizeMemo, SubmitKey, } from "./Composer.interactions";
+export { autosize, boundsFromRows, isSubmittable, newAutosizeMemo, ROW_HEIGHT, shouldSubmit, viewportHeight, } from "./Composer.interactions";
+export { composer } from "./Composer.recipe";

package/dist/components/composer/index.js

@@ -1,3 +1,3 @@
 export { ComposerLayout as Composer, ComposerLayout as default } from "./Composer.generated.js";
-export { composer } from "./Composer.recipe.js";
 export { ROW_HEIGHT, autosize, boundsFromRows, isSubmittable, newAutosizeMemo, shouldSubmit, viewportHeight } from "./Composer.interactions.js";
+export { composer } from "./Composer.recipe.js";

package/dist/components/data-grid/createDataGrid.d.ts

@@ -1,5 +1,5 @@
-import { type Accessor } from "solid-js";
 import type { JSX } from "@solidjs/web";
+import { type Accessor } from "solid-js";
 /**
  * The imperative grid model.
  *

package/dist/components/data-grid/index.d.ts

@@ -2,7 +2,7 @@ export type { CreateDataGridOptions, DataGridCellContext, DataGridColumn, DataGr
 export { createDataGrid } from "./createDataGrid";
 export type { DataGridBorders, DataGridProps, DataGridSticky, DataGridStriping, } from "./DataGrid.generated";
 import type { JSX } from "@solidjs/web";
-import type { DataGridProps as Props } from "./DataGrid.generated";
 import type { DataGridRow as Row } from "./createDataGrid";
+import type { DataGridProps as Props } from "./DataGrid.generated";
 declare const DataGrid: <R extends Row = Row>(props: Props<R>) => JSX.Element;
 export default DataGrid;

package/dist/components/date-field/DateField.css

@@ -29,7 +29,10 @@
     overflow: hidden;
     border-radius: var(--radius-field, 0.75rem);
     border: var(--border-width-field, 1px) solid
-      var(--color-field-border, color-mix(in oklab, var(--color-base-content) 16%, transparent));
+      var(
+        --color-field-border,
+        color-mix(in oklab, var(--color-base-content) 16%, transparent)
+      );
     background-color: var(--color-field, var(--color-base-100));
     color: var(--color-field-foreground, var(--color-base-content));
     box-shadow:
@@ -51,7 +54,10 @@
   @media (hover: hover) {
     .date-input-group:hover:not(:focus-within):not([data-disabled="true"]) {
       background-color: var(--color-field-hover, var(--color-base-200));
-      border-color: var(--color-field-border-hover, color-mix(in oklab, var(--color-base-content) 22%, transparent));
+      border-color: var(
+        --color-field-border-hover,
+        color-mix(in oklab, var(--color-base-content) 22%, transparent)
+      );
     }
   }
 
@@ -101,11 +107,13 @@
     cursor: pointer;
   }
 
-  .date-input-group:has([data-slot="date-input-group-prefix"]) .date-input-group__input {
+  .date-input-group:has([data-slot="date-input-group-prefix"])
+    .date-input-group__input {
     padding-inline-start: 0.5rem;
   }
 
-  .date-input-group:has([data-slot="date-input-group-suffix"]) .date-input-group__input {
+  .date-input-group:has([data-slot="date-input-group-suffix"])
+    .date-input-group__input {
     padding-inline-end: 0.5rem;
   }
 
@@ -139,11 +147,17 @@
 
   .date-input-group__segment[data-type="literal"] {
     padding-inline: 0;
-    color: var(--color-muted, color-mix(in oklab, var(--color-base-content) 55%, transparent));
+    color: var(
+      --color-muted,
+      color-mix(in oklab, var(--color-base-content) 55%, transparent)
+    );
   }
 
   .date-input-group__segment[data-placeholder="true"] {
-    color: var(--color-field-placeholder, color-mix(in oklab, var(--color-base-content) 45%, transparent));
+    color: var(
+      --color-field-placeholder,
+      color-mix(in oklab, var(--color-base-content) 45%, transparent)
+    );
   }
 
   .date-input-group__segment:focus,
@@ -172,7 +186,10 @@
     margin-inline-start: 0.75rem;
     margin-inline-end: 0;
     flex-shrink: 0;
-    color: var(--color-field-placeholder, color-mix(in oklab, var(--color-base-content) 45%, transparent));
+    color: var(
+      --color-field-placeholder,
+      color-mix(in oklab, var(--color-base-content) 45%, transparent)
+    );
     pointer-events: none;
   }
 
@@ -181,7 +198,10 @@
     align-items: center;
     margin-inline-end: 0.75rem;
     flex-shrink: 0;
-    color: var(--color-field-placeholder, color-mix(in oklab, var(--color-base-content) 45%, transparent));
+    color: var(
+      --color-field-placeholder,
+      color-mix(in oklab, var(--color-base-content) 45%, transparent)
+    );
     pointer-events: none;
   }
 
@@ -190,23 +210,37 @@
 
   .date-input-group--secondary {
     box-shadow: none;
-    background-color: var(--date-input-group-bg, var(--color-default, var(--color-base-200)));
+    background-color: var(
+      --date-input-group-bg,
+      var(--color-default, var(--color-base-200))
+    );
   }
 
   @media (hover: hover) {
-    .date-input-group--secondary:hover:not(:focus-within):not([data-disabled="true"]) {
-      background-color: var(--date-input-group-bg-hover, var(--color-default-hover, var(--color-base-300)));
+    .date-input-group--secondary:hover:not(:focus-within):not(
+        [data-disabled="true"]
+      ) {
+      background-color: var(
+        --date-input-group-bg-hover,
+        var(--color-default-hover, var(--color-base-300))
+      );
     }
   }
 
   .date-input-group--secondary:focus-within,
   .date-input-group--secondary[data-focus-within="true"] {
-    background-color: var(--date-input-group-bg-focus, var(--color-default, var(--color-base-200)));
+    background-color: var(
+      --date-input-group-bg-focus,
+      var(--color-default, var(--color-base-200))
+    );
   }
 
   .date-input-group--secondary[data-invalid="true"] {
     border-color: var(--color-field-border-invalid, var(--color-danger));
-    background-color: var(--date-input-group-bg-focus, var(--color-default, var(--color-base-200)));
+    background-color: var(
+      --date-input-group-bg-focus,
+      var(--color-default, var(--color-base-200))
+    );
   }
 
   .date-input-group--full-width {