@workday/canvas-kit-docs 13.0.0-alpha.1102-next.0 → 13.0.0-alpha.1104-next.0

package/dist/es6/lib/docs.js

@@ -48542,10 +48542,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               {
                 "kind": "string",
                 "value": "horizontalEnd"
-              },
-              {
-                "kind": "string",
-                "value": "horizontal"
               }
             ]
           },
@@ -49026,10 +49022,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               {
                 "kind": "string",
                 "value": "horizontalEnd"
-              },
-              {
-                "kind": "string",
-                "value": "horizontal"
               }
             ]
           },
@@ -169807,10 +169799,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               {
                 "kind": "string",
                 "value": "horizontalEnd"
-              },
-              {
-                "kind": "string",
-                "value": "horizontal"
               }
             ]
           },
@@ -169825,8 +169813,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "default": "vertical"
           },
           "defaultValue": {
-            "kind": "symbol",
-            "name": "vertical",
+            "kind": "string",
             "value": "vertical"
           }
         },
@@ -170061,7 +170048,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         {
           "name": "Field",
           "symbol": "FormFieldField",
-          "description": "`FormField.Field` allows you to customize container alignment and styles when wrapping your input and hint text.\n```tsx\n<FormField orientation=\"horizontal\">\n   <FormField.Label>First Name</FormField.Label>\n   <FormField.Field>\n     <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />\n     <FormField.Hint>This is your hint text</FormField.Hint>\n   </FormField.Field>\n </FormField>\n```",
+          "description": "`FormField.Field` allows you to customize container alignment and styles when wrapping your input and hint text.\n```tsx\n<FormField orientation=\"horizontalStart\">\n   <FormField.Label>First Name</FormField.Label>\n   <FormField.Field>\n     <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />\n     <FormField.Hint>This is your hint text</FormField.Hint>\n   </FormField.Field>\n </FormField>\n```",
           "declarations": [
             {
               "name": "Field",
@@ -171805,10 +171792,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               {
                 "kind": "string",
                 "value": "horizontalEnd"
-              },
-              {
-                "kind": "string",
-                "value": "horizontal"
               }
             ]
           },
@@ -176606,10 +176589,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "type": {
             "kind": "union",
             "value": [
-              {
-                "kind": "string",
-                "value": "horizontal"
-              },
               {
                 "kind": "string",
                 "value": "vertical"
@@ -176721,10 +176700,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "type": {
             "kind": "union",
             "value": [
-              {
-                "kind": "string",
-                "value": "horizontal"
-              },
               {
                 "kind": "string",
                 "value": "vertical"
@@ -176856,10 +176831,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "type": {
             "kind": "union",
             "value": [
-              {
-                "kind": "string",
-                "value": "horizontal"
-              },
               {
                 "kind": "string",
                 "value": "vertical"
@@ -176966,10 +176937,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "type": {
             "kind": "union",
             "value": [
-              {
-                "kind": "string",
-                "value": "horizontal"
-              },
               {
                 "kind": "string",
                 "value": "vertical"

package/dist/es6/mdx/style-props/examples/Background.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     color: 'blackPepper500',
@@ -9,5 +9,5 @@ const baseStyles = {
     padding: 'xs',
 };
 export const Background = () => {
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { backgroundColor: "cinnamon300", ...baseStyles, children: "Cinnamon 300" }), _jsx(Box, { backgroundColor: "sourLemon300", ...baseStyles, children: "Sour Lemon 300" }), _jsx(Box, { backgroundColor: "blueberry300", ...baseStyles, children: "Blueberry 300" })] }));
+    return (_jsxs("div", { children: [_jsx(Box, { backgroundColor: "cinnamon300", ...baseStyles, children: "Cinnamon 300" }), _jsx(Box, { backgroundColor: "sourLemon300", ...baseStyles, children: "Sour Lemon 300" }), _jsx(Box, { backgroundColor: "blueberry300", ...baseStyles, children: "Blueberry 300" })] }));
 };

package/dist/es6/mdx/style-props/examples/Border.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     color: 'blackPepper300',
@@ -8,4 +8,4 @@ const baseStyles = {
     minWidth: '8rem',
     padding: 'xs',
 };
-export const Border = () => (_jsxs(_Fragment, { children: [_jsx(Box, { borderRadius: "m", border: "solid 4px", borderColor: "cinnamon300", ...baseStyles, children: "Cinnamon 300" }), _jsx(Box, { borderRadius: "m", border: "solid 4px", borderColor: "sourLemon300", ...baseStyles, children: "Sour Lemon 300" }), _jsx(Box, { borderRadius: "m", border: "solid 4px", borderColor: "blueberry300", ...baseStyles, children: "Blueberry 300" })] }));
+export const Border = () => (_jsxs("div", { children: [_jsx(Box, { borderRadius: "m", border: "solid 4px", borderColor: "cinnamon300", ...baseStyles, children: "Cinnamon 300" }), _jsx(Box, { borderRadius: "m", border: "solid 4px", borderColor: "sourLemon300", ...baseStyles, children: "Sour Lemon 300" }), _jsx(Box, { borderRadius: "m", border: "solid 4px", borderColor: "blueberry300", ...baseStyles, children: "Blueberry 300" })] }));

package/dist/es6/mdx/style-props/examples/Color.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     display: 'inline-block',
@@ -7,4 +7,4 @@ const baseStyles = {
     minWidth: '8rem',
     padding: 'xs',
 };
-export const Color = () => (_jsxs(_Fragment, { children: [_jsx(Box, { backgroundColor: "cinnamon300", color: "blackPepper500", ...baseStyles, children: "Cinnamon 300" }), _jsx(Box, { backgroundColor: "sourLemon300", color: "blackPepper500", ...baseStyles, children: "Sour Lemon 300" }), _jsx(Box, { backgroundColor: "blueberry300", color: "blackPepper500", ...baseStyles, children: "Blueberry 300" })] }));
+export const Color = () => (_jsxs("div", { children: [_jsx(Box, { backgroundColor: "cinnamon300", color: "blackPepper500", ...baseStyles, children: "Cinnamon 300" }), _jsx(Box, { backgroundColor: "sourLemon300", color: "blackPepper500", ...baseStyles, children: "Sour Lemon 300" }), _jsx(Box, { backgroundColor: "blueberry300", color: "blackPepper500", ...baseStyles, children: "Blueberry 300" })] }));

package/dist/es6/mdx/style-props/examples/Depth.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     color: 'blackPepper500',
@@ -8,4 +8,4 @@ const baseStyles = {
     minWidth: '8rem',
     padding: 'xs',
 };
-export const Depth = () => (_jsxs(_Fragment, { children: [_jsx(Box, { backgroundColor: "cinnamon300", depth: 1, ...baseStyles, children: "Depth 1" }), _jsx(Box, { backgroundColor: "sourLemon300", depth: 2, ...baseStyles, children: "Depth 2" }), _jsx(Box, { backgroundColor: "blueberry300", depth: 3, ...baseStyles, children: "Depth 3" })] }));
+export const Depth = () => (_jsxs("div", { children: [_jsx(Box, { backgroundColor: "cinnamon300", depth: 1, ...baseStyles, children: "Depth 1" }), _jsx(Box, { backgroundColor: "sourLemon300", depth: 2, ...baseStyles, children: "Depth 2" }), _jsx(Box, { backgroundColor: "blueberry300", depth: 3, ...baseStyles, children: "Depth 3" })] }));

package/dist/es6/mdx/style-props/examples/Position.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     color: 'blackPepper500',
@@ -8,5 +8,5 @@ const baseStyles = {
     padding: 'xs',
 };
 export const Position = () => {
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { backgroundColor: "cinnamon300", left: 0, position: "absolute", top: "calc(50% - 20px)", zIndex: 1, textAlign: "center", ...baseStyles, children: "Left" }), _jsx(Box, { backgroundColor: "sourLemon300", left: `calc(50% - 4rem)`, position: "absolute", top: "calc(50% - 20px)", zIndex: 2, textAlign: "center", ...baseStyles, children: "Center" }), _jsx(Box, { backgroundColor: "blueberry300", position: "absolute", right: 0, top: "calc(50% - 20px)", zIndex: 3, textAlign: "center", ...baseStyles, children: "Right" })] }));
+    return (_jsxs("div", { children: [_jsx(Box, { backgroundColor: "cinnamon300", left: 0, position: "absolute", top: "calc(50% - 20px)", zIndex: 1, textAlign: "center", ...baseStyles, children: "Left" }), _jsx(Box, { backgroundColor: "sourLemon300", left: `calc(50% - 4rem)`, position: "absolute", top: "calc(50% - 20px)", zIndex: 2, textAlign: "center", ...baseStyles, children: "Center" }), _jsx(Box, { backgroundColor: "blueberry300", position: "absolute", right: 0, top: "calc(50% - 20px)", zIndex: 3, textAlign: "center", ...baseStyles, children: "Right" })] }));
 };

package/dist/es6/mdx/style-props/examples/Space.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     border: 'dotted 2px',
@@ -6,4 +6,4 @@ const baseStyles = {
     display: 'inline-block',
     verticalAlign: 'bottom',
 };
-export const Space = () => (_jsxs(_Fragment, { children: [_jsx(Box, { backgroundColor: "cinnamon300", margin: "xxs", padding: "s", textAlign: "center", ...baseStyles, children: _jsx(Box, { border: "dotted 2px", borderColor: "blackPepper500", children: "Small" }) }), _jsx(Box, { backgroundColor: "sourLemon300", margin: "xxs", padding: "m", textAlign: "center", ...baseStyles, children: _jsx(Box, { border: "dotted 2px", borderColor: "blackPepper500", children: "Medium" }) }), _jsx(Box, { backgroundColor: "blueberry300", margin: "xxs", padding: "l", textAlign: "center", ...baseStyles, children: _jsx(Box, { border: "dotted 2px", borderColor: "blackPepper500", children: "Large" }) })] }));
+export const Space = () => (_jsxs("div", { children: [_jsx(Box, { backgroundColor: "cinnamon300", margin: "xxs", padding: "s", textAlign: "center", ...baseStyles, children: _jsx(Box, { border: "dotted 2px", borderColor: "blackPepper500", children: "Small" }) }), _jsx(Box, { backgroundColor: "sourLemon300", margin: "xxs", padding: "m", textAlign: "center", ...baseStyles, children: _jsx(Box, { border: "dotted 2px", borderColor: "blackPepper500", children: "Medium" }) }), _jsx(Box, { backgroundColor: "blueberry300", margin: "xxs", padding: "l", textAlign: "center", ...baseStyles, children: _jsx(Box, { border: "dotted 2px", borderColor: "blackPepper500", children: "Large" }) })] }));

package/dist/mdx/13.0-UPGRADE-GUIDE.mdx

@@ -21,6 +21,7 @@ any questions.
   - [Avatar](#avatar)
   - [Expandable](#expandable)
   - [External Hyperlink](#external-hyperlink)
+	- [Form Field and Form Field Group](#form-field-and-form-field-group)
   - [Pill](#pill)
   - [Tabs](#tabs)
 - [Brand Refresh](#brand-refresh)
@@ -169,9 +170,35 @@ import {Expandable} from '@workday/canvas-kit-react/expandable';
 </ExternalHyperlink>
 ```
 
+### Form Field and Form Field Group
+**PR:** [#3101](https://github.com/Workday/canvas-kit/pull/3101)
+
+The `orientation` prop on `FormField` component has been updated to remove the deprecated `horizontal` value. v12 had a codemod to update this value to `horizontalStart`. In v13, we've dropped `horizontal` as a value.` You must update your code to use `horizontalStart`.
+
+**Before in v12**
+```tsx
+<FormField orientation="horizontal">
+	<FormField.Label>Label</FormField.Label>
+	<FormField.Field>
+		<FormField.Input as={TextInput} />
+	<FormField.Field>
+</FormField>
+```
+
+**After in v13**
+```tsx
+<FormField orientation="horizontalStart">
+	<FormField.Label>Label</FormField.Label>
+	<FormField.Field>
+		<FormField.Input as={TextInput} />
+	<FormField.Field>
+</FormField>
+```
+
+
 ### Pill
 
-**PRs:** [#3104](https://github.com/Workday/canvas-kit/pull/3104)
+**PR:** [#3104](https://github.com/Workday/canvas-kit/pull/3104)
 
 A few changes have been made to `Pill` to ensure proper accessibility and styles.
 

package/dist/mdx/preview-react/loading-sparkles/examples/Basic.tsx

@@ -35,7 +35,7 @@ export default () => {
   };
 
   return (
-    <>
+    <div>
       <div className={containerStyles}>
         {quote && <Text cs={{maxWidth: '60ch'}}>{quote}</Text>}
         <AriaLiveRegion>
@@ -46,7 +46,7 @@ export default () => {
         </AriaLiveRegion>
       </div>
       <SecondaryButton onClick={handleClick}>Generate Quote</SecondaryButton>
-    </>
+    </div>
   );
 };
 

package/dist/mdx/preview-react/multi-select/examples/Basic.tsx

@@ -9,7 +9,7 @@ export default () => {
   return (
     <>
       <MultiSelect items={items} initialSelectedIds={['Olives', 'Onions', 'Pepperoni']}>
-        <FormField orientation="horizontal">
+        <FormField orientation="horizontalStart">
           <FormField.Label>Toppings</FormField.Label>
           <FormField.Input
             as={MultiSelect.Input}

package/dist/mdx/preview-react/multi-select/examples/Complex.tsx

@@ -34,7 +34,7 @@ export default () => {
         >
           <main className={mainContentStyles}>
             <MultiSelect items={items} getId={i => i.id} getTextValue={i => i.text}>
-              <FormField orientation="horizontal">
+              <FormField orientation="horizontalStart">
                 <FormField.Label>Toppings</FormField.Label>
                 <FormField.Input
                   as={MultiSelect.Input}

package/dist/mdx/preview-react/multi-select/examples/Controlled.tsx

@@ -41,7 +41,7 @@ export default () => {
       >
         <Flex gap="s" flexDirection="column">
           <MultiSelect items={items}>
-            <FormField orientation="horizontal">
+            <FormField orientation="horizontalStart">
               <FormField.Label>Toppings</FormField.Label>
               <FormField.Input
                 as={MultiSelect.Input}

package/dist/mdx/preview-react/multi-select/examples/Icons.tsx

@@ -21,7 +21,7 @@ const items = [
 export default () => {
   return (
     <MultiSelect items={items}>
-      <FormField orientation="horizontal">
+      <FormField orientation="horizontalStart">
         <FormField.Label>Controls</FormField.Label>
         <FormField.Input
           as={MultiSelect.Input}

package/dist/mdx/preview-react/multi-select/examples/Searching.tsx

@@ -83,7 +83,7 @@ export default () => {
         >
           <main className={mainContentStyles}>
             <MultiSelect model={model}>
-              <FormField orientation="horizontal">
+              <FormField orientation="horizontalStart">
                 <FormField.Label>Fruits</FormField.Label>
                 <FormField.Input
                   as={MultiSelect.SearchInput}

package/dist/mdx/preview-react/select/examples/Left Label/DefaultWithCustomOptionsLeft.tsx

@@ -7,7 +7,7 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export default () => {
   return (
-    <FormField orientation="horizontal" id="select-default-custom">
+    <FormField orientation="horizontalStart" id="select-default-custom">
       <FormField.Label>Label</FormField.Label>
       <FormField.Field>
         {controlComponent(

package/dist/mdx/preview-react/select/examples/Left Label/DefaultWithSimpleOptionsLeft.tsx

@@ -7,7 +7,7 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export default () => {
   return (
-    <FormField orientation="horizontal" id="select-default-simple">
+    <FormField orientation="horizontalStart" id="select-default-simple">
       <FormField.Label>Label</FormField.Label>
       <FormField.Field>
         {controlComponent(<FormField.Input as={Select} name="state" options={simpleOptions} />)}

package/dist/mdx/react/expandable/examples/Avatar.tsx

@@ -3,7 +3,7 @@ import {Expandable} from '@workday/canvas-kit-react/expandable';
 import testAvatar from './test-avatar.png';
 
 export default () => (
-  <>
+  <div>
     <Expandable>
       <Expandable.Target headingLevel="h4">
         <Expandable.Icon iconPosition="start" />
@@ -22,5 +22,5 @@ export default () => (
 
       <Expandable.Content>Content</Expandable.Content>
     </Expandable>
-  </>
+  </div>
 );

package/dist/mdx/style-props/examples/Background.tsx

@@ -11,7 +11,7 @@ const baseStyles = {
 
 export default () => {
   return (
-    <>
+    <div>
       <Box backgroundColor="cinnamon300" {...baseStyles}>
         Cinnamon 300
       </Box>
@@ -21,6 +21,6 @@ export default () => {
       <Box backgroundColor="blueberry300" {...baseStyles}>
         Blueberry 300
       </Box>
-    </>
+    </div>
   );
 };

package/dist/mdx/style-props/examples/Border.tsx

@@ -10,7 +10,7 @@ const baseStyles = {
 };
 
 export default () => (
-  <>
+  <div>
     <Box borderRadius="m" border="solid 4px" borderColor="cinnamon300" {...baseStyles}>
       Cinnamon 300
     </Box>
@@ -20,5 +20,5 @@ export default () => (
     <Box borderRadius="m" border="solid 4px" borderColor="blueberry300" {...baseStyles}>
       Blueberry 300
     </Box>
-  </>
+  </div>
 );

package/dist/mdx/style-props/examples/Color.tsx

@@ -9,7 +9,7 @@ const baseStyles = {
 };
 
 export default () => (
-  <>
+  <div>
     <Box backgroundColor="cinnamon300" color="blackPepper500" {...baseStyles}>
       Cinnamon 300
     </Box>
@@ -19,5 +19,5 @@ export default () => (
     <Box backgroundColor="blueberry300" color="blackPepper500" {...baseStyles}>
       Blueberry 300
     </Box>
-  </>
+  </div>
 );

package/dist/mdx/style-props/examples/Depth.tsx

@@ -10,7 +10,7 @@ const baseStyles = {
 };
 
 export default () => (
-  <>
+  <div>
     <Box backgroundColor="cinnamon300" depth={1} {...baseStyles}>
       Depth 1
     </Box>
@@ -20,5 +20,5 @@ export default () => (
     <Box backgroundColor="blueberry300" depth={3} {...baseStyles}>
       Depth 3
     </Box>
-  </>
+  </div>
 );

package/dist/mdx/style-props/examples/Position.tsx

@@ -10,7 +10,7 @@ const baseStyles = {
 
 export default () => {
   return (
-    <>
+    <div>
       <Box
         backgroundColor="cinnamon300"
         left={0}
@@ -44,6 +44,6 @@ export default () => {
       >
         Right
       </Box>
-    </>
+    </div>
   );
 };

package/dist/mdx/style-props/examples/Space.tsx

@@ -8,7 +8,7 @@ const baseStyles = {
 };
 
 export default () => (
-  <>
+  <div>
     <Box backgroundColor="cinnamon300" margin="xxs" padding="s" textAlign="center" {...baseStyles}>
       <Box border="dotted 2px" borderColor="blackPepper500">
         Small
@@ -24,5 +24,5 @@ export default () => (
         Large
       </Box>
     </Box>
-  </>
+  </div>
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "13.0.0-alpha.1102-next.0",
+  "version": "13.0.0-alpha.1104-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.1102-next.0",
-    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.1102-next.0",
-    "@workday/canvas-kit-react": "^13.0.0-alpha.1102-next.0",
-    "@workday/canvas-kit-styling": "^13.0.0-alpha.1102-next.0",
+    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.1104-next.0",
+    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.1104-next.0",
+    "@workday/canvas-kit-react": "^13.0.0-alpha.1104-next.0",
+    "@workday/canvas-kit-styling": "^13.0.0-alpha.1104-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "2c842de731765e6eb61ea244fa7e4de5b07f78d9"
+  "gitHead": "82666a867a722cf5cc918d5cbc218300e7cacfb4"
 }