@workday/canvas-kit-react 15.0.0-alpha.1303-next.0 → 15.0.0

package/tooltip/lib/Tooltip.tsx

@@ -1,18 +1,19 @@
 import * as React from 'react';
 import innerText from 'react-innertext';
 
+import {createComponent, mergeCallback, useLocalRef} from '@workday/canvas-kit-react/common';
 import {
-  getTransformFromPlacement,
   Placement,
   Popper,
   defaultFallbackPlacements,
+  getTransformFromPlacement,
 } from '@workday/canvas-kit-react/popup';
-import {createComponent, mergeCallback} from '@workday/canvas-kit-react/common';
+import {CSProps, handleCsProp} from '@workday/canvas-kit-styling';
 
 import {TooltipContainer} from './TooltipContainer';
 import {useTooltip} from './useTooltip';
 
-export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, CSProps {
   /**
    * This should be a string in most cases. HTML is supported, but only text is understood
    * by assistive technology. This is true for both `label` and `describe` modes.
@@ -82,14 +83,17 @@ function mergeCallbacks<T extends {[key: string]: any}>(
   componentProps: T,
   keys: (keyof T)[] = Object.keys(componentProps)
 ) {
-  return (keys as string[]).reduce((mergedProps, key) => {
-    if (typeof elemProps[key] === 'function') {
-      mergedProps[key] = mergeCallback(componentProps[key], elemProps[key]);
-    } else {
-      mergedProps[key] = componentProps[key];
-    }
-    return mergedProps;
-  }, {} as {[key: string]: any});
+  return (keys as string[]).reduce(
+    (mergedProps, key) => {
+      if (typeof elemProps[key] === 'function') {
+        mergedProps[key] = mergeCallback(componentProps[key], elemProps[key]);
+      } else {
+        mergedProps[key] = componentProps[key];
+      }
+      return mergedProps;
+    },
+    {} as {[key: string]: any}
+  );
 }
 
 export const Tooltip = createComponent('div')({
@@ -112,6 +116,29 @@ export const Tooltip = createComponent('div')({
       hideDelay,
     });
 
+    const [elementHasFocus, setElementHasFocus] = React.useState(false);
+    const {localRef: targetRef} = useLocalRef<HTMLElement>();
+
+    React.useEffect(() => {
+      const target = targetRef.current;
+      if (!target) {
+        return;
+      }
+
+      const updateFocusState = () => {
+        setElementHasFocus(target.matches(':focus-visible') || target.classList.contains('focus'));
+      };
+
+      updateFocusState(); // Check initial state
+      target.addEventListener('focus', updateFocusState);
+      target.addEventListener('blur', updateFocusState);
+
+      return () => {
+        target.removeEventListener('focus', updateFocusState);
+        target.removeEventListener('blur', updateFocusState);
+      };
+    }, [targetRef]);
+
     return (
       <React.Fragment>
         {React.cloneElement(children, {
@@ -125,7 +152,12 @@ export const Tooltip = createComponent('div')({
           {({placement}) => {
             const transformOrigin = getTransformFromPlacement(placement);
             return (
-              <TooltipContainer transformOrigin={transformOrigin} {...elemProps} {...tooltipProps}>
+              <TooltipContainer
+                transformOrigin={transformOrigin}
+                {...handleCsProp(elemProps)}
+                {...tooltipProps}
+                elementHasFocus={elementHasFocus}
+              >
                 {title}
               </TooltipContainer>
             );

package/tooltip/lib/TooltipContainer.tsx

@@ -5,17 +5,10 @@ import {
   createComponent,
   getTransformOrigin,
 } from '@workday/canvas-kit-react/common';
-
-import {
-  calc,
-  createStencil,
-  createVars,
-  cssVar,
-  keyframes,
-  px2rem,
-} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {calc, createStencil, createVars, keyframes, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
 export interface TooltipContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * The origin from which the Tooltip will animate. Pass in `null` for no animation
@@ -28,12 +21,10 @@ export interface TooltipContainerProps extends React.HTMLAttributes<HTMLDivEleme
    */
   id?: string;
   /**
-   * optional popper properties if `placement` is set
+   * Whether the anchor element has focus-visible. Used to adjust tooltip styling.
+   * @private
    */
-  popperProps?: {
-    open: boolean;
-    anchorElement: HTMLElement | null;
-  };
+  elementHasFocus?: boolean;
 }
 
 const defaultTransformOrigin = {
@@ -63,43 +54,41 @@ export const tooltipContainerStencil = createStencil({
     tooltipTransformOriginVertical: '',
   },
   base: ({tooltipTransformOriginHorizontal, tooltipTransformOriginVertical}) => ({
-    ...system.type.subtext.medium,
+    // ...system.legacy.type.subtext.md
+    // components do not support spreading for legacy type token
+    fontFamily: system.fontFamily.default,
+    fontWeight: system.fontWeight.normal,
+    fontSize: system.legacy.fontSize.subtext.md,
+    lineHeight: system.legacy.lineHeight.subtext.md,
+    letterSpacing: system.legacy.letterSpacing.subtext.md,
     display: 'inline-flex',
     position: 'relative',
-    padding: system.space.x3,
-    color: system.color.text.inverse,
+    padding: system.legacy.padding.sm,
+    color: system.color.fg.inverse,
     animationName: tooltipAnimation,
     animationDuration: '150ms',
     animationTimingFunction: 'ease-out',
     transformOrigin: `${tooltipTransformOriginVertical} ${tooltipTransformOriginHorizontal}`,
     a: {
-      color: system.color.text.inverse,
+      color: system.color.fg.inverse,
       textDecoration: 'underline',
     },
     // use :before vs margin to increase the tooltip hit-box
     '&:before': {
       content: '""',
-      borderRadius: system.shape.x1,
+      borderRadius: system.legacy.shape.md,
       outline: `${px2rem(1)} solid transparent`,
       outlineOffset: `-${px2rem(1)}`,
       zIndex: -1,
-      margin: system.space.x1,
-      backgroundColor: system.color.bg.translucent,
+      margin: system.legacy.gap.xs,
+      backgroundColor: system.legacy.color.surface.contrast.default,
       position: 'absolute',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
+      boxShadow: system.depth[2],
     },
-
-    // offset tooltips by 2 pixels when a keyboard focus ring is detected
-    'body:has(:focus-visible, .focus) &': {
-      padding: calc.subtract(system.space.x4, calc.divide(system.space.x1, 2)),
-      '&:before': {
-        margin: calc.add(system.space.x1, calc.divide(system.space.x1, 2)),
-      },
-    },
-
     // Hide tooltip when the reference element is either clipped or fully hidden
     '[data-popper-reference-hidden] &': {
       visibility: 'hidden',
@@ -108,27 +97,42 @@ export const tooltipContainerStencil = createStencil({
 
     // Fix offsets based on placement
     '[data-popper-placement="top-start"] &, [data-popper-placement="bottom-start"] &': {
-      left: calc.negate(system.space.x1),
+      left: calc.negate(base.legacy.size50),
     },
     '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
-      right: calc.negate(system.space.x1),
+      right: calc.negate(base.legacy.size50),
     },
     '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
-      top: calc.negate(system.space.x1),
+      top: calc.negate(base.legacy.size50),
     },
     '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
-      bottom: calc.negate(system.space.x1),
+      bottom: calc.negate(base.legacy.size50),
     },
   }),
+  modifiers: {
+    elementHasFocus: {
+      true: {
+        padding: calc.subtract(system.legacy.padding.md, calc.divide(system.legacy.padding.xxs, 2)),
+        '&:before': {
+          margin: base.legacy.size75,
+        },
+      },
+    },
+  },
 });
 
 export const TooltipContainer = createComponent('div')<TooltipContainerProps>({
   displayName: 'TooltipContainer',
-  Component: ({children, transformOrigin = defaultTransformOrigin, ...elemProps}, ref, Element) => {
+  Component: (
+    {children, transformOrigin = defaultTransformOrigin, elementHasFocus = false, ...elemProps},
+    ref,
+    Element
+  ) => {
     const translate = getTransformOrigin(
       transformOrigin || defaultTransformOrigin,
-      cssVar(system.space.x2)
+      system.legacy.gap.sm
     );
+
     return (
       <Element
         ref={ref}
@@ -136,6 +140,7 @@ export const TooltipContainer = createComponent('div')<TooltipContainerProps>({
           tooltipContainerStencil({
             tooltipTransformOriginHorizontal: transformOrigin?.horizontal,
             tooltipTransformOriginVertical: transformOrigin?.vertical,
+            elementHasFocus,
           }),
           tooltipTranslateVars({positionX: translate.x, positionY: translate.y}),
         ])}

package/tooltip/lib/useTooltip.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
+
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {
-  useCloseOnEscape,
   useAlwaysCloseOnOutsideClick,
-  usePopupModel,
+  useCloseOnEscape,
   useCloseOnFullscreenExit,
   useCloseOnTargetHidden,
+  usePopupModel,
 } from '@workday/canvas-kit-react/popup';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 const useIntentTimer = (fn: Function, waitMs: number = 0): {start(): void; clear(): void} => {
   const timer = React.useRef() as React.MutableRefObject<number | undefined>;

package/common/lib/forwardFitTokens.ts

@@ -1,14 +0,0 @@
-import {cssVar} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-/**
- * This file is NOT INTENDED to be used by consumers, only internally by Canvas Kit.
- */
-export const forwardFitTokens = {
-  system: {
-    shape: {
-      //TODO: in v4 Tokens and v15, we should replace this forward fit token with the actual token value
-      sm: cssVar('--cnvs-sys-shape-sm', system.shape.x1Half),
-    },
-  },
-} as const;

package/dist/commonjs/common/lib/forwardFitTokens.d.ts

@@ -1,11 +0,0 @@
-/**
- * This file is NOT INTENDED to be used by consumers, only internally by Canvas Kit.
- */
-export declare const forwardFitTokens: {
-    readonly system: {
-        readonly shape: {
-            readonly sm: "var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1-half))";
-        };
-    };
-};
-//# sourceMappingURL=forwardFitTokens.d.ts.map

package/dist/commonjs/common/lib/forwardFitTokens.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"forwardFitTokens.d.ts","sourceRoot":"","sources":["../../../../common/lib/forwardFitTokens.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;CAOnB,CAAC"}

package/dist/commonjs/common/lib/forwardFitTokens.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.forwardFitTokens = void 0;
-const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-/**
- * This file is NOT INTENDED to be used by consumers, only internally by Canvas Kit.
- */
-exports.forwardFitTokens = {
-    system: {
-        shape: {
-            //TODO: in v4 Tokens and v15, we should replace this forward fit token with the actual token value
-            sm: (0, canvas_kit_styling_1.cssVar)('--cnvs-sys-shape-sm', canvas_tokens_web_1.system.shape.x1Half),
-        },
-    },
-};

package/dist/commonjs/form-field/lib/FormFieldContainer.d.ts

@@ -1,18 +0,0 @@
-import { CSProps } from '@workday/canvas-kit-styling';
-/**
- * @deprecated `formFieldContainerStencil` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
- */
-export declare const formFieldContainerStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
-/**
- * @deprecated `FormField.Container` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
- */
-export declare const FormFieldContainer: import("@workday/canvas-kit-react/common").ElementComponentM<"div", CSProps, {
-    state: {
-        id: string;
-        error: "error" | "caution" | undefined;
-        isRequired: boolean;
-        orientation: "vertical" | "horizontalEnd" | "horizontalStart";
-    };
-    events: {};
-}>;
-//# sourceMappingURL=FormFieldContainer.d.ts.map

package/dist/commonjs/form-field/lib/FormFieldContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormFieldContainer.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldContainer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AAKjF;;GAEG;AACH,eAAO,MAAM,yBAAyB,iJAMpC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;EAU7B,CAAC"}

package/dist/commonjs/form-field/lib/FormFieldContainer.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormFieldContainer = exports.formFieldContainerStencil = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const common_1 = require("@workday/canvas-kit-react/common");
-const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const hooks_1 = require("./hooks");
-const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-/**
- * @deprecated `formFieldContainerStencil` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
- */
-exports.formFieldContainerStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "3unuo1", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
-}, "form-field-container-6a4115");
-/**
- * @deprecated `FormField.Container` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
- */
-exports.FormFieldContainer = (0, common_1.createSubcomponent)('div')({
-    displayName: 'FormField.Container',
-    modelHook: hooks_1.useFormFieldModel,
-})((elemProps, Element, model) => {
-    return ((0, jsx_runtime_1.jsx)(Element, { "data-width": "ck-formfield-width", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.formFieldContainerStencil)()) }));
-});

package/dist/commonjs/segmented-control/lib/SegmentedControlButton.d.ts

@@ -1,16 +0,0 @@
-import { ButtonContainerProps } from '@workday/canvas-kit-react/button';
-import { CanvasSystemIcon } from '@workday/design-assets-types';
-/**
- * @deprecated ⚠️ `SegmentedControlButtonProps` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-export interface SegmentedControlButtonProps extends ButtonContainerProps {
-    toggled?: boolean;
-    icon: CanvasSystemIcon;
-    value?: string | number;
-    size?: 'small' | 'medium' | 'large';
-}
-/**
- * @deprecated ⚠️ `SegmentedControlButton` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-export declare const SegmentedControlButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", SegmentedControlButtonProps>;
-//# sourceMappingURL=SegmentedControlButton.d.ts.map

package/dist/commonjs/segmented-control/lib/SegmentedControlButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,oBAAoB,EAAgB,MAAM,kCAAkC,CAAC;AAEjG,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AA+E9D;;GAEG;AACH,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,oGAkBjC,CAAC"}

package/dist/commonjs/segmented-control/lib/SegmentedControlButton.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SegmentedControlButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const button_1 = require("@workday/canvas-kit-react/button");
-const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const common_1 = require("@workday/canvas-kit-react/common");
-const icon_1 = require("@workday/canvas-kit-react/icon");
-const segmentedControlButtonStencil = (0, canvas_kit_styling_1.createStencil)({
-    extends: button_1.buttonStencil,
-    base: { name: "228cn4", styles: "box-sizing:border-box;border-inline-start:none;min-width:auto;--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-soft);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--borderRadius-button-85bf0e:var(--cnvs-sys-shape-zero);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-softer);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}&:first-of-type{border-radius:var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);border-inline-start:0.0625rem solid var(--cnvs-sys-color-border-container);}&:last-of-type{border-radius:0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;}&[aria-pressed=\"true\"]{--background-button-85bf0e:var(--cnvs-brand-primary-base);--border-button-85bf0e:var(--cnvs-brand-primary-base);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);&:first-of-type{border-inline-start-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-softer);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}}&:focus-visible, &.focus{border-radius:var(--cnvs-sys-shape-x1);z-index:1;animation:none;transition:all 120ms border-radius 1ms;}" },
-    modifiers: {
-        segmentedControlButtonSize: {
-            small: { name: "4bvck3", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);" },
-            medium: { name: "39aycj", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);" },
-            large: { name: "yw9j3", styles: "width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));" }
-        }
-    }
-}, "segmented-control-button-c9fec8");
-/**
- * @deprecated ⚠️ `SegmentedControlButton` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-exports.SegmentedControlButton = (0, common_1.createComponent)('button')({
-    displayName: 'Button',
-    Component: ({ value, icon, toggled, ...props }, ref, Element) => {
-        return ((0, jsx_runtime_1.jsx)(button_1.BaseButton, { as: Element, ref: ref, "aria-pressed": toggled, value: value, ...(0, canvas_kit_styling_1.handleCsProp)(props, segmentedControlButtonStencil({ segmentedControlButtonSize: props.size || 'medium' })), children: (0, jsx_runtime_1.jsx)(button_1.BaseButton.Icon, { size: props.size || 'large', icon: icon }) }));
-    },
-});

package/dist/es6/common/lib/forwardFitTokens.d.ts

@@ -1,11 +0,0 @@
-/**
- * This file is NOT INTENDED to be used by consumers, only internally by Canvas Kit.
- */
-export declare const forwardFitTokens: {
-    readonly system: {
-        readonly shape: {
-            readonly sm: "var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1-half))";
-        };
-    };
-};
-//# sourceMappingURL=forwardFitTokens.d.ts.map

package/dist/es6/common/lib/forwardFitTokens.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"forwardFitTokens.d.ts","sourceRoot":"","sources":["../../../../common/lib/forwardFitTokens.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;CAOnB,CAAC"}

package/dist/es6/common/lib/forwardFitTokens.js

@@ -1,13 +0,0 @@
-import { cssVar } from '@workday/canvas-kit-styling';
-import { system } from '@workday/canvas-tokens-web';
-/**
- * This file is NOT INTENDED to be used by consumers, only internally by Canvas Kit.
- */
-export const forwardFitTokens = {
-    system: {
-        shape: {
-            //TODO: in v4 Tokens and v15, we should replace this forward fit token with the actual token value
-            sm: cssVar('--cnvs-sys-shape-sm', system.shape.x1Half),
-        },
-    },
-};

package/dist/es6/form-field/lib/FormFieldContainer.d.ts

@@ -1,18 +0,0 @@
-import { CSProps } from '@workday/canvas-kit-styling';
-/**
- * @deprecated `formFieldContainerStencil` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
- */
-export declare const formFieldContainerStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
-/**
- * @deprecated `FormField.Container` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
- */
-export declare const FormFieldContainer: import("@workday/canvas-kit-react/common").ElementComponentM<"div", CSProps, {
-    state: {
-        id: string;
-        error: "error" | "caution" | undefined;
-        isRequired: boolean;
-        orientation: "vertical" | "horizontalEnd" | "horizontalStart";
-    };
-    events: {};
-}>;
-//# sourceMappingURL=FormFieldContainer.d.ts.map

package/dist/es6/form-field/lib/FormFieldContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormFieldContainer.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldContainer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AAKjF;;GAEG;AACH,eAAO,MAAM,yBAAyB,iJAMpC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;EAU7B,CAAC"}

package/dist/es6/form-field/lib/FormFieldContainer.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createSubcomponent } from '@workday/canvas-kit-react/common';
-import { handleCsProp, createStencil } from '@workday/canvas-kit-styling';
-import { useFormFieldModel } from './hooks';
-import { system } from '@workday/canvas-tokens-web';
-/**
- * @deprecated `formFieldContainerStencil` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
- */
-export const formFieldContainerStencil = createStencil({
-    base: { name: "3unuo1", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-space-x2);" }
-}, "form-field-container-6a4115");
-/**
- * @deprecated `FormField.Container` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
- */
-export const FormFieldContainer = createSubcomponent('div')({
-    displayName: 'FormField.Container',
-    modelHook: useFormFieldModel,
-})((elemProps, Element, model) => {
-    return (_jsx(Element, { "data-width": "ck-formfield-width", ...handleCsProp(elemProps, formFieldContainerStencil()) }));
-});

package/dist/es6/segmented-control/lib/SegmentedControlButton.d.ts

@@ -1,16 +0,0 @@
-import { ButtonContainerProps } from '@workday/canvas-kit-react/button';
-import { CanvasSystemIcon } from '@workday/design-assets-types';
-/**
- * @deprecated ⚠️ `SegmentedControlButtonProps` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-export interface SegmentedControlButtonProps extends ButtonContainerProps {
-    toggled?: boolean;
-    icon: CanvasSystemIcon;
-    value?: string | number;
-    size?: 'small' | 'medium' | 'large';
-}
-/**
- * @deprecated ⚠️ `SegmentedControlButton` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-export declare const SegmentedControlButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", SegmentedControlButtonProps>;
-//# sourceMappingURL=SegmentedControlButton.d.ts.map

package/dist/es6/segmented-control/lib/SegmentedControlButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,oBAAoB,EAAgB,MAAM,kCAAkC,CAAC;AAEjG,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AA+E9D;;GAEG;AACH,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,oGAkBjC,CAAC"}

package/dist/es6/segmented-control/lib/SegmentedControlButton.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { brand, system } from '@workday/canvas-tokens-web';
-import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
-import { calc, createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
-import { createComponent } from '@workday/canvas-kit-react/common';
-import { systemIconStencil } from '@workday/canvas-kit-react/icon';
-const segmentedControlButtonStencil = createStencil({
-    extends: buttonStencil,
-    base: { name: "228cn4", styles: "box-sizing:border-box;border-inline-start:none;min-width:auto;--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-soft);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--borderRadius-button-85bf0e:var(--cnvs-sys-shape-zero);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-softer);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}&:first-of-type{border-radius:var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);border-inline-start:0.0625rem solid var(--cnvs-sys-color-border-container);}&:last-of-type{border-radius:0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;}&[aria-pressed=\"true\"]{--background-button-85bf0e:var(--cnvs-brand-primary-base);--border-button-85bf0e:var(--cnvs-brand-primary-base);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);&:first-of-type{border-inline-start-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-softer);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}}&:focus-visible, &.focus{border-radius:var(--cnvs-sys-shape-x1);z-index:1;animation:none;transition:all 120ms border-radius 1ms;}" },
-    modifiers: {
-        segmentedControlButtonSize: {
-            small: { name: "4bvck3", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);" },
-            medium: { name: "39aycj", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);" },
-            large: { name: "yw9j3", styles: "width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));" }
-        }
-    }
-}, "segmented-control-button-c9fec8");
-/**
- * @deprecated ⚠️ `SegmentedControlButton` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-export const SegmentedControlButton = createComponent('button')({
-    displayName: 'Button',
-    Component: ({ value, icon, toggled, ...props }, ref, Element) => {
-        return (_jsx(BaseButton, { as: Element, ref: ref, "aria-pressed": toggled, value: value, ...handleCsProp(props, segmentedControlButtonStencil({ segmentedControlButtonSize: props.size || 'medium' })), children: _jsx(BaseButton.Icon, { size: props.size || 'large', icon: icon }) }));
-    },
-});

package/form-field/lib/FormFieldContainer.tsx

@@ -1,31 +0,0 @@
-import {createSubcomponent} from '@workday/canvas-kit-react/common';
-import {handleCsProp, CSProps, createStencil} from '@workday/canvas-kit-styling';
-
-import {useFormFieldModel} from './hooks';
-import {system} from '@workday/canvas-tokens-web';
-
-/**
- * @deprecated `formFieldContainerStencil` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
- */
-export const formFieldContainerStencil = createStencil({
-  base: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: system.space.x2,
-  },
-});
-
-/**
- * @deprecated `FormField.Container` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
- */
-export const FormFieldContainer = createSubcomponent('div')({
-  displayName: 'FormField.Container',
-  modelHook: useFormFieldModel,
-})<CSProps>((elemProps, Element, model) => {
-  return (
-    <Element
-      data-width="ck-formfield-width"
-      {...handleCsProp(elemProps, formFieldContainerStencil())}
-    />
-  );
-});