@workday/canvas-kit-labs-react 16.1.4 → 16.2.0-0604-next.0

package/dist/commonjs/selection-group/lib/hooks/useSelectionGroupModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectionGroupModel.d.ts","sourceRoot":"","sources":["../../../../../selection-group/lib/hooks/useSelectionGroupModel.tsx"],"names":[],"mappings":"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"}

package/dist/commonjs/selection-group/lib/hooks/useSelectionGroupModel.js

@@ -0,0 +1,166 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectionGroupModel = void 0;
+const react_1 = __importDefault(require("react"));
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const common_1 = require("@workday/canvas-kit-react/common");
+/**
+ * `createModelHook` runs a model's guards and callbacks unless the event it is wrapping is already
+ * a wrapped event. The overrides below delegate to events from the list model, which runs those
+ * same guards and callbacks because both models share a config, so they are marked as wrapped too.
+ * Without this, the `onGoTo*` callbacks would fire twice for a single key press.
+ */
+const asWrappedEvent = (fn) => {
+    fn._wrapped = true;
+    return fn;
+};
+exports.useSelectionGroupModel = (0, common_1.createModelHook)({
+    defaultConfig: {
+        ...collection_1.useListModel.defaultConfig,
+        /**
+         * Optional id for the whole `SelectionGroup`. If not provided, a unique id will be created.
+         * @default useUniqueId()
+         */
+        id: '',
+        /**
+         * The selection mode of the group. `single` allows one selection at a time and behaves like a
+         * radio group. `multiple` allows more than one selection and behaves like a checkbox group.
+         *
+         * This drives more than selection - it also determines the `radio`/`checkbox` role of an item,
+         * the `radiogroup`/`group` role of the list, whether the group is one tab stop or many, and the
+         * shape of the item's icon. The matching `selection` manager is derived from it, so most groups
+         * should set `mode` rather than passing a `selection` manager directly.
+         * @default 'single'
+         */
+        mode: 'single',
+        /**
+         * The selection manager the underlying list model uses. Leave this unset unless you need
+         * selection to behave differently from what `mode` provides - `mode` picks
+         * `singleSelectionManager` or `multiSelectionManager` for you. Setting this does not change
+         * the roles or keyboard behavior that `mode` controls.
+         * @default `singleSelectionManager`, or `multiSelectionManager` when `mode` is `'multiple'`
+         */
+        selection: undefined,
+        /**
+         * Controls how item widths are calculated within the group. All items in a group use the same
+         * sizing method.
+         * - `content`: each item is sized to its own label.
+         * - `equal`: each item is sized to match the widest item.
+         * - `column`: each item spans the full width of the group.
+         * @default 'content'
+         */
+        width: 'content',
+        /**
+         * The initially selected ids of the group. Use this for uncontrolled groups. For `single` mode,
+         * provide a single id. If not provided, nothing is selected until the user interacts.
+         */
+        initialSelectedIds: [],
+        /**
+         * The selected ids of the group. Providing this prop puts the model in a controlled state: the
+         * group renders exactly what is passed in and will not change on its own. Use `onSelect` to
+         * respond to selection.
+         */
+        selectedIds: undefined,
+        /**
+         * Sets disabled state for every item in the group. To disable individual items instead, pass
+         * their ids to `nonInteractiveIds` so keyboard navigation skips over them.
+         * @default false
+         */
+        disabled: false,
+        /**
+         * The type of error associated with the group (if applicable). Notification states apply to the
+         * whole group rather than to individual items.
+         *
+         * This prop only changes the group's border color, which is not sufficient on its own. Always
+         * pair it with visible text describing the state and reference that text with
+         * `aria-describedby`. Wrapping the group in a `FormField` with a `FormField.Hint` does this
+         * for you.
+         */
+        error: undefined,
+        /**
+         * If true, the group is marked invalid to assistive technology. Only applies when `mode` is
+         * `'single'`, because `aria-invalid` is not allowed on the `group` role that a multi-select
+         * group renders.
+         * @default true when `error` is `'error'`, otherwise undefined
+         */
+        'aria-invalid': undefined,
+        /**
+         * The id of the element describing the group, such as the hint text of a `FormField`. This is
+         * set automatically when the group is used as a `FormField.Input`.
+         */
+        'aria-describedby': undefined,
+        /**
+         * The orientation of keyboard navigation within the group.
+         * @default 'horizontal'
+         */
+        orientation: 'horizontal',
+    },
+    requiredConfig: collection_1.useListModel.requiredConfig,
+})(config => {
+    var _a;
+    const isControlled = config.selectedIds !== undefined;
+    const selection = config.selection ||
+        (config.mode === 'multiple' ? collection_1.multiSelectionManager : collection_1.singleSelectionManager);
+    const listModel = (0, collection_1.useListModel)(collection_1.useListModel.mergeConfig(config, {
+        orientation: config.orientation || 'horizontal',
+        selection,
+        initialSelectedIds: config.selectedIds || config.initialSelectedIds,
+        shouldVirtualize: false,
+        // `mergeConfig` combines this with a `shouldSelect` from the consumer rather than replacing
+        // it. Guarding here means a blocked selection never reaches `onSelect`.
+        shouldSelect: () => !config.disabled,
+    }));
+    // A single-select group is a radio group, so selection follows focus while arrowing through
+    // items. The cursor events below set this, and the effect selects whatever the cursor landed on.
+    const shouldSelectCursorRef = react_1.default.useRef(false);
+    // A navigation event doesn't always move the cursor - a single-item group, or a non-wrapping
+    // navigation manager at either end of the list, leaves it where it is. Counting the events gives
+    // the effect below something that always changes, so an arrow key still selects in those cases.
+    const [navigationCount, setNavigationCount] = react_1.default.useState(0);
+    const state = {
+        ...listModel.state,
+        mode: config.mode,
+        width: config.width,
+        disabled: config.disabled,
+        error: config.error,
+        'aria-invalid': (_a = config['aria-invalid']) !== null && _a !== void 0 ? _a : (config.error === 'error' ? true : undefined),
+        'aria-describedby': config['aria-describedby'],
+        selectedIds: isControlled ? config.selectedIds : listModel.state.selectedIds,
+    };
+    const navigationEvents = Object.keys(listModel.events).filter(name => name.startsWith('goTo') && name !== 'goTo');
+    const selectFollowsFocusEvents = navigationEvents.reduce((result, eventName) => {
+        result[eventName] = asWrappedEvent(() => {
+            // Let the cursor model resolve the target and move the cursor. Navigation skips
+            // `nonInteractiveIds`, so this can't land selection on a non-interactive item.
+            listModel.events[eventName]();
+            shouldSelectCursorRef.current = true;
+            setNavigationCount(count => count + 1);
+        });
+        return result;
+    }, {});
+    const events = {
+        ...listModel.events,
+        ...(config.mode === 'single' ? selectFollowsFocusEvents : {}),
+    };
+    const { cursorId } = listModel.state;
+    react_1.default.useEffect(() => {
+        if (!shouldSelectCursorRef.current) {
+            return;
+        }
+        shouldSelectCursorRef.current = false;
+        if (typeof cursorId === 'string' && cursorId && !state.nonInteractiveIds.includes(cursorId)) {
+            listModel.events.select({ id: cursorId });
+        }
+        // Selection follows the cursor, so this should only run after a navigation event, whether or
+        // not that event moved the cursor.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cursorId, navigationCount]);
+    return {
+        ...listModel,
+        state,
+        events,
+    };
+});

package/dist/commonjs/version/lib/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = void 0;
-exports.version = '16.1.4';
+exports.version = '16.1.1';

package/dist/es6/ai-ingress-button/lib/AIIngressButton.js

@@ -23,20 +23,20 @@ const glowHappyHour = base.legacy.orange400; //'#FD7E00';
 const glowThumbtack = base.legacy.coral500; //'#FC5B05';
 export const AIIngressButtonStencil = createStencil({
     extends: buttonStencil,
-    base: { name: "3y2rey", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));height:calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));width:calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
+    base: { name: "47qtme", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));height:calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));width:calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
     modifiers: {
         variant: {
-            inverse: { name: "1robgx", styles: "--background-button-a19f67:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1))) ;}" }
+            inverse: { name: "1t8dql", styles: "--background-button-a19f67:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1))) ;}" }
         },
         toggled: {
-            true: { name: "2my6pq", styles: "--background-button-a19f67:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100, oklch(0.9567 0.0948 100.22 / 1)), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400, oklch(0.7261 0.1852 52.58 / 1)), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500, oklch(0.6779 0.2096 40.36 / 1)), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21))) ;}" },
-            false: { name: "f6nxh", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
+            true: { name: "3vjc4x", styles: "--background-button-a19f67:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100, oklch(0.9567 0.0948 100.22 / 1)), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400, oklch(0.7261 0.1852 52.58 / 1)), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500, oklch(0.6779 0.2096 40.36 / 1)), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21))) ;}" },
+            false: { name: "2koy36", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
         }
     },
     compound: [
         {
             modifiers: { toggled: true, variant: 'inverse' },
-            styles: { name: "vw7qj", styles: "--background-button-a19f67:var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
+            styles: { name: "i3mww", styles: "--background-button-a19f67:var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
         }
     ]
 }, "a-i-ingress-button-5576f1");

package/dist/es6/index.d.ts

@@ -1,4 +1,5 @@
 export * from './ai-ingress-button';
 export * from './kbd';
+export * from './selection-group';
 export * from './version';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,OAAO,CAAC;AACtB,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC"}

package/dist/es6/index.js

@@ -1,3 +1,4 @@
 export * from './ai-ingress-button';
 export * from './kbd';
+export * from './selection-group';
 export * from './version';

package/dist/es6/kbd/lib/KBD.js

@@ -6,16 +6,16 @@ import { system } from '@workday/canvas-tokens-web';
 import { KBDItem } from './KBDItem';
 import { useKBDModel } from './useKBDModel';
 export const kbdStencil = createStencil({
-    base: { name: "3zeg9c", styles: "box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));" },
+    base: { name: "h216m", styles: "box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));" },
     modifiers: {
         variant: {
-            plain: { name: "3r062y", styles: "color:var(--cnvs-sys-color-fg-muted-default);" },
-            default: { name: "3wgvyf", styles: "color:var(--cnvs-sys-color-fg-muted-strong);" }
+            plain: { name: "8rd0k", styles: "color:var(--cnvs-sys-color-fg-muted-default);" },
+            default: { name: "2t54nj", styles: "color:var(--cnvs-sys-color-fg-muted-strong);" }
         },
         size: {
-            large: { name: "3my3m5", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg);font-size:var(--cnvs-sys-font-size-subtext-lg);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg);}" },
-            medium: { name: "3w5psf", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-md);font-size:var(--cnvs-sys-font-size-subtext-md);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md);}" },
-            small: { name: "1clfv3", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-sm);font-size:var(--cnvs-sys-font-size-subtext-sm);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm);}" }
+            large: { name: "39p0w4", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg);font-size:var(--cnvs-sys-font-size-subtext-lg);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg);}" },
+            medium: { name: "73akr", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-md);font-size:var(--cnvs-sys-font-size-subtext-md);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md);}" },
+            small: { name: "3lre8l", styles: "span{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-sm);font-size:var(--cnvs-sys-font-size-subtext-sm);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm);}" }
         }
     }
 }, "kbd-482771");

package/dist/es6/kbd/lib/KBDItem.js

@@ -6,11 +6,11 @@ import { system } from '@workday/canvas-tokens-web';
 import { useKBDModel } from './useKBDModel';
 export const kbdItemStencil = createStencil({
     extends: cornerShapeStencil,
-    base: { name: "3r540k", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));text-align:center;display:flex;align-items:center;justify-content:center;" },
+    base: { name: "2brg4k", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));text-align:center;display:flex;align-items:center;justify-content:center;" },
     modifiers: {
         variant: {
-            plain: { name: "4s8jb", styles: "background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-radius:0;corner-shape:unset;" },
-            default: { name: "usg5q", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, oklch(0 0 0 / 0.0392));" }
+            plain: { name: "3swtn1", styles: "background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-radius:0;corner-shape:unset;" },
+            default: { name: "21uhlk", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, oklch(0 0 0 / 0.0392));" }
         }
     },
     compound: [
@@ -19,21 +19,21 @@ export const kbdItemStencil = createStencil({
                 size: 'large',
                 variant: 'default',
             },
-            styles: { name: "1umi75", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));padding:0.125rem var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" }
+            styles: { name: "1g863o", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));padding:0.125rem var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" }
         },
         {
             modifiers: {
                 size: 'medium',
                 variant: 'default',
             },
-            styles: { name: "12ti8n", styles: "min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0.125rem var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" }
+            styles: { name: "2vqvjc", styles: "min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0.125rem var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" }
         },
         {
             modifiers: {
                 size: 'small',
                 variant: 'default',
             },
-            styles: { name: "36dtwp", styles: "min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));padding-inline:0.125rem;" }
+            styles: { name: "1lr3wq", styles: "min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));padding-inline:0.125rem;" }
         }
     ]
 }, "kbd-item-9a5f62");

package/dist/es6/selection-group/index.d.ts

@@ -0,0 +1,7 @@
+export * from './lib/SelectionGroup';
+export * from './lib/SelectionGroupIcon';
+export * from './lib/SelectionGroupList';
+export * from './lib/SelectionGroupItem';
+export * from './lib/hooks/useSelectionGroupModel';
+export * from './lib/hooks/useSelectionGroupItem';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/selection-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../selection-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC"}

package/dist/es6/selection-group/index.js

@@ -0,0 +1,6 @@
+export * from './lib/SelectionGroup';
+export * from './lib/SelectionGroupIcon';
+export * from './lib/SelectionGroupList';
+export * from './lib/SelectionGroupItem';
+export * from './lib/hooks/useSelectionGroupModel';
+export * from './lib/hooks/useSelectionGroupItem';