@cloudscape-design/components 3.0.1303 → 3.0.1305

package/internal/base-component/styles.scoped.css

@@ -6,7 +6,7 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-@layer cloudscape-base-theme {
+@layer awsui-base-theme {
   body {
     --color-primary-50-1y05xv:#f0fbff;
     --color-primary-100-f62fz9:#d1f1ff;
@@ -248,6 +248,7 @@
     --color-background-button-normal-disabled-hl039l:var(--color-white-p1zlvy);
     --color-background-button-normal-hover-53op9s:var(--color-primary-50-1y05xv);
     --color-background-toggle-button-normal-pressed-4khex7:var(--color-primary-100-f62fz9);
+    --color-background-toggle-button-normal-default-ipnqr5:var(--color-background-button-normal-default-7f99mv);
     --color-background-button-primary-active-5cqoqt:var(--color-primary-900-a5kqrr);
     --color-background-button-primary-default-vdt0fu:var(--color-border-button-normal-default-glqfp1);
     --color-background-button-primary-disabled-sgo4zo:var(--color-neutral-250-vs1is4);
@@ -446,6 +447,7 @@
     --color-text-button-primary-default-mwl31m:var(--color-white-p1zlvy);
     --color-text-button-primary-hover-pw12ep:var(--color-white-p1zlvy);
     --color-text-calendar-date-hover-3fcriv:var(--color-text-dropdown-item-default-f1jr9u);
+    --color-text-calendar-date-selected-m18pgv:var(--color-background-control-default-4jb21l);
     --color-text-calendar-month-ea0e93:var(--color-neutral-600-fln1ww);
     --color-text-code-editor-gutter-active-line-2addhd:var(--color-white-p1zlvy);
     --color-text-code-editor-gutter-default-nlshs8:var(--color-neutral-950-lxybh8);
@@ -1434,6 +1436,7 @@
     --color-icon-action-card-disabled-wm3kyf:var(--color-neutral-600-fln1ww);
     --color-background-skeleton-sjxg4n:var(--color-neutral-750-pi9qqd);
     --color-background-skeleton-wave-1dy97d:var(--color-neutral-700-qw8ats);
+    --color-background-toggle-button-normal-default-ipnqr5:var(--color-background-button-normal-default-7f99mv);
     --color-background-button-primary-default-vdt0fu:var(--color-border-button-normal-default-glqfp1);
     --color-background-button-primary-hover-mo85i6:var(--color-border-button-normal-hover-6a2tdq);
     --color-text-direction-button-disabled-2jds36:var(--color-text-interactive-disabled-1bqmrl);
@@ -1505,6 +1508,7 @@
     --color-text-button-link-disabled-12wh7a:var(--color-text-interactive-disabled-1bqmrl);
     --color-text-button-link-hover-kvrc36:var(--color-text-button-normal-hover-gusgyv);
     --color-text-calendar-date-hover-3fcriv:var(--color-text-dropdown-item-default-f1jr9u);
+    --color-text-calendar-date-selected-m18pgv:var(--color-background-control-default-4jb21l);
     --color-text-column-sorting-icon-fngn77:var(--color-text-column-header-e6urd1);
     --color-text-control-disabled-upk9lz:var(--color-text-interactive-disabled-1bqmrl);
     --color-text-dropdown-footer-umcot2:var(--color-text-form-secondary-1nm780);
@@ -1709,6 +1713,7 @@
     --shadow-sticky-embedded-jmny8n:0px 2px 0px 0px #414d5c, 0px 16px 16px -12px rgba(0, 7, 22, 1);
     --shadow-sticky-column-first-trcd2o:0px 4px 8px 1px rgba(0, 7, 22, 0.5);
     --shadow-sticky-column-last-qgh697:0px 4px 8px 1px rgba(0, 7, 22, 0.5);
+    --color-background-toggle-button-normal-default-ipnqr5:var(--color-background-button-normal-default-7f99mv);
     --color-background-button-primary-default-vdt0fu:var(--color-border-button-normal-default-glqfp1);
     --color-background-button-primary-hover-mo85i6:var(--color-border-button-normal-hover-6a2tdq);
     --color-text-direction-button-disabled-2jds36:var(--color-text-interactive-disabled-1bqmrl);
@@ -1776,6 +1781,7 @@
     --color-text-button-link-disabled-12wh7a:var(--color-text-interactive-disabled-1bqmrl);
     --color-text-button-link-hover-kvrc36:var(--color-text-button-normal-hover-gusgyv);
     --color-text-calendar-date-hover-3fcriv:var(--color-text-dropdown-item-default-f1jr9u);
+    --color-text-calendar-date-selected-m18pgv:var(--color-background-control-default-4jb21l);
     --color-text-column-sorting-icon-fngn77:var(--color-text-column-header-e6urd1);
     --color-text-control-disabled-upk9lz:var(--color-text-interactive-disabled-1bqmrl);
     --color-text-dropdown-footer-umcot2:var(--color-text-form-secondary-1nm780);
@@ -1826,6 +1832,7 @@
     --color-text-link-hover-2hfec2:var(--color-white-p1zlvy);
     --color-text-tutorial-hotspot-default-xfv3ow:var(--color-neutral-300-08wi6k);
     --color-text-tutorial-hotspot-hover-92pxog:var(--color-neutral-100-gk3lvf);
+    --color-background-toggle-button-normal-default-ipnqr5:var(--color-background-button-normal-default-7f99mv);
     --color-background-button-primary-default-vdt0fu:var(--color-border-button-normal-default-glqfp1);
     --color-background-button-primary-hover-mo85i6:var(--color-border-button-normal-hover-6a2tdq);
     --color-background-segment-default-b0r494:var(--color-background-button-normal-default-7f99mv);
@@ -1886,6 +1893,7 @@
     --color-text-notification-default-1iey72:var(--color-text-notification-yellow-vjtdxk);
     --color-text-tutorial-hotspot-default-xfv3ow:var(--color-neutral-600-fln1ww);
     --color-text-tutorial-hotspot-hover-92pxog:var(--color-neutral-900-v0mtoc);
+    --color-background-toggle-button-normal-default-ipnqr5:var(--color-background-button-normal-default-7f99mv);
     --color-background-button-primary-default-vdt0fu:var(--color-border-button-normal-default-glqfp1);
     --color-background-button-primary-hover-mo85i6:var(--color-border-button-normal-hover-6a2tdq);
     --color-background-segment-default-b0r494:var(--color-background-button-normal-default-7f99mv);
@@ -1930,6 +1938,7 @@
     --color-text-expandable-section-default-ynw8my:var(--color-text-button-normal-default-nzalii);
     --color-text-expandable-section-hover-ojzwhd:var(--color-text-button-normal-hover-gusgyv);
     --font-expandable-heading-size-0uk059:14px;
+    --color-background-toggle-button-normal-default-ipnqr5:var(--color-background-button-normal-default-7f99mv);
     --color-background-button-primary-default-vdt0fu:var(--color-border-button-normal-default-glqfp1);
     --color-background-button-primary-hover-mo85i6:var(--color-border-button-normal-hover-6a2tdq);
     --color-background-segment-default-b0r494:var(--color-background-button-normal-default-7f99mv);
@@ -2121,6 +2130,7 @@
     --color-icon-action-card-disabled-wm3kyf:var(--color-neutral-600-fln1ww);
     --color-background-skeleton-sjxg4n:var(--color-neutral-750-pi9qqd);
     --color-background-skeleton-wave-1dy97d:var(--color-neutral-700-qw8ats);
+    --color-background-toggle-button-normal-default-ipnqr5:var(--color-background-button-normal-default-7f99mv);
     --color-background-button-primary-default-vdt0fu:var(--color-border-button-normal-default-glqfp1);
     --color-background-button-primary-hover-mo85i6:var(--color-border-button-normal-hover-6a2tdq);
     --color-text-direction-button-disabled-2jds36:var(--color-text-interactive-disabled-1bqmrl);
@@ -2190,6 +2200,7 @@
     --color-text-button-link-disabled-12wh7a:var(--color-text-interactive-disabled-1bqmrl);
     --color-text-button-link-hover-kvrc36:var(--color-text-button-normal-hover-gusgyv);
     --color-text-calendar-date-hover-3fcriv:var(--color-text-dropdown-item-default-f1jr9u);
+    --color-text-calendar-date-selected-m18pgv:var(--color-background-control-default-4jb21l);
     --color-text-column-sorting-icon-fngn77:var(--color-text-column-header-e6urd1);
     --color-text-control-disabled-upk9lz:var(--color-text-interactive-disabled-1bqmrl);
     --color-text-dropdown-footer-umcot2:var(--color-text-form-secondary-1nm780);
@@ -2280,5 +2291,5 @@
   }
 }
 :root {
-  --awsui-version-info-d6bd1774: true;
+  --awsui-version-info-5325301e: true;
 }

package/internal/components/drag-handle/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAM/C,QAAA,MAAM,gBAAgB,kaA0ErB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAM/C,QAAA,MAAM,gBAAgB,kaA2ErB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/internal/components/drag-handle/button.js

@@ -31,7 +31,7 @@ const DragHandleButton = forwardRef(({ variant = 'drag-indicator', size = 'norma
     // (See https://bugs.webkit.org/show_bug.cgi?id=22261)
     // Otherwise, we can't reliably catch keyboard events coming from the handle
     // when it is being dragged.
-    React.createElement("div", { ref: useMergeRefs(ref, dragHandleRefObject), role: ariaValue ? 'slider' : 'application', tabIndex: 0, className: clsx(className, styles.handle, testUtilsStyles.root, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled'], active && styles.active), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-valuemax": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMax, "aria-valuemin": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMin, "aria-valuenow": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueNow, onPointerDown: onPointerDown, onClick: onClick, onKeyDown: onKeyDown },
+    React.createElement("div", { ref: useMergeRefs(ref, dragHandleRefObject), role: ariaValue ? 'slider' : 'button', tabIndex: 0, className: clsx(className, styles.handle, testUtilsStyles.root, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled'], active && styles.active), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-pressed": ariaValue ? undefined : active, "aria-valuemax": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMax, "aria-valuemin": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMin, "aria-valuenow": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueNow, onPointerDown: onPointerDown, onClick: onClick, onKeyDown: onKeyDown },
         React.createElement("div", { className: styles['prevent-pointer'] },
             React.createElement(InternalIcon, { ...iconProps }))));
 });

package/internal/components/drag-handle/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAG7E,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,gBAAgB,GAAG,UAAU,CACjC,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,KAAK,EACd,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,OAAO,EACP,SAAS,GACO,EAClB,GAAuB,EACvB,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAc,CAAC,GAAG,EAAE;QACjC,MAAM,MAAM,GAAG;YACb,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,UAAoB,CAAC,CAAC,CAAC,SAAS;YACrD,IAAI;SACL,CAAC;QACF,QAAQ,OAAO,EAAE,CAAC;YAChB,KAAK,gBAAgB;gBACnB,OAAO,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;YAC/C,KAAK,aAAa;gBAChB,OAAO,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;YAC5C,KAAK,mBAAmB;gBACtB,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,EAAE,CAAC;YACjE,KAAK,iBAAiB;gBACpB,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,EAAE,CAAC;QACjE,CAAC;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,6BACE,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,mBAAmB,CAAC,EAC3C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,EAC1C,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,MAAM,EACb,eAAe,CAAC,IAAI,EACpB,MAAM,CAAC,UAAU,OAAO,EAAE,CAAC,EAC3B,MAAM,CAAC,eAAe,IAAI,EAAE,CAAC,EAC7B,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,EACrC,MAAM,IAAI,MAAM,CAAC,MAAM,CACxB,gBACW,SAAS,qBACJ,cAAc,sBACb,eAAe,mBAClB,QAAQ,mBACR,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAClC,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS;QAGpB,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;YACvC,oBAAC,YAAY,OAAK,SAAS,GAAI,CAC3B,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\nconst DragHandleButton = forwardRef(\n  (\n    {\n      variant = 'drag-indicator',\n      size = 'normal',\n      active = false,\n      className,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedby,\n      ariaValue,\n      disabled,\n      onPointerDown,\n      onClick,\n      onKeyDown,\n    }: DragHandleProps,\n    ref: React.Ref<Element>\n  ) => {\n    const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n    const iconProps: IconProps = (() => {\n      const shared = {\n        variant: disabled ? ('disabled' as const) : undefined,\n        size,\n      };\n      switch (variant) {\n        case 'drag-indicator':\n          return { ...shared, name: 'drag-indicator' };\n        case 'resize-area':\n          return { ...shared, name: 'resize-area' };\n        case 'resize-horizontal':\n          return { ...shared, svg: <ResizeIcon variant=\"horizontal\" /> };\n        case 'resize-vertical':\n          return { ...shared, svg: <ResizeIcon variant=\"vertical\" /> };\n      }\n    })();\n\n    return (\n      // We need to use a div with button role instead of a button\n      // so that Safari will focus on it when clicking it.\n      // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n      // Otherwise, we can't reliably catch keyboard events coming from the handle\n      // when it is being dragged.\n      <div\n        ref={useMergeRefs(ref, dragHandleRefObject)}\n        role={ariaValue ? 'slider' : 'application'}\n        tabIndex={0}\n        className={clsx(\n          className,\n          styles.handle,\n          testUtilsStyles.root,\n          styles[`handle-${variant}`],\n          styles[`handle-size-${size}`],\n          disabled && styles['handle-disabled'],\n          active && styles.active\n        )}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedby}\n        aria-disabled={disabled}\n        aria-valuemax={ariaValue?.valueMax}\n        aria-valuemin={ariaValue?.valueMin}\n        aria-valuenow={ariaValue?.valueNow}\n        onPointerDown={onPointerDown}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        {/* ensure that events happen on the parent div, not the icon */}\n        <div className={styles['prevent-pointer']}>\n          <InternalIcon {...iconProps} />\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default DragHandleButton;\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAG7E,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,gBAAgB,GAAG,UAAU,CACjC,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,KAAK,EACd,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,OAAO,EACP,SAAS,GACO,EAClB,GAAuB,EACvB,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAc,CAAC,GAAG,EAAE;QACjC,MAAM,MAAM,GAAG;YACb,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,UAAoB,CAAC,CAAC,CAAC,SAAS;YACrD,IAAI;SACL,CAAC;QACF,QAAQ,OAAO,EAAE,CAAC;YAChB,KAAK,gBAAgB;gBACnB,OAAO,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;YAC/C,KAAK,aAAa;gBAChB,OAAO,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;YAC5C,KAAK,mBAAmB;gBACtB,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,EAAE,CAAC;YACjE,KAAK,iBAAiB;gBACpB,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,EAAE,CAAC;QACjE,CAAC;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,6BACE,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,mBAAmB,CAAC,EAC3C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,MAAM,EACb,eAAe,CAAC,IAAI,EACpB,MAAM,CAAC,UAAU,OAAO,EAAE,CAAC,EAC3B,MAAM,CAAC,eAAe,IAAI,EAAE,CAAC,EAC7B,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,EACrC,MAAM,IAAI,MAAM,CAAC,MAAM,CACxB,gBACW,SAAS,qBACJ,cAAc,sBACb,eAAe,mBAClB,QAAQ,kBACT,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,mBAC7B,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAClC,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS;QAGpB,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;YACvC,oBAAC,YAAY,OAAK,SAAS,GAAI,CAC3B,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\nconst DragHandleButton = forwardRef(\n  (\n    {\n      variant = 'drag-indicator',\n      size = 'normal',\n      active = false,\n      className,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedby,\n      ariaValue,\n      disabled,\n      onPointerDown,\n      onClick,\n      onKeyDown,\n    }: DragHandleProps,\n    ref: React.Ref<Element>\n  ) => {\n    const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n    const iconProps: IconProps = (() => {\n      const shared = {\n        variant: disabled ? ('disabled' as const) : undefined,\n        size,\n      };\n      switch (variant) {\n        case 'drag-indicator':\n          return { ...shared, name: 'drag-indicator' };\n        case 'resize-area':\n          return { ...shared, name: 'resize-area' };\n        case 'resize-horizontal':\n          return { ...shared, svg: <ResizeIcon variant=\"horizontal\" /> };\n        case 'resize-vertical':\n          return { ...shared, svg: <ResizeIcon variant=\"vertical\" /> };\n      }\n    })();\n\n    return (\n      // We need to use a div with button role instead of a button\n      // so that Safari will focus on it when clicking it.\n      // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n      // Otherwise, we can't reliably catch keyboard events coming from the handle\n      // when it is being dragged.\n      <div\n        ref={useMergeRefs(ref, dragHandleRefObject)}\n        role={ariaValue ? 'slider' : 'button'}\n        tabIndex={0}\n        className={clsx(\n          className,\n          styles.handle,\n          testUtilsStyles.root,\n          styles[`handle-${variant}`],\n          styles[`handle-size-${size}`],\n          disabled && styles['handle-disabled'],\n          active && styles.active\n        )}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedby}\n        aria-disabled={disabled}\n        aria-pressed={ariaValue ? undefined : active}\n        aria-valuemax={ariaValue?.valueMax}\n        aria-valuemin={ariaValue?.valueMin}\n        aria-valuenow={ariaValue?.valueNow}\n        onPointerDown={onPointerDown}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        {/* ensure that events happen on the parent div, not the icon */}\n        <div className={styles['prevent-pointer']}>\n          <InternalIcon {...iconProps} />\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default DragHandleButton;\n"]}

package/internal/components/sortable-area/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/sortable-area/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAOjD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,IAAI,EAAE,EACzC,KAAK,EACL,cAAc,EACd,UAAU,EACV,aAAa,EACb,cAAc,EACd,WAAW,GACZ,EAAE,iBAAiB,CAAC,IAAI,CAAC,eAiFzB;AA+FD,wBAAgB,sBAAsB,CACpC,cAAc,EAAE,iBAAiB,CAAC,cAAc,CAAC,GAAG,CAAC,GACpD,iBAAiB,CAAC,mBAAmB,CAEvC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/sortable-area/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAOjD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,IAAI,EAAE,EACzC,KAAK,EACL,cAAc,EACd,UAAU,EACV,aAAa,EACb,cAAc,EACd,WAAW,GACZ,EAAE,iBAAiB,CAAC,IAAI,CAAC,eAiFzB;AAgGD,wBAAgB,sBAAsB,CACpC,cAAc,EAAE,iBAAiB,CAAC,cAAc,CAAC,GAAG,CAAC,GACpD,iBAAiB,CAAC,mBAAmB,CAEvC"}

package/internal/components/sortable-area/index.js

@@ -105,6 +105,7 @@ function DraggableItem({ item, itemDefinition, dragHandleAriaLabel, showDirectio
         isDragGhost: false,
         dragHandleProps: {
             ...dragHandleListeners,
+            active: isDragging,
             ariaLabel: (_a = joinStrings(dragHandleAriaLabel, itemDefinition.label(item))) !== null && _a !== void 0 ? _a : '',
             ariaDescribedby: attributes['aria-describedby'],
             disabled: attributes['aria-disabled'],

package/internal/components/sortable-area/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/sortable-area/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useRef } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport clsx from 'clsx';\n\nimport { Portal } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../events';\nimport { joinStrings } from '../../utils/strings';\nimport { SortableAreaProps } from './interfaces';\nimport { EventName } from './keyboard-sensor/utilities/events';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\n\nimport styles from './styles.css.js';\n\nexport { SortableAreaProps };\n\nexport default function SortableArea<Item>({\n  items,\n  itemDefinition,\n  renderItem,\n  onItemsChange,\n  disableReorder,\n  i18nStrings,\n}: SortableAreaProps<Item>) {\n  const { activeItemId, setActiveItemId, collisionDetection, handleKeyDown, sensors, isKeyboard } =\n    useDragAndDropReorder({\n      items,\n      itemDefinition,\n    });\n  const activeItem = activeItemId ? items.find(item => itemDefinition.id(item) === activeItemId) : null;\n  const isDragging = activeItemId !== null;\n  const announcements = useLiveAnnouncements({ items, itemDefinition, isDragging, ...i18nStrings });\n  const portalContainer = usePortalContainer();\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={collisionDetection}\n      accessibility={{\n        announcements,\n        restoreFocus: false,\n        screenReaderInstructions: i18nStrings?.dragHandleAriaDescription\n          ? { draggable: i18nStrings.dragHandleAriaDescription }\n          : undefined,\n        container: portalContainer ?? undefined,\n      }}\n      onDragStart={({ active }) => setActiveItemId(active.id)}\n      onDragEnd={event => {\n        setActiveItemId(null);\n        const { active, over } = event;\n        if (over && active.id !== over.id) {\n          const movedItem = items.find(item => itemDefinition.id(item) === active.id)!;\n          const oldIndex = items.findIndex(item => itemDefinition.id(item) === active.id);\n          const newIndex = items.findIndex(item => itemDefinition.id(item) === over.id);\n          fireNonCancelableEvent(onItemsChange, { items: arrayMove([...items], oldIndex, newIndex), movedItem });\n        }\n      }}\n      onDragCancel={() => setActiveItemId(null)}\n    >\n      <SortableContext\n        disabled={disableReorder}\n        items={items.map(item => itemDefinition.id(item))}\n        strategy={verticalListSortingStrategy}\n      >\n        {items.map(item => (\n          <DraggableItem\n            key={itemDefinition.id(item)}\n            item={item}\n            itemDefinition={itemDefinition}\n            showDirectionButtons={item === activeItem && isKeyboard.current}\n            renderItem={renderItem}\n            onKeyDown={handleKeyDown}\n            dragHandleAriaLabel={i18nStrings?.dragHandleAriaLabel}\n          />\n        ))}\n      </SortableContext>\n\n      <Portal container={portalContainer}>\n        {/* Make sure that the drag overlay is above the modal  by assigning the z-index as inline style\n            so that it prevails over dnd-kit's inline z-index of 999 */}\n        <DragOverlay\n          className={clsx(styles['drag-overlay'], styles[`drag-overlay-${getBorderRadiusVariant(itemDefinition)}`])}\n          dropAnimation={null}\n          style={{ zIndex: 5000 }}\n          transition={isKeyboard.current ? 'transform 250ms' : ''}\n        >\n          {activeItem &&\n            renderItem({\n              item: activeItem,\n              id: activeItemId!.toString(),\n              style: {},\n              className: styles.active,\n              isDropPlaceholder: true,\n              isSortingActive: false,\n              isDragGhost: true,\n              dragHandleProps: {\n                ariaLabel: joinStrings(i18nStrings?.dragHandleAriaLabel, itemDefinition.label(activeItem)) ?? '',\n                active: true,\n                onKeyDown: handleKeyDown,\n              },\n            })}\n        </DragOverlay>\n      </Portal>\n    </DndContext>\n  );\n}\n\nfunction usePortalContainer() {\n  const portalContainerRef = useRef(typeof document !== 'undefined' ? document.createElement('div') : null);\n  useEffect(() => {\n    const container = portalContainerRef.current;\n    if (container && !container.isConnected) {\n      document.body.appendChild(container);\n    }\n    return () => {\n      if (container && container.isConnected) {\n        document.body.removeChild(container);\n      }\n    };\n  }, []);\n  return portalContainerRef.current;\n}\n\nfunction DraggableItem<Item>({\n  item,\n  itemDefinition,\n  dragHandleAriaLabel,\n  showDirectionButtons,\n  onKeyDown,\n  renderItem,\n}: {\n  item: Item;\n  itemDefinition: SortableAreaProps.ItemDefinition<Item>;\n  dragHandleAriaLabel?: string;\n  showDirectionButtons: boolean;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n  renderItem: (props: SortableAreaProps.RenderItemProps<Item>) => React.ReactNode;\n}) {\n  const id = itemDefinition.id(item);\n  const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({\n    id,\n  });\n  const style = { transform: CSS.Translate.toString(transform) };\n  const dragHandleListeners = attributes['aria-disabled']\n    ? {}\n    : {\n        ...listeners,\n        onKeyDown: (event: React.KeyboardEvent) => {\n          if (onKeyDown) {\n            onKeyDown(event);\n          }\n          if (listeners?.onKeyDown) {\n            listeners.onKeyDown(event);\n          }\n        },\n      };\n  const className = clsx(\n    isDragging && clsx(styles.placeholder, styles[`placeholder-${getBorderRadiusVariant(itemDefinition)}`]),\n    isSorting && styles.sorting\n  );\n  const dragHandleRef = useRef<HTMLElement>(null);\n  return (\n    <>\n      {renderItem({\n        item,\n        id,\n        ref: setNodeRef,\n        style,\n        className,\n        isDropPlaceholder: isDragging,\n        isSortingActive: isSorting,\n        isDragGhost: false,\n        dragHandleProps: {\n          ...dragHandleListeners,\n          ariaLabel: joinStrings(dragHandleAriaLabel, itemDefinition.label(item)) ?? '',\n          ariaDescribedby: attributes['aria-describedby'],\n          disabled: attributes['aria-disabled'],\n          triggerMode: 'controlled',\n          controlledShowButtons: showDirectionButtons,\n          ref: dragHandleRef,\n          directions: showDirectionButtons\n            ? {\n                'block-start': 'active',\n                'block-end': 'active',\n              }\n            : undefined,\n          onDirectionClick: direction => {\n            const event = new Event(direction === 'block-start' ? EventName.CustomUp : EventName.CustomDown, {\n              bubbles: true,\n              cancelable: true,\n            });\n            onKeyDown(event as any);\n            dragHandleRef.current?.dispatchEvent(event);\n          },\n        },\n      })}\n    </>\n  );\n}\n\nexport function getBorderRadiusVariant(\n  itemDefinition: SortableAreaProps.ItemDefinition<any>\n): SortableAreaProps.BorderRadiusVariant {\n  return itemDefinition.borderRadius ?? 'item';\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/sortable-area/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useRef } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport clsx from 'clsx';\n\nimport { Portal } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../events';\nimport { joinStrings } from '../../utils/strings';\nimport { SortableAreaProps } from './interfaces';\nimport { EventName } from './keyboard-sensor/utilities/events';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\n\nimport styles from './styles.css.js';\n\nexport { SortableAreaProps };\n\nexport default function SortableArea<Item>({\n  items,\n  itemDefinition,\n  renderItem,\n  onItemsChange,\n  disableReorder,\n  i18nStrings,\n}: SortableAreaProps<Item>) {\n  const { activeItemId, setActiveItemId, collisionDetection, handleKeyDown, sensors, isKeyboard } =\n    useDragAndDropReorder({\n      items,\n      itemDefinition,\n    });\n  const activeItem = activeItemId ? items.find(item => itemDefinition.id(item) === activeItemId) : null;\n  const isDragging = activeItemId !== null;\n  const announcements = useLiveAnnouncements({ items, itemDefinition, isDragging, ...i18nStrings });\n  const portalContainer = usePortalContainer();\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={collisionDetection}\n      accessibility={{\n        announcements,\n        restoreFocus: false,\n        screenReaderInstructions: i18nStrings?.dragHandleAriaDescription\n          ? { draggable: i18nStrings.dragHandleAriaDescription }\n          : undefined,\n        container: portalContainer ?? undefined,\n      }}\n      onDragStart={({ active }) => setActiveItemId(active.id)}\n      onDragEnd={event => {\n        setActiveItemId(null);\n        const { active, over } = event;\n        if (over && active.id !== over.id) {\n          const movedItem = items.find(item => itemDefinition.id(item) === active.id)!;\n          const oldIndex = items.findIndex(item => itemDefinition.id(item) === active.id);\n          const newIndex = items.findIndex(item => itemDefinition.id(item) === over.id);\n          fireNonCancelableEvent(onItemsChange, { items: arrayMove([...items], oldIndex, newIndex), movedItem });\n        }\n      }}\n      onDragCancel={() => setActiveItemId(null)}\n    >\n      <SortableContext\n        disabled={disableReorder}\n        items={items.map(item => itemDefinition.id(item))}\n        strategy={verticalListSortingStrategy}\n      >\n        {items.map(item => (\n          <DraggableItem\n            key={itemDefinition.id(item)}\n            item={item}\n            itemDefinition={itemDefinition}\n            showDirectionButtons={item === activeItem && isKeyboard.current}\n            renderItem={renderItem}\n            onKeyDown={handleKeyDown}\n            dragHandleAriaLabel={i18nStrings?.dragHandleAriaLabel}\n          />\n        ))}\n      </SortableContext>\n\n      <Portal container={portalContainer}>\n        {/* Make sure that the drag overlay is above the modal  by assigning the z-index as inline style\n            so that it prevails over dnd-kit's inline z-index of 999 */}\n        <DragOverlay\n          className={clsx(styles['drag-overlay'], styles[`drag-overlay-${getBorderRadiusVariant(itemDefinition)}`])}\n          dropAnimation={null}\n          style={{ zIndex: 5000 }}\n          transition={isKeyboard.current ? 'transform 250ms' : ''}\n        >\n          {activeItem &&\n            renderItem({\n              item: activeItem,\n              id: activeItemId!.toString(),\n              style: {},\n              className: styles.active,\n              isDropPlaceholder: true,\n              isSortingActive: false,\n              isDragGhost: true,\n              dragHandleProps: {\n                ariaLabel: joinStrings(i18nStrings?.dragHandleAriaLabel, itemDefinition.label(activeItem)) ?? '',\n                active: true,\n                onKeyDown: handleKeyDown,\n              },\n            })}\n        </DragOverlay>\n      </Portal>\n    </DndContext>\n  );\n}\n\nfunction usePortalContainer() {\n  const portalContainerRef = useRef(typeof document !== 'undefined' ? document.createElement('div') : null);\n  useEffect(() => {\n    const container = portalContainerRef.current;\n    if (container && !container.isConnected) {\n      document.body.appendChild(container);\n    }\n    return () => {\n      if (container && container.isConnected) {\n        document.body.removeChild(container);\n      }\n    };\n  }, []);\n  return portalContainerRef.current;\n}\n\nfunction DraggableItem<Item>({\n  item,\n  itemDefinition,\n  dragHandleAriaLabel,\n  showDirectionButtons,\n  onKeyDown,\n  renderItem,\n}: {\n  item: Item;\n  itemDefinition: SortableAreaProps.ItemDefinition<Item>;\n  dragHandleAriaLabel?: string;\n  showDirectionButtons: boolean;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n  renderItem: (props: SortableAreaProps.RenderItemProps<Item>) => React.ReactNode;\n}) {\n  const id = itemDefinition.id(item);\n  const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({\n    id,\n  });\n  const style = { transform: CSS.Translate.toString(transform) };\n  const dragHandleListeners = attributes['aria-disabled']\n    ? {}\n    : {\n        ...listeners,\n        onKeyDown: (event: React.KeyboardEvent) => {\n          if (onKeyDown) {\n            onKeyDown(event);\n          }\n          if (listeners?.onKeyDown) {\n            listeners.onKeyDown(event);\n          }\n        },\n      };\n  const className = clsx(\n    isDragging && clsx(styles.placeholder, styles[`placeholder-${getBorderRadiusVariant(itemDefinition)}`]),\n    isSorting && styles.sorting\n  );\n  const dragHandleRef = useRef<HTMLElement>(null);\n  return (\n    <>\n      {renderItem({\n        item,\n        id,\n        ref: setNodeRef,\n        style,\n        className,\n        isDropPlaceholder: isDragging,\n        isSortingActive: isSorting,\n        isDragGhost: false,\n        dragHandleProps: {\n          ...dragHandleListeners,\n          active: isDragging,\n          ariaLabel: joinStrings(dragHandleAriaLabel, itemDefinition.label(item)) ?? '',\n          ariaDescribedby: attributes['aria-describedby'],\n          disabled: attributes['aria-disabled'],\n          triggerMode: 'controlled',\n          controlledShowButtons: showDirectionButtons,\n          ref: dragHandleRef,\n          directions: showDirectionButtons\n            ? {\n                'block-start': 'active',\n                'block-end': 'active',\n              }\n            : undefined,\n          onDirectionClick: direction => {\n            const event = new Event(direction === 'block-start' ? EventName.CustomUp : EventName.CustomDown, {\n              bubbles: true,\n              cancelable: true,\n            });\n            onKeyDown(event as any);\n            dragHandleRef.current?.dispatchEvent(event);\n          },\n        },\n      })}\n    </>\n  );\n}\n\nexport function getBorderRadiusVariant(\n  itemDefinition: SortableAreaProps.ItemDefinition<any>\n): SortableAreaProps.BorderRadiusVariant {\n  return itemDefinition.borderRadius ?? 'item';\n}\n"]}

package/internal/environment.d.ts

@@ -3,4 +3,5 @@ export const PACKAGE_VERSION: string;
 export const GIT_SHA: string;
 export const THEME: string;
 export const SYSTEM: string;
-export const ALWAYS_VISUAL_REFRESH: string;
+export const ALWAYS_VISUAL_REFRESH: string;
+export const INCLUDE_ONE_THEME: string;

package/internal/environment.js

@@ -1,6 +1,7 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (d6bd1774)";
-export var GIT_SHA = "d6bd1774";
+export var PACKAGE_VERSION = "3.0.0 (5325301e)";
+export var GIT_SHA = "5325301e";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
-export var ALWAYS_VISUAL_REFRESH = true;
+export var ALWAYS_VISUAL_REFRESH = true;
+export var INCLUDE_ONE_THEME = false;

package/internal/environment.json

@@ -1,8 +1,9 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (d6bd1774)",
-  "GIT_SHA": "d6bd1774",
+  "PACKAGE_VERSION": "3.0.0 (5325301e)",
+  "GIT_SHA": "5325301e",
   "THEME": "open-source-visual-refresh",
   "SYSTEM": "core",
-  "ALWAYS_VISUAL_REFRESH": true
+  "ALWAYS_VISUAL_REFRESH": true,
+  "INCLUDE_ONE_THEME": false
 }

package/internal/generated/styles/tokens.d.ts

@@ -289,6 +289,7 @@ export const colorBackgroundButtonNormalDefault: string;
 export const colorBackgroundButtonNormalDisabled: string;
 export const colorBackgroundButtonNormalHover: string;
 export const colorBackgroundToggleButtonNormalPressed: string;
+export const colorBackgroundToggleButtonNormalDefault: string;
 export const colorBackgroundButtonPrimaryActive: string;
 export const colorBackgroundButtonPrimaryDefault: string;
 export const colorBackgroundButtonPrimaryDisabled: string;
@@ -491,6 +492,7 @@ export const colorTextButtonPrimaryActive: string;
 export const colorTextButtonPrimaryDefault: string;
 export const colorTextButtonPrimaryHover: string;
 export const colorTextCalendarDateHover: string;
+export const colorTextCalendarDateSelected: string;
 export const colorTextCalendarMonth: string;
 export const colorTextCodeEditorGutterActiveLine: string;
 export const colorTextCodeEditorGutterDefault: string;

package/internal/generated/styles/tokens.js

@@ -289,6 +289,7 @@ export var colorBackgroundButtonNormalDefault = "var(--color-background-button-n
 export var colorBackgroundButtonNormalDisabled = "var(--color-background-button-normal-disabled-hl039l, #ffffff)";
 export var colorBackgroundButtonNormalHover = "var(--color-background-button-normal-hover-53op9s, #f0fbff)";
 export var colorBackgroundToggleButtonNormalPressed = "var(--color-background-toggle-button-normal-pressed-4khex7, #d1f1ff)";
+export var colorBackgroundToggleButtonNormalDefault = "var(--color-background-toggle-button-normal-default-ipnqr5, #ffffff)";
 export var colorBackgroundButtonPrimaryActive = "var(--color-background-button-primary-active-5cqoqt, #002b66)";
 export var colorBackgroundButtonPrimaryDefault = "var(--color-background-button-primary-default-vdt0fu, #006ce0)";
 export var colorBackgroundButtonPrimaryDisabled = "var(--color-background-button-primary-disabled-sgo4zo, #ebebf0)";
@@ -491,6 +492,7 @@ export var colorTextButtonPrimaryActive = "var(--color-text-button-primary-activ
 export var colorTextButtonPrimaryDefault = "var(--color-text-button-primary-default-mwl31m, #ffffff)";
 export var colorTextButtonPrimaryHover = "var(--color-text-button-primary-hover-pw12ep, #ffffff)";
 export var colorTextCalendarDateHover = "var(--color-text-calendar-date-hover-3fcriv, #0f141a)";
+export var colorTextCalendarDateSelected = "var(--color-text-calendar-date-selected-m18pgv, #ffffff)";
 export var colorTextCalendarMonth = "var(--color-text-calendar-month-ea0e93, #656871)";
 export var colorTextCodeEditorGutterActiveLine = "var(--color-text-code-editor-gutter-active-line-2addhd, #ffffff)";
 export var colorTextCodeEditorGutterDefault = "var(--color-text-code-editor-gutter-default-nlshs8, #0f141a)";

package/internal/generated/theming/index.cjs

@@ -1203,6 +1203,10 @@ module.exports.preset = {
         "light": "{colorPrimary100}",
         "dark": "{colorNeutral700}"
       },
+      "colorBackgroundToggleButtonNormalDefault": {
+        "light": "{colorBackgroundButtonNormalDefault}",
+        "dark": "{colorBackgroundButtonNormalDefault}"
+      },
       "colorBackgroundButtonPrimaryActive": {
         "light": "{colorPrimary900}",
         "dark": "{colorPrimary400}"
@@ -2011,6 +2015,10 @@ module.exports.preset = {
         "light": "{colorTextDropdownItemDefault}",
         "dark": "{colorTextDropdownItemDefault}"
       },
+      "colorTextCalendarDateSelected": {
+        "light": "{colorBackgroundControlDefault}",
+        "dark": "{colorBackgroundControlDefault}"
+      },
       "colorTextCalendarMonth": {
         "light": "{colorNeutral600}",
         "dark": "{colorNeutral450}"
@@ -3897,6 +3905,10 @@ module.exports.preset = {
             "light": "{colorNeutral700}",
             "dark": "{colorNeutral700}"
           },
+          "colorBackgroundToggleButtonNormalDefault": {
+            "light": "{colorBackgroundButtonNormalDefault}",
+            "dark": "{colorBackgroundButtonNormalDefault}"
+          },
           "colorBackgroundButtonPrimaryActive": {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
@@ -4705,6 +4717,10 @@ module.exports.preset = {
             "light": "{colorTextDropdownItemDefault}",
             "dark": "{colorTextDropdownItemDefault}"
           },
+          "colorTextCalendarDateSelected": {
+            "light": "{colorBackgroundControlDefault}",
+            "dark": "{colorBackgroundControlDefault}"
+          },
           "colorTextCalendarMonth": {
             "light": "{colorNeutral450}",
             "dark": "{colorNeutral450}"
@@ -5406,6 +5422,10 @@ module.exports.preset = {
             "light": "{colorNeutral700}",
             "dark": "{colorNeutral700}"
           },
+          "colorBackgroundToggleButtonNormalDefault": {
+            "light": "{colorBackgroundButtonNormalDefault}",
+            "dark": "{colorBackgroundButtonNormalDefault}"
+          },
           "colorBackgroundButtonPrimaryActive": {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
@@ -6214,6 +6234,10 @@ module.exports.preset = {
             "light": "{colorTextDropdownItemDefault}",
             "dark": "{colorTextDropdownItemDefault}"
           },
+          "colorTextCalendarDateSelected": {
+            "light": "{colorBackgroundControlDefault}",
+            "dark": "{colorBackgroundControlDefault}"
+          },
           "colorTextCalendarMonth": {
             "light": "{colorNeutral450}",
             "dark": "{colorNeutral450}"
@@ -6843,6 +6867,10 @@ module.exports.preset = {
             "light": "{colorPrimary100}",
             "dark": "{colorNeutral700}"
           },
+          "colorBackgroundToggleButtonNormalDefault": {
+            "light": "{colorBackgroundButtonNormalDefault}",
+            "dark": "{colorBackgroundButtonNormalDefault}"
+          },
           "colorBackgroundButtonPrimaryActive": {
             "light": "{colorPrimary900}",
             "dark": "{colorPrimary400}"
@@ -7651,6 +7679,10 @@ module.exports.preset = {
             "light": "{colorTextDropdownItemDefault}",
             "dark": "{colorTextDropdownItemDefault}"
           },
+          "colorTextCalendarDateSelected": {
+            "light": "{colorBackgroundControlDefault}",
+            "dark": "{colorBackgroundControlDefault}"
+          },
           "colorTextCalendarMonth": {
             "light": "{colorNeutral600}",
             "dark": "{colorNeutral450}"
@@ -8165,6 +8197,10 @@ module.exports.preset = {
             "light": "{colorPrimary100}",
             "dark": "{colorNeutral700}"
           },
+          "colorBackgroundToggleButtonNormalDefault": {
+            "light": "{colorBackgroundButtonNormalDefault}",
+            "dark": "{colorBackgroundButtonNormalDefault}"
+          },
           "colorBackgroundButtonPrimaryActive": {
             "light": "{colorPrimary900}",
             "dark": "{colorPrimary400}"
@@ -8973,6 +9009,10 @@ module.exports.preset = {
             "light": "{colorTextDropdownItemDefault}",
             "dark": "{colorTextDropdownItemDefault}"
           },
+          "colorTextCalendarDateSelected": {
+            "light": "{colorBackgroundControlDefault}",
+            "dark": "{colorBackgroundControlDefault}"
+          },
           "colorTextCalendarMonth": {
             "light": "{colorNeutral600}",
             "dark": "{colorNeutral450}"
@@ -9487,6 +9527,10 @@ module.exports.preset = {
             "light": "{colorPrimary100}",
             "dark": "{colorNeutral700}"
           },
+          "colorBackgroundToggleButtonNormalDefault": {
+            "light": "{colorBackgroundButtonNormalDefault}",
+            "dark": "{colorBackgroundButtonNormalDefault}"
+          },
           "colorBackgroundButtonPrimaryActive": {
             "light": "{colorPrimary900}",
             "dark": "{colorPrimary400}"
@@ -10295,6 +10339,10 @@ module.exports.preset = {
             "light": "{colorTextDropdownItemDefault}",
             "dark": "{colorTextDropdownItemDefault}"
           },
+          "colorTextCalendarDateSelected": {
+            "light": "{colorBackgroundControlDefault}",
+            "dark": "{colorBackgroundControlDefault}"
+          },
           "colorTextCalendarMonth": {
             "light": "{colorNeutral600}",
             "dark": "{colorNeutral450}"
@@ -10811,6 +10859,10 @@ module.exports.preset = {
             "light": "{colorNeutral700}",
             "dark": "{colorNeutral700}"
           },
+          "colorBackgroundToggleButtonNormalDefault": {
+            "light": "{colorBackgroundButtonNormalDefault}",
+            "dark": "{colorBackgroundButtonNormalDefault}"
+          },
           "colorBackgroundButtonPrimaryActive": {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
@@ -11619,6 +11671,10 @@ module.exports.preset = {
             "light": "{colorTextDropdownItemDefault}",
             "dark": "{colorTextDropdownItemDefault}"
           },
+          "colorTextCalendarDateSelected": {
+            "light": "{colorBackgroundControlDefault}",
+            "dark": "{colorBackgroundControlDefault}"
+          },
           "colorTextCalendarMonth": {
             "light": "{colorNeutral450}",
             "dark": "{colorNeutral450}"
@@ -12352,6 +12408,7 @@ module.exports.preset = {
       "colorBackgroundButtonNormalDisabled": "color",
       "colorBackgroundButtonNormalHover": "color",
       "colorBackgroundToggleButtonNormalPressed": "color",
+      "colorBackgroundToggleButtonNormalDefault": "color",
       "colorBackgroundButtonPrimaryActive": "color",
       "colorBackgroundButtonPrimaryDefault": "color",
       "colorBackgroundButtonPrimaryDisabled": "color",
@@ -12554,6 +12611,7 @@ module.exports.preset = {
       "colorTextButtonPrimaryDefault": "color",
       "colorTextButtonPrimaryHover": "color",
       "colorTextCalendarDateHover": "color",
+      "colorTextCalendarDateSelected": "color",
       "colorTextCalendarMonth": "color",
       "colorTextCodeEditorGutterActiveLine": "color",
       "colorTextCodeEditorGutterDefault": "color",
@@ -13149,6 +13207,7 @@ module.exports.preset = {
     "colorBackgroundButtonNormalDisabled",
     "colorBackgroundButtonNormalHover",
     "colorBackgroundToggleButtonNormalPressed",
+    "colorBackgroundToggleButtonNormalDefault",
     "colorBackgroundButtonPrimaryActive",
     "colorBackgroundButtonPrimaryDefault",
     "colorBackgroundButtonPrimaryDisabled",
@@ -13200,6 +13259,7 @@ module.exports.preset = {
     "colorBackgroundStatusSuccess",
     "colorBackgroundStatusWarning",
     "colorBackgroundToggleCheckedDisabled",
+    "colorBackgroundToggleDefault",
     "colorBackgroundStatusIndicatorError",
     "colorBackgroundStatusIndicatorWarning",
     "colorBackgroundStatusIndicatorSuccess",
@@ -13271,6 +13331,7 @@ module.exports.preset = {
     "colorTextButtonPrimaryActive",
     "colorTextButtonPrimaryDefault",
     "colorTextButtonPrimaryHover",
+    "colorTextCalendarDateSelected",
     "colorTextCounter",
     "colorTextDropdownItemDefault",
     "colorTextDropdownItemDisabled",
@@ -13626,6 +13687,7 @@ module.exports.preset = {
     "colorBackgroundButtonNormalDisabled",
     "colorBackgroundButtonNormalHover",
     "colorBackgroundToggleButtonNormalPressed",
+    "colorBackgroundToggleButtonNormalDefault",
     "colorBackgroundButtonPrimaryActive",
     "colorBackgroundButtonPrimaryDefault",
     "colorBackgroundButtonPrimaryDisabled",
@@ -13677,6 +13739,7 @@ module.exports.preset = {
     "colorBackgroundStatusSuccess",
     "colorBackgroundStatusWarning",
     "colorBackgroundToggleCheckedDisabled",
+    "colorBackgroundToggleDefault",
     "colorBackgroundAvatarGenAi",
     "colorBackgroundAvatarDefault",
     "colorTextAvatar",
@@ -13743,6 +13806,7 @@ module.exports.preset = {
     "colorTextButtonPrimaryActive",
     "colorTextButtonPrimaryDefault",
     "colorTextButtonPrimaryHover",
+    "colorTextCalendarDateSelected",
     "colorTextCounter",
     "colorTextDropdownItemDefault",
     "colorTextDropdownItemDisabled",
@@ -14242,6 +14306,7 @@ module.exports.preset = {
     "colorBackgroundButtonNormalDisabled": "color-background-button-normal-disabled",
     "colorBackgroundButtonNormalHover": "color-background-button-normal-hover",
     "colorBackgroundToggleButtonNormalPressed": "color-background-toggle-button-normal-pressed",
+    "colorBackgroundToggleButtonNormalDefault": "color-background-toggle-button-normal-default",
     "colorBackgroundButtonPrimaryActive": "color-background-button-primary-active",
     "colorBackgroundButtonPrimaryDefault": "color-background-button-primary-default",
     "colorBackgroundButtonPrimaryDisabled": "color-background-button-primary-disabled",
@@ -14444,6 +14509,7 @@ module.exports.preset = {
     "colorTextButtonPrimaryDefault": "color-text-button-primary-default",
     "colorTextButtonPrimaryHover": "color-text-button-primary-hover",
     "colorTextCalendarDateHover": "color-text-calendar-date-hover",
+    "colorTextCalendarDateSelected": "color-text-calendar-date-selected",
     "colorTextCalendarMonth": "color-text-calendar-month",
     "colorTextCodeEditorGutterActiveLine": "color-text-code-editor-gutter-active-line",
     "colorTextCodeEditorGutterDefault": "color-text-code-editor-gutter-default",
@@ -15169,6 +15235,7 @@ module.exports.preset = {
     "colorBackgroundButtonNormalDisabled": "--color-background-button-normal-disabled-hl039l",
     "colorBackgroundButtonNormalHover": "--color-background-button-normal-hover-53op9s",
     "colorBackgroundToggleButtonNormalPressed": "--color-background-toggle-button-normal-pressed-4khex7",
+    "colorBackgroundToggleButtonNormalDefault": "--color-background-toggle-button-normal-default-ipnqr5",
     "colorBackgroundButtonPrimaryActive": "--color-background-button-primary-active-5cqoqt",
     "colorBackgroundButtonPrimaryDefault": "--color-background-button-primary-default-vdt0fu",
     "colorBackgroundButtonPrimaryDisabled": "--color-background-button-primary-disabled-sgo4zo",
@@ -15371,6 +15438,7 @@ module.exports.preset = {
     "colorTextButtonPrimaryDefault": "--color-text-button-primary-default-mwl31m",
     "colorTextButtonPrimaryHover": "--color-text-button-primary-hover-pw12ep",
     "colorTextCalendarDateHover": "--color-text-calendar-date-hover-3fcriv",
+    "colorTextCalendarDateSelected": "--color-text-calendar-date-selected-m18pgv",
     "colorTextCalendarMonth": "--color-text-calendar-month-ea0e93",
     "colorTextCodeEditorGutterActiveLine": "--color-text-code-editor-gutter-active-line-2addhd",
     "colorTextCodeEditorGutterDefault": "--color-text-code-editor-gutter-default-nlshs8",