@workday/canvas-kit-preview-react 12.0.0-alpha.862-next.0 → 12.0.0-alpha.898-next.0

package/color-picker/lib/ColorPicker.tsx

@@ -3,11 +3,11 @@ import {checkIcon} from '@workday/canvas-system-icons-web';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import * as React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import styled from '@emotion/styled';
 
 import {ResetButton} from './parts/ColorReset';
-import {SwatchBook} from './parts/SwatchBook';
+import {SwatchBook, SwatchBookColorObject} from './parts/SwatchBook';
 
 export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -21,7 +21,7 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * The array of colors to be rendered in the swatchbook.
    */
-  colorSet?: string[];
+  colorSet?: string[] | SwatchBookColorObject[];
   /**
    * If true, render an input for entering a custom hex color.
    * @default false
@@ -149,13 +149,19 @@ const HexColorInput = styled(ColorInput)({
   width: '168px',
 });
 
-const isCustomColor = (colors: string[], hexCode?: string) => {
+const isCustomColor = (colors: (string | SwatchBookColorObject)[], hexCode?: string) => {
   if (!hexCode) {
     return false;
   }
 
   const lowercaseHex = hexCode.toLowerCase();
-  return !colors.includes(lowercaseHex);
+  return !colors.some((color: string | SwatchBookColorObject) => {
+    if (typeof color === 'string') {
+      return color.toLowerCase() === lowercaseHex;
+    } else {
+      return color.value.toLowerCase() === lowercaseHex;
+    }
+  });
 };
 
 export const ColorPicker = ({

package/color-picker/lib/parts/SwatchBook.tsx

@@ -4,8 +4,13 @@ import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 import {focusRing, mouseFocusBehavior} from '@workday/canvas-kit-react/common';
 import {ColorSwatch} from '@workday/canvas-kit-react/color-picker';
 
+export interface SwatchBookColorObject {
+  value: string;
+  label: string;
+}
+
 export interface SwatchBookProps {
-  colors: string[];
+  colors: (string | SwatchBookColorObject)[];
   value?: string;
   onSelect: (color: string) => void;
 }
@@ -58,26 +63,33 @@ const Container = styled('div')({
   margin: `0px -${space.xxs} -${space.xxs} 0px`,
 });
 
-export const SwatchBook = ({colors, value, onSelect}: SwatchBookProps) => (
-  <Container>
-    {colors.map((color, index) => {
-      const isSelected = value ? color.toLowerCase() === value.toLowerCase() : false;
+export const SwatchBook = ({colors, value, onSelect}: SwatchBookProps) => {
+  return (
+    <Container>
+      {colors.map((color: string | SwatchBookColorObject, index: number) => {
+        const hexCode = typeof color === 'object' ? color.value : color;
+        const label = typeof color === 'object' ? color.label : color;
+        const isSelected = value ? hexCode.toLowerCase() === value.toLowerCase() : false;
 
-      const handleClick = () => onSelect(color);
-      const handleKeyDown = (event: React.KeyboardEvent) =>
-        (event.key === 'Enter' || event.key === ' ') && onSelect(color);
+        const handleClick = () => onSelect(hexCode);
+        const handleKeyDown = (event: React.KeyboardEvent) =>
+          (event.key === 'Enter' || event.key === ' ') && onSelect(hexCode);
 
-      return (
-        <SwatchContainer
-          key={index + '-' + color}
-          onClick={handleClick}
-          onKeyDown={handleKeyDown}
-          tabIndex={0}
-          isSelected={isSelected}
-        >
-          <ColorSwatch color={color} showCheck={isSelected} />
-        </SwatchContainer>
-      );
-    })}
-  </Container>
-);
+        return (
+          <SwatchContainer
+            key={index + '-' + color}
+            onClick={handleClick}
+            onKeyDown={handleKeyDown}
+            tabIndex={0}
+            isSelected={isSelected}
+            role="button"
+            aria-label={label}
+            aria-selected={isSelected}
+          >
+            <ColorSwatch color={hexCode} showCheck={isSelected} />
+          </SwatchContainer>
+        );
+      })}
+    </Container>
+  );
+};

package/dist/commonjs/color-picker/lib/ColorPicker.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SwatchBookColorObject } from './parts/SwatchBook';
 export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The function called when the ColorPicker state changes.
@@ -11,7 +12,7 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The array of colors to be rendered in the swatchbook.
      */
-    colorSet?: string[];
+    colorSet?: string[] | SwatchBookColorObject[];
     /**
      * If true, render an input for entering a custom hex color.
      * @default false
@@ -48,7 +49,7 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
     resetLabel?: string;
 }
 export declare const ColorPicker: {
-    ({ colorSet, customHexInputLabel, submitLabel, onColorChange, onColorReset, onSubmitClick, resetLabel, resetColor, value, showCustomHexInput, ...elemProps }: ColorPickerProps): JSX.Element;
+    ({ colorSet, customHexInputLabel, submitLabel, onColorChange, onColorReset, onSubmitClick, resetLabel, resetColor, value, showCustomHexInput, ...elemProps }: ColorPickerProps): React.JSX.Element;
     defaultColorSet: string[];
 };
 //# sourceMappingURL=ColorPicker.d.ts.map

package/dist/commonjs/color-picker/lib/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CAsDlB,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAa,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAErE,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC9C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA4GD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CAsDlB,CAAC"}

package/dist/commonjs/color-picker/lib/ColorPicker.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -28,7 +32,7 @@ const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const color_picker_1 = require("@workday/canvas-kit-react/color-picker");
 const button_1 = require("@workday/canvas-kit-react/button");
 const React = __importStar(require("react"));
-const form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
+const form_field_1 = require("@workday/canvas-kit-react/form-field");
 const styled_1 = __importDefault(require("@emotion/styled"));
 const ColorReset_1 = require("./parts/ColorReset");
 const SwatchBook_1 = require("./parts/SwatchBook");
@@ -90,25 +94,25 @@ const defaultColorSet = [
     tokens_1.colors.frenchVanilla200,
     tokens_1.colors.frenchVanilla100,
 ];
-const ColorPickerContainer = styled_1.default('div')({
+const ColorPickerContainer = (0, styled_1.default)('div')({
     width: 216,
 });
-const ColorInputWrapper = styled_1.default('form')({
+const ColorInputWrapper = (0, styled_1.default)('form')({
     width: '100%',
     marginTop: tokens_1.space.s,
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
 });
-const ColorInputAndLabel = styled_1.default(form_field_1.FormField)({
+const ColorInputAndLabel = (0, styled_1.default)(form_field_1.FormField)({
     display: 'flex',
     flexDirection: 'column',
     margin: 0,
 });
-const CheckButton = styled_1.default(button_1.SecondaryButton)({
+const CheckButton = (0, styled_1.default)(button_1.SecondaryButton)({
     alignSelf: 'flex-end',
 });
-const HexColorInput = styled_1.default(color_picker_1.ColorInput)({
+const HexColorInput = (0, styled_1.default)(color_picker_1.ColorInput)({
     width: '168px',
 });
 const isCustomColor = (colors, hexCode) => {
@@ -116,7 +120,14 @@ const isCustomColor = (colors, hexCode) => {
         return false;
     }
     const lowercaseHex = hexCode.toLowerCase();
-    return !colors.includes(lowercaseHex);
+    return !colors.some((color) => {
+        if (typeof color === 'string') {
+            return color.toLowerCase() === lowercaseHex;
+        }
+        else {
+            return color.value.toLowerCase() === lowercaseHex;
+        }
+    });
 };
 const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel = 'Custom Hex Color', submitLabel = 'Submit', onColorChange, onColorReset, onSubmitClick, resetLabel = 'Reset', resetColor, value = '', showCustomHexInput = false, ...elemProps }) => {
     const [validHexValue, setValidHexValue] = React.useState('');
@@ -138,7 +149,7 @@ const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel = 'Custom
         onColorChange(validHexValue);
         event.preventDefault(); // don't submit the form - default action is to reload the page
     };
-    return (React.createElement(ColorPickerContainer, Object.assign({}, elemProps),
+    return (React.createElement(ColorPickerContainer, { ...elemProps },
         onColorReset && resetColor && (React.createElement(ColorReset_1.ResetButton, { onClick: onColorReset, resetColor: resetColor, label: resetLabel })),
         React.createElement(SwatchBook_1.SwatchBook, { colors: colorSet, onSelect: onColorChange, value: value }),
         showCustomHexInput && (React.createElement(ColorInputWrapper, { onSubmit: onSubmit },

package/dist/commonjs/color-picker/lib/parts/ColorReset.d.ts

@@ -1,7 +1,8 @@
+import * as React from 'react';
 export interface ResetButtonProps {
     label: string;
     resetColor: string;
     onClick: (color: string) => void;
 }
-export declare const ResetButton: ({ onClick, resetColor, label }: ResetButtonProps) => JSX.Element;
+export declare const ResetButton: ({ onClick, resetColor, label }: ResetButtonProps) => React.JSX.Element;
 //# sourceMappingURL=ColorReset.d.ts.map

package/dist/commonjs/color-picker/lib/parts/ColorReset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorReset.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/ColorReset.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAoCD,eAAO,MAAM,WAAW,mCAAkC,gBAAgB,gBASzE,CAAC"}
+{"version":3,"file":"ColorReset.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/ColorReset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAoCD,eAAO,MAAM,WAAW,mCAAkC,gBAAgB,sBASzE,CAAC"}

package/dist/commonjs/color-picker/lib/parts/ColorReset.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -28,10 +32,10 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
 const color_picker_1 = require("@workday/canvas-kit-react/color-picker");
-const Label = styled_1.default('div')({
+const Label = (0, styled_1.default)('div')({
     marginLeft: tokens_1.space.xxs,
 });
-const Container = styled_1.default('button')({
+const Container = (0, styled_1.default)('button')({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-start',
@@ -53,7 +57,7 @@ const Container = styled_1.default('button')({
         backgroundColor: tokens_1.colors.soap400,
     },
     '&:focus': {
-        ...common_1.focusRing(),
+        ...(0, common_1.focusRing)(),
     },
     ...common_1.hideMouseFocus,
 });

package/dist/commonjs/color-picker/lib/parts/SwatchBook.d.ts

@@ -1,7 +1,12 @@
+import * as React from 'react';
+export interface SwatchBookColorObject {
+    value: string;
+    label: string;
+}
 export interface SwatchBookProps {
-    colors: string[];
+    colors: (string | SwatchBookColorObject)[];
     value?: string;
     onSelect: (color: string) => void;
 }
-export declare const SwatchBook: ({ colors, value, onSelect }: SwatchBookProps) => JSX.Element;
+export declare const SwatchBook: ({ colors, value, onSelect }: SwatchBookProps) => React.JSX.Element;
 //# sourceMappingURL=SwatchBook.d.ts.map

package/dist/commonjs/color-picker/lib/parts/SwatchBook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwatchBook.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/SwatchBook.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAkDD,eAAO,MAAM,UAAU,gCAA+B,eAAe,gBAsBpE,CAAC"}
+{"version":3,"file":"SwatchBook.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/SwatchBook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,CAAC,MAAM,GAAG,qBAAqB,CAAC,EAAE,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAkDD,eAAO,MAAM,UAAU,gCAA+B,eAAe,sBA6BpE,CAAC"}

package/dist/commonjs/color-picker/lib/parts/SwatchBook.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -29,7 +33,7 @@ const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
 const color_picker_1 = require("@workday/canvas-kit-react/color-picker");
 const accessibilityBorder = `${tokens_1.colors.frenchVanilla100} 0px 0px 0px 2px, ${tokens_1.colors.licorice200} 0px 0px 0px 3px`;
-const SwatchContainer = styled_1.default('div')({
+const SwatchContainer = (0, styled_1.default)('div')({
     display: 'flex',
     width: 20,
     height: 20,
@@ -42,11 +46,11 @@ const SwatchContainer = styled_1.default('div')({
     },
     '&:focus': {
         outline: 'none',
-        ...common_1.focusRing({ separation: 2 }),
+        ...(0, common_1.focusRing)({ separation: 2 }),
     },
 }, ({ isSelected }) => ({
     boxShadow: isSelected ? accessibilityBorder : undefined,
-    ...common_1.mouseFocusBehavior({
+    ...(0, common_1.mouseFocusBehavior)({
         '&:focus': {
             animation: 'none',
             boxShadow: 'none',
@@ -59,16 +63,20 @@ const SwatchContainer = styled_1.default('div')({
         },
     }),
 }));
-const Container = styled_1.default('div')({
+const Container = (0, styled_1.default)('div')({
     display: 'flex',
     flexWrap: 'wrap',
     margin: `0px -${tokens_1.space.xxs} -${tokens_1.space.xxs} 0px`,
 });
-const SwatchBook = ({ colors, value, onSelect }) => (React.createElement(Container, null, colors.map((color, index) => {
-    const isSelected = value ? color.toLowerCase() === value.toLowerCase() : false;
-    const handleClick = () => onSelect(color);
-    const handleKeyDown = (event) => (event.key === 'Enter' || event.key === ' ') && onSelect(color);
-    return (React.createElement(SwatchContainer, { key: index + '-' + color, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, isSelected: isSelected },
-        React.createElement(color_picker_1.ColorSwatch, { color: color, showCheck: isSelected })));
-})));
+const SwatchBook = ({ colors, value, onSelect }) => {
+    return (React.createElement(Container, null, colors.map((color, index) => {
+        const hexCode = typeof color === 'object' ? color.value : color;
+        const label = typeof color === 'object' ? color.label : color;
+        const isSelected = value ? hexCode.toLowerCase() === value.toLowerCase() : false;
+        const handleClick = () => onSelect(hexCode);
+        const handleKeyDown = (event) => (event.key === 'Enter' || event.key === ' ') && onSelect(hexCode);
+        return (React.createElement(SwatchContainer, { key: index + '-' + color, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, isSelected: isSelected, role: "button", "aria-label": label, "aria-selected": isSelected },
+            React.createElement(color_picker_1.ColorSwatch, { color: hexCode, showCheck: isSelected })));
+    })));
+};
 exports.SwatchBook = SwatchBook;

package/dist/commonjs/divider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/Divider';
+//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/divider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../divider/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/commonjs/{form-field/lib/hooks → divider}/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -10,8 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./useFormFieldOrientation"), exports);
-__exportStar(require("./useFormFieldHint"), exports);
-__exportStar(require("./useFormFieldInput"), exports);
-__exportStar(require("./useFormFieldModel"), exports);
-__exportStar(require("./useFormFieldLabel"), exports);
+__exportStar(require("./lib/Divider"), exports);

package/dist/commonjs/divider/lib/Divider.d.ts

@@ -0,0 +1,34 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+export declare const dividerStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
+    space: string;
+}, never>, {
+    space: string;
+}, never, never>;
+export interface DividerProps extends CSProps {
+    /**
+     * Applies top and bottom margin evenly. It divides the provided value by two and applies half to each end.
+     * E.g. `space="2rem"` would apply `1rem` margin to the top, and `1rem` margin to the bottom.
+     * @default `system.space.x4` (1rem)
+     */
+    space?: string;
+}
+/**
+ * # Divider
+ * A divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.
+ *
+ * [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider-react)
+ *
+ * The `space` prop will equally apply top and bottom margin styles.
+ * In the example below, `x2` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
+ *
+ * @example
+ * ```tsx
+ * import { Divider } from '@workday/canvas-kit-preview-react/divider';
+ * import {system} from '@workday/canvas-tokens-web';
+ *
+ * <Divider space={system.space.x2} />
+ *
+ * ```
+ */
+export declare const Divider: import("@workday/canvas-kit-react/common").ElementComponent<"hr", DividerProps>;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/commonjs/divider/lib/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../divider/lib/Divider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,OAAO,EAIR,MAAM,6BAA6B,CAAC;AAGrC,eAAO,MAAM,cAAc;;;;gBAazB,CAAC;AAEH,MAAM,WAAW,YAAa,SAAQ,OAAO;IAC3C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,OAAO,iFAKlB,CAAC"}

package/dist/commonjs/divider/lib/Divider.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = exports.dividerStencil = void 0;
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+exports.dividerStencil = (0, canvas_kit_styling_1.createStencil)({
+    vars: {
+        space: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.space.x4),
+    },
+    base: { name: "d4qa2", styles: "--space-divider-156e29:var(--cnvs-sys-space-x4);box-sizing:border-box;display:block;height:0.0625rem;border:none;border-top:1px solid var(--cnvs-sys-color-border-divider);margin:calc(var(--space-divider-156e29) / 2) 0;" }
+}, "divider-156e29");
+/**
+ * # Divider
+ * A divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.
+ *
+ * [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider-react)
+ *
+ * The `space` prop will equally apply top and bottom margin styles.
+ * In the example below, `x2` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
+ *
+ * @example
+ * ```tsx
+ * import { Divider } from '@workday/canvas-kit-preview-react/divider';
+ * import {system} from '@workday/canvas-tokens-web';
+ *
+ * <Divider space={system.space.x2} />
+ *
+ * ```
+ */
+exports.Divider = (0, common_1.createComponent)('hr')({
+    displayName: 'Divider',
+    Component: ({ space, ...elemProps }, ref, Element) => (React.createElement(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.dividerStencil)({ space })) })),
+});

package/dist/commonjs/index.d.ts

@@ -1,12 +1,13 @@
 export * from './color-picker';
-export * from './form-field';
+export * from './divider';
 export * from './loading-sparkles';
 export * from './menu';
 export * from './pill';
+export * from './radio';
 export * from './segmented-control';
+export * from './select';
 export * from './side-panel';
 export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
-export * from './radio';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/commonjs/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -11,13 +15,14 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./color-picker"), exports);
-__exportStar(require("./form-field"), exports);
+__exportStar(require("./divider"), exports);
 __exportStar(require("./loading-sparkles"), exports);
 __exportStar(require("./menu"), exports);
 __exportStar(require("./pill"), exports);
+__exportStar(require("./radio"), exports);
 __exportStar(require("./segmented-control"), exports);
+__exportStar(require("./select"), exports);
 __exportStar(require("./side-panel"), exports);
 __exportStar(require("./status-indicator"), exports);
 __exportStar(require("./text-area"), exports);
 __exportStar(require("./text-input"), exports);
-__exportStar(require("./radio"), exports);

package/dist/commonjs/loading-sparkles/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -45,22 +49,22 @@ const AI_COLORS = {
 /**
  * The animation for the sparkle.
  */
-const LOADING_ANIMATION = canvas_kit_styling_1.keyframes({ name: "f41da9", styles: "0%, 79%, 100%{opacity:0.2;transform:scale(0.55);}27%{opacity:1;transform:scale(1);}53%{opacity:0.6;transform:scale(0.7);}" });
-const loadingSparklesIconStyles = canvas_kit_styling_1.createStyles({ name: "9b2442", styles: "animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-f41da9;animation-timing-function:ease-in-out;.wd-sparkle-fill{fill:#8C17D2;}&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}" });
+const LOADING_ANIMATION = (0, canvas_kit_styling_1.keyframes)({ name: "d4qa3", styles: "0%, 79%, 100%{opacity:0.2;transform:scale(0.55);}27%{opacity:1;transform:scale(1);}53%{opacity:0.6;transform:scale(0.7);}" });
+const loadingSparklesIconStyles = (0, canvas_kit_styling_1.createStyles)({ name: "d4qa4", styles: "animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-d4qa3;animation-timing-function:ease-in-out;.wd-sparkle-fill{fill:#8C17D2;}&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}" });
 /**
  * An individual loading sparkle. ✨
  */
 const Sparkle = () => {
-    return (React.createElement(icon_1.SystemIcon, { icon: sparkleIcon_1.sparkleIcon, cs: [loadingSparklesIconStyles], size: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3) }));
+    return (React.createElement(icon_1.SystemIcon, { icon: sparkleIcon_1.sparkleIcon, cs: [loadingSparklesIconStyles], size: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.space.x3) }));
 };
-const loadingSparklesStyles = canvas_kit_styling_1.createStyles({ name: "1af14c", styles: "display:inline-flex;gap:0.0625rem;" });
+const loadingSparklesStyles = (0, canvas_kit_styling_1.createStyles)({ name: "d4qa5", styles: "display:inline-flex;gap:0.0625rem;" });
 /**
  * A simple component that displays three horizontal sparkles, to be used when an AI operation is in progress.
  */
-exports.LoadingSparkles = common_1.createComponent('div')({
+exports.LoadingSparkles = (0, common_1.createComponent)('div')({
     displayName: 'LoadingSparkles',
     Component: (elemProps, ref, Element) => {
-        return (React.createElement(Element, Object.assign({ ref: ref, role: "status" }, canvas_kit_styling_1.handleCsProp(elemProps, loadingSparklesStyles)),
+        return (React.createElement(Element, { ref: ref, role: "status", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, loadingSparklesStyles) },
             React.createElement(Sparkle, null),
             React.createElement(Sparkle, null),
             React.createElement(Sparkle, null)));

package/dist/commonjs/menu/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/commonjs/menu/lib/Menu.d.ts

@@ -65,7 +65,7 @@ export declare class DeprecatedMenu extends React.Component<DeprecatedMenuProps,
     componentDidUpdate(prevProps: DeprecatedMenuProps): void;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     getNormalizedItemIndex: (index: number | undefined) => number;
     setNormalizedItemIndex: (index: number | undefined) => void;
     private handleKeyboardShortcuts;