colibri-ui 0.8.78 → 0.8.81

package/esm/Theme/index.js

@@ -1,6 +1,7 @@
 import { BUTTON_TOKENS } from '../Button/tokens.js';
 import theme_jaipur from './themes/jaipur.js';
 import THEME_BA from './themes/buenos_aires.js';
+export { BREAKPOINTS, media } from './breakpoints.js';
 
 var THEMES = {
   JAIPUR: Object.assign(Object.assign({}, theme_jaipur), BUTTON_TOKENS),

package/esm/Theme/themes/buenos_aires.d.ts

@@ -518,6 +518,36 @@ declare const _default: {
     "component-avatar-font-size-xxxl": string;
     "component-accordion-text": string;
     "component-accordion-line": string;
+    "component-sheet-bg": string;
+    "component-sheet-text": string;
+    "component-sheet-secondary": string;
+    "component-sheet-overlay": string;
+    "component-sheet-radius": string;
+    "component-sheet-shadow": string;
+    "component-sheet-z-index": string;
+    "component-sheet-max-height": string;
+    "component-sheet-overlay-blur": string;
+    "component-sheet-motion-duration": string;
+    "component-sheet-resize-duration": string;
+    "component-sheet-motion-easing": string;
+    "component-sheet-reduced-motion-duration": string;
+    "component-sheet-drag-area-height": string;
+    "component-sheet-handle-width": string;
+    "component-sheet-handle-height": string;
+    "component-sheet-handle-radius": string;
+    "component-sheet-handle-opacity": string;
+    "component-sheet-header-gap": string;
+    "component-sheet-header-padding": string;
+    "component-sheet-border-width": string;
+    "component-sheet-border-color": string;
+    "component-sheet-title-font-size": string;
+    "component-sheet-title-line-height": string;
+    "component-sheet-title-font-weight": string;
+    "component-sheet-description-offset": string;
+    "component-sheet-description-font-size": string;
+    "component-sheet-body-padding": string;
+    "component-sheet-footer-padding-block": string;
+    "component-sheet-footer-padding-inline": string;
     "component-modal-bg": string;
     "component-modal-border": string;
     "component-modal-overlay": string;

package/esm/Theme/themes/buenos_aires.js

@@ -520,6 +520,36 @@ var THEME_BA = {
   "component-avatar-font-size-xxxl": "9rem",
   "component-accordion-text": Color.BRAND_BA_FOREST,
   "component-accordion-line": Color.NEUTRAL_BA_300,
+  "component-sheet-bg": "var(--color-bg-surface)",
+  "component-sheet-text": "var(--color-text-primary)",
+  "component-sheet-secondary": "var(--color-text-secondary)",
+  "component-sheet-overlay": "var(--component-modal-overlay)",
+  "component-sheet-radius": "var(--radius-xl)",
+  "component-sheet-shadow": "var(--shadow-raised)",
+  "component-sheet-z-index": "1000",
+  "component-sheet-max-height": "96dvh",
+  "component-sheet-overlay-blur": "var(--space-3)",
+  "component-sheet-motion-duration": "220ms",
+  "component-sheet-resize-duration": "200ms",
+  "component-sheet-motion-easing": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+  "component-sheet-reduced-motion-duration": "0.001ms",
+  "component-sheet-drag-area-height": "var(--space-6)",
+  "component-sheet-handle-width": "calc(var(--space-10) + var(--space-1))",
+  "component-sheet-handle-height": "var(--space-1)",
+  "component-sheet-handle-radius": "var(--radius-full)",
+  "component-sheet-handle-opacity": "0.45",
+  "component-sheet-header-gap": "var(--space-4)",
+  "component-sheet-header-padding": "var(--space-3) var(--space-5) var(--space-4)",
+  "component-sheet-border-width": "var(--border-width-hairline)",
+  "component-sheet-border-color": "var(--color-border-subtle)",
+  "component-sheet-title-font-size": "var(--font-size-heading-sm)",
+  "component-sheet-title-line-height": "var(--line-height-heading-sm)",
+  "component-sheet-title-font-weight": "var(--font-weight-semibold)",
+  "component-sheet-description-offset": "var(--space-1)",
+  "component-sheet-description-font-size": "var(--font-size-text-sm)",
+  "component-sheet-body-padding": "var(--space-5)",
+  "component-sheet-footer-padding-block": "var(--space-4)",
+  "component-sheet-footer-padding-inline": "var(--space-5)",
   "component-modal-bg": Color.NEUTRAL_BA_0,
   "component-modal-border": Color.NEUTRAL_BA_200,
   "component-modal-overlay": "rgb(22 51 0 / 28%)",

package/esm/Theme/themes/jaipur.d.ts

@@ -518,6 +518,36 @@ declare const _default: {
     "component-avatar-font-size-xxxl": string;
     "component-accordion-text": string;
     "component-accordion-line": string;
+    "component-sheet-bg": string;
+    "component-sheet-text": string;
+    "component-sheet-secondary": string;
+    "component-sheet-overlay": string;
+    "component-sheet-radius": string;
+    "component-sheet-shadow": string;
+    "component-sheet-z-index": string;
+    "component-sheet-max-height": string;
+    "component-sheet-overlay-blur": string;
+    "component-sheet-motion-duration": string;
+    "component-sheet-resize-duration": string;
+    "component-sheet-motion-easing": string;
+    "component-sheet-reduced-motion-duration": string;
+    "component-sheet-drag-area-height": string;
+    "component-sheet-handle-width": string;
+    "component-sheet-handle-height": string;
+    "component-sheet-handle-radius": string;
+    "component-sheet-handle-opacity": string;
+    "component-sheet-header-gap": string;
+    "component-sheet-header-padding": string;
+    "component-sheet-border-width": string;
+    "component-sheet-border-color": string;
+    "component-sheet-title-font-size": string;
+    "component-sheet-title-line-height": string;
+    "component-sheet-title-font-weight": string;
+    "component-sheet-description-offset": string;
+    "component-sheet-description-font-size": string;
+    "component-sheet-body-padding": string;
+    "component-sheet-footer-padding-block": string;
+    "component-sheet-footer-padding-inline": string;
     "component-modal-bg": string;
     "component-modal-border": string;
     "component-modal-overlay": string;

package/esm/Theme/themes/jaipur.js

@@ -520,6 +520,36 @@ var theme_jaipur = {
   "component-avatar-font-size-xxxl": "9rem",
   "component-accordion-text": Color.BRAND_JP_EGGPLANT,
   "component-accordion-line": Color.NEUTRAL_JP_300,
+  "component-sheet-bg": "var(--color-bg-surface)",
+  "component-sheet-text": "var(--color-text-primary)",
+  "component-sheet-secondary": "var(--color-text-secondary)",
+  "component-sheet-overlay": "var(--component-modal-overlay)",
+  "component-sheet-radius": "var(--radius-xl)",
+  "component-sheet-shadow": "var(--shadow-raised)",
+  "component-sheet-z-index": "1000",
+  "component-sheet-max-height": "96dvh",
+  "component-sheet-overlay-blur": "var(--space-3)",
+  "component-sheet-motion-duration": "220ms",
+  "component-sheet-resize-duration": "200ms",
+  "component-sheet-motion-easing": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+  "component-sheet-reduced-motion-duration": "0.001ms",
+  "component-sheet-drag-area-height": "var(--space-6)",
+  "component-sheet-handle-width": "calc(var(--space-10) + var(--space-1))",
+  "component-sheet-handle-height": "var(--space-1)",
+  "component-sheet-handle-radius": "var(--radius-full)",
+  "component-sheet-handle-opacity": "0.45",
+  "component-sheet-header-gap": "var(--space-4)",
+  "component-sheet-header-padding": "var(--space-3) var(--space-5) var(--space-4)",
+  "component-sheet-border-width": "var(--border-width-hairline)",
+  "component-sheet-border-color": "var(--color-border-subtle)",
+  "component-sheet-title-font-size": "var(--font-size-heading-sm)",
+  "component-sheet-title-line-height": "var(--line-height-heading-sm)",
+  "component-sheet-title-font-weight": "var(--font-weight-semibold)",
+  "component-sheet-description-offset": "var(--space-1)",
+  "component-sheet-description-font-size": "var(--font-size-text-sm)",
+  "component-sheet-body-padding": "var(--space-5)",
+  "component-sheet-footer-padding-block": "var(--space-4)",
+  "component-sheet-footer-padding-inline": "var(--space-5)",
   "component-modal-bg": Color.NEUTRAL_JP_0,
   "component-modal-border": Color.NEUTRAL_JP_200,
   "component-modal-overlay": "color-mix(in srgb, var(--palette-black) 25%, transparent)",

package/esm/hooks/useMediaSizes/index.d.ts

@@ -1,5 +1,9 @@
 import type { Media } from "../../Theme/breakpoints";
 export type QueryInputFunction = (breakpoints: Media) => string;
 type QueryInput = QueryInputFunction | string;
+/**
+ * Returns whether the media query matches.
+ * Returns `false` on the server and during hydration, the real value right after.
+ */
 export declare const useMediaSizes: (queryInput: QueryInput) => boolean;
 export {};

package/esm/hooks/useMediaSizes/index.js

@@ -1,38 +1,32 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useEffect } from 'react';
+import { useCallback, useSyncExternalStore } from 'react';
 import { media } from '../../Theme/breakpoints.js';
 
-var supportMatchMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
+var getServerSnapshot = function getServerSnapshot() {
+  return false;
+};
+var getMediaQueryList = function getMediaQueryList(query) {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query) : null;
+};
+/**
+ * Returns whether the media query matches.
+ * Returns `false` on the server and during hydration, the real value right after.
+ */
 var useMediaSizes = function useMediaSizes(queryInput) {
-  var query = typeof queryInput === "function" ? queryInput(media) : queryInput;
-  query = query.replace(/^@media( ?)/m, "");
-  var matchMedia = supportMatchMedia ? window.matchMedia : null;
-  var _useState = useState(function () {
-      if (matchMedia) {
-        return matchMedia(query).matches;
-      }
-      return false;
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    match = _useState2[0],
-    setMatch = _useState2[1];
-  useEffect(function () {
-    if (!matchMedia) return undefined;
-    var active = true;
-    var queryList = matchMedia(query);
-    var updateMatch = function updateMatch() {
-      if (active) {
-        setMatch(queryList.matches);
-      }
-    };
-    updateMatch();
-    queryList.addEventListener("change", updateMatch);
+  // A function input is a new function every render: memoize on the query string.
+  var query = (typeof queryInput === "function" ? queryInput(media) : queryInput).replace(/^\s*@media\s*/, "");
+  var subscribe = useCallback(function (onChange) {
+    var queryList = getMediaQueryList(query);
+    if (!queryList) return function () {};
+    queryList.addEventListener("change", onChange);
     return function () {
-      active = false;
-      queryList.removeEventListener("change", updateMatch);
+      return queryList.removeEventListener("change", onChange);
     };
-  });
-  return match;
+  }, [query]);
+  var getSnapshot = useCallback(function () {
+    var _a, _b;
+    return (_b = (_a = getMediaQueryList(query)) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false;
+  }, [query]);
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 };
 
 export { useMediaSizes };

package/esm/index.d.ts

@@ -64,6 +64,8 @@ export { Select } from "./Select";
 export type { SelectProps } from "./Select/index.props";
 export { Separator } from "./Separator";
 export type { SeparatorProps } from "./Separator/index.props";
+export { Sheet } from "./Sheet";
+export type { SheetProps, SheetSnapPoint, SheetCloseReason } from "./Sheet";
 export { SkeletonRect, SkeletonText } from "./Skeleton";
 export type { RectProps as SkeletonRectProps, TextProps as SkeletonTextProps, } from "./Skeleton/index.props";
 export { Slider } from "./Slider";

package/esm/index.js

@@ -31,6 +31,7 @@ export { RadioGroup } from './RadioGroup/index.js';
 export { Rating } from './Rating/Rating.js';
 export { Select } from './Select/index.js';
 export { Separator } from './Separator/index.js';
+export { Sheet } from './Sheet/Sheet.js';
 export { SkeletonRect, SkeletonText } from './Skeleton/index.js';
 export { Slider } from './Slider/Slider.js';
 export { Status } from './Status/index.js';

package/esm/theme_ba_variables.css

@@ -518,6 +518,36 @@
 --component-avatar-font-size-xxxl: 9rem;
 --component-accordion-text: #163300;
 --component-accordion-line: #CBD2C8;
+--component-sheet-bg: var(--color-bg-surface);
+--component-sheet-text: var(--color-text-primary);
+--component-sheet-secondary: var(--color-text-secondary);
+--component-sheet-overlay: var(--component-modal-overlay);
+--component-sheet-radius: var(--radius-xl);
+--component-sheet-shadow: var(--shadow-raised);
+--component-sheet-z-index: 1000;
+--component-sheet-max-height: 96dvh;
+--component-sheet-overlay-blur: var(--space-3);
+--component-sheet-motion-duration: 220ms;
+--component-sheet-resize-duration: 200ms;
+--component-sheet-motion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+--component-sheet-reduced-motion-duration: 0.001ms;
+--component-sheet-drag-area-height: var(--space-6);
+--component-sheet-handle-width: calc(var(--space-10) + var(--space-1));
+--component-sheet-handle-height: var(--space-1);
+--component-sheet-handle-radius: var(--radius-full);
+--component-sheet-handle-opacity: 0.45;
+--component-sheet-header-gap: var(--space-4);
+--component-sheet-header-padding: var(--space-3) var(--space-5) var(--space-4);
+--component-sheet-border-width: var(--border-width-hairline);
+--component-sheet-border-color: var(--color-border-subtle);
+--component-sheet-title-font-size: var(--font-size-heading-sm);
+--component-sheet-title-line-height: var(--line-height-heading-sm);
+--component-sheet-title-font-weight: var(--font-weight-semibold);
+--component-sheet-description-offset: var(--space-1);
+--component-sheet-description-font-size: var(--font-size-text-sm);
+--component-sheet-body-padding: var(--space-5);
+--component-sheet-footer-padding-block: var(--space-4);
+--component-sheet-footer-padding-inline: var(--space-5);
 --component-modal-bg: #FFFFFF;
 --component-modal-border: #E2E7DF;
 --component-modal-overlay: rgb(22 51 0 / 28%);

package/esm/theme_jaipur_variables.css

@@ -518,6 +518,36 @@
 --component-avatar-font-size-xxxl: 9rem;
 --component-accordion-text: #2C2242;
 --component-accordion-line: #D0CECC;
+--component-sheet-bg: var(--color-bg-surface);
+--component-sheet-text: var(--color-text-primary);
+--component-sheet-secondary: var(--color-text-secondary);
+--component-sheet-overlay: var(--component-modal-overlay);
+--component-sheet-radius: var(--radius-xl);
+--component-sheet-shadow: var(--shadow-raised);
+--component-sheet-z-index: 1000;
+--component-sheet-max-height: 96dvh;
+--component-sheet-overlay-blur: var(--space-3);
+--component-sheet-motion-duration: 220ms;
+--component-sheet-resize-duration: 200ms;
+--component-sheet-motion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+--component-sheet-reduced-motion-duration: 0.001ms;
+--component-sheet-drag-area-height: var(--space-6);
+--component-sheet-handle-width: calc(var(--space-10) + var(--space-1));
+--component-sheet-handle-height: var(--space-1);
+--component-sheet-handle-radius: var(--radius-full);
+--component-sheet-handle-opacity: 0.45;
+--component-sheet-header-gap: var(--space-4);
+--component-sheet-header-padding: var(--space-3) var(--space-5) var(--space-4);
+--component-sheet-border-width: var(--border-width-hairline);
+--component-sheet-border-color: var(--color-border-subtle);
+--component-sheet-title-font-size: var(--font-size-heading-sm);
+--component-sheet-title-line-height: var(--line-height-heading-sm);
+--component-sheet-title-font-weight: var(--font-weight-semibold);
+--component-sheet-description-offset: var(--space-1);
+--component-sheet-description-font-size: var(--font-size-text-sm);
+--component-sheet-body-padding: var(--space-5);
+--component-sheet-footer-padding-block: var(--space-4);
+--component-sheet-footer-padding-inline: var(--space-5);
 --component-modal-bg: #FFFFFF;
 --component-modal-border: #E4E3DF;
 --component-modal-overlay: color-mix(in srgb, var(--palette-black) 25%, transparent);

package/hooks/useMediaSizes/index.d.ts

@@ -1,5 +1,9 @@
 import type { Media } from "../../Theme/breakpoints";
 export type QueryInputFunction = (breakpoints: Media) => string;
 type QueryInput = QueryInputFunction | string;
+/**
+ * Returns whether the media query matches.
+ * Returns `false` on the server and during hydration, the real value right after.
+ */
 export declare const useMediaSizes: (queryInput: QueryInput) => boolean;
 export {};

package/hooks/useMediaSizes/index.js

@@ -1,44 +1,34 @@
 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var breakpoints = require('../../Theme/breakpoints.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
-
-var supportMatchMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
+var getServerSnapshot = function getServerSnapshot() {
+  return false;
+};
+var getMediaQueryList = function getMediaQueryList(query) {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query) : null;
+};
+/**
+ * Returns whether the media query matches.
+ * Returns `false` on the server and during hydration, the real value right after.
+ */
 var useMediaSizes = function useMediaSizes(queryInput) {
-  var query = typeof queryInput === "function" ? queryInput(breakpoints.media) : queryInput;
-  query = query.replace(/^@media( ?)/m, "");
-  var matchMedia = supportMatchMedia ? window.matchMedia : null;
-  var _useState = React.useState(function () {
-      if (matchMedia) {
-        return matchMedia(query).matches;
-      }
-      return false;
-    }),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    match = _useState2[0],
-    setMatch = _useState2[1];
-  React.useEffect(function () {
-    if (!matchMedia) return undefined;
-    var active = true;
-    var queryList = matchMedia(query);
-    var updateMatch = function updateMatch() {
-      if (active) {
-        setMatch(queryList.matches);
-      }
-    };
-    updateMatch();
-    queryList.addEventListener("change", updateMatch);
+  // A function input is a new function every render: memoize on the query string.
+  var query = (typeof queryInput === "function" ? queryInput(breakpoints.media) : queryInput).replace(/^\s*@media\s*/, "");
+  var subscribe = React.useCallback(function (onChange) {
+    var queryList = getMediaQueryList(query);
+    if (!queryList) return function () {};
+    queryList.addEventListener("change", onChange);
     return function () {
-      active = false;
-      queryList.removeEventListener("change", updateMatch);
+      return queryList.removeEventListener("change", onChange);
     };
-  });
-  return match;
+  }, [query]);
+  var getSnapshot = React.useCallback(function () {
+    var _a, _b;
+    return (_b = (_a = getMediaQueryList(query)) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false;
+  }, [query]);
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 };
 
 exports.useMediaSizes = useMediaSizes;

package/index.d.ts

@@ -64,6 +64,8 @@ export { Select } from "./Select";
 export type { SelectProps } from "./Select/index.props";
 export { Separator } from "./Separator";
 export type { SeparatorProps } from "./Separator/index.props";
+export { Sheet } from "./Sheet";
+export type { SheetProps, SheetSnapPoint, SheetCloseReason } from "./Sheet";
 export { SkeletonRect, SkeletonText } from "./Skeleton";
 export type { RectProps as SkeletonRectProps, TextProps as SkeletonTextProps, } from "./Skeleton/index.props";
 export { Slider } from "./Slider";

package/index.js

@@ -33,6 +33,7 @@ var index$n = require('./RadioGroup/index.js');
 require('./Rating/index.js');
 var index$o = require('./Select/index.js');
 var index$p = require('./Separator/index.js');
+require('./Sheet/index.js');
 var index$q = require('./Skeleton/index.js');
 require('./Slider/index.js');
 var index$r = require('./Status/index.js');
@@ -81,6 +82,7 @@ var Plus = require('./Icons/Plus.js');
 var Progress = require('./Progress/Progress.js');
 var Rating = require('./Rating/Rating.js');
 var Setting = require('./Icons/Setting.js');
+var Sheet = require('./Sheet/Sheet.js');
 var Shield = require('./Icons/Shield.js');
 var Slider = require('./Slider/Slider.js');
 var Trash = require('./Icons/Trash.js');
@@ -168,6 +170,7 @@ exports.Plus = Plus.Plus;
 exports.Progress = Progress.Progress;
 exports.Rating = Rating.Rating;
 exports.Setting = Setting.Setting;
+exports.Sheet = Sheet.Sheet;
 exports.Shield = Shield.Shield;
 exports.Slider = Slider.Slider;
 exports.Trash = Trash.Trash;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.78",
+  "version": "0.8.81",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",

package/theme_ba_variables.css

@@ -518,6 +518,36 @@
 --component-avatar-font-size-xxxl: 9rem;
 --component-accordion-text: #163300;
 --component-accordion-line: #CBD2C8;
+--component-sheet-bg: var(--color-bg-surface);
+--component-sheet-text: var(--color-text-primary);
+--component-sheet-secondary: var(--color-text-secondary);
+--component-sheet-overlay: var(--component-modal-overlay);
+--component-sheet-radius: var(--radius-xl);
+--component-sheet-shadow: var(--shadow-raised);
+--component-sheet-z-index: 1000;
+--component-sheet-max-height: 96dvh;
+--component-sheet-overlay-blur: var(--space-3);
+--component-sheet-motion-duration: 220ms;
+--component-sheet-resize-duration: 200ms;
+--component-sheet-motion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+--component-sheet-reduced-motion-duration: 0.001ms;
+--component-sheet-drag-area-height: var(--space-6);
+--component-sheet-handle-width: calc(var(--space-10) + var(--space-1));
+--component-sheet-handle-height: var(--space-1);
+--component-sheet-handle-radius: var(--radius-full);
+--component-sheet-handle-opacity: 0.45;
+--component-sheet-header-gap: var(--space-4);
+--component-sheet-header-padding: var(--space-3) var(--space-5) var(--space-4);
+--component-sheet-border-width: var(--border-width-hairline);
+--component-sheet-border-color: var(--color-border-subtle);
+--component-sheet-title-font-size: var(--font-size-heading-sm);
+--component-sheet-title-line-height: var(--line-height-heading-sm);
+--component-sheet-title-font-weight: var(--font-weight-semibold);
+--component-sheet-description-offset: var(--space-1);
+--component-sheet-description-font-size: var(--font-size-text-sm);
+--component-sheet-body-padding: var(--space-5);
+--component-sheet-footer-padding-block: var(--space-4);
+--component-sheet-footer-padding-inline: var(--space-5);
 --component-modal-bg: #FFFFFF;
 --component-modal-border: #E2E7DF;
 --component-modal-overlay: rgb(22 51 0 / 28%);

package/theme_jaipur_variables.css

@@ -518,6 +518,36 @@
 --component-avatar-font-size-xxxl: 9rem;
 --component-accordion-text: #2C2242;
 --component-accordion-line: #D0CECC;
+--component-sheet-bg: var(--color-bg-surface);
+--component-sheet-text: var(--color-text-primary);
+--component-sheet-secondary: var(--color-text-secondary);
+--component-sheet-overlay: var(--component-modal-overlay);
+--component-sheet-radius: var(--radius-xl);
+--component-sheet-shadow: var(--shadow-raised);
+--component-sheet-z-index: 1000;
+--component-sheet-max-height: 96dvh;
+--component-sheet-overlay-blur: var(--space-3);
+--component-sheet-motion-duration: 220ms;
+--component-sheet-resize-duration: 200ms;
+--component-sheet-motion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+--component-sheet-reduced-motion-duration: 0.001ms;
+--component-sheet-drag-area-height: var(--space-6);
+--component-sheet-handle-width: calc(var(--space-10) + var(--space-1));
+--component-sheet-handle-height: var(--space-1);
+--component-sheet-handle-radius: var(--radius-full);
+--component-sheet-handle-opacity: 0.45;
+--component-sheet-header-gap: var(--space-4);
+--component-sheet-header-padding: var(--space-3) var(--space-5) var(--space-4);
+--component-sheet-border-width: var(--border-width-hairline);
+--component-sheet-border-color: var(--color-border-subtle);
+--component-sheet-title-font-size: var(--font-size-heading-sm);
+--component-sheet-title-line-height: var(--line-height-heading-sm);
+--component-sheet-title-font-weight: var(--font-weight-semibold);
+--component-sheet-description-offset: var(--space-1);
+--component-sheet-description-font-size: var(--font-size-text-sm);
+--component-sheet-body-padding: var(--space-5);
+--component-sheet-footer-padding-block: var(--space-4);
+--component-sheet-footer-padding-inline: var(--space-5);
 --component-modal-bg: #FFFFFF;
 --component-modal-border: #E4E3DF;
 --component-modal-overlay: color-mix(in srgb, var(--palette-black) 25%, transparent);