@workday/canvas-kit-react 6.0.0-alpha.0-next.26 → 6.0.0-alpha.0-next.27

package/dist/es6/pagination/lib/Pagination/common/utils/space.d.ts

@@ -31,96 +31,96 @@ export interface SpaceProps {
     pl?: Spacing;
 }
 export declare const space: {
-    margin: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    margin: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         margin: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    m: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    m: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         margin: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    marginX: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    marginX: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         marginLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         marginRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    mx: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    mx: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         marginLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         marginRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    marginY: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    marginY: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         marginBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         marginTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    my: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    my: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         marginBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         marginTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    marginT: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    marginT: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         marginTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    mt: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    mt: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         marginTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    marginR: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    marginR: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         marginRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    mr: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    mr: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         marginRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    marginB: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    marginB: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         marginBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    mb: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    mb: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         marginBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    marginL: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    marginL: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         marginLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    ml: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    ml: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         marginLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    padding: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    padding: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         padding: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    p: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    p: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         padding: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    paddingX: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    paddingX: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         paddingLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         paddingRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    px: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    px: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         paddingLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         paddingRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    paddingY: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    paddingY: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         paddingBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         paddingTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    py: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    py: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         paddingBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         paddingTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    paddingT: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    paddingT: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         paddingTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    pt: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    pt: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         paddingTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    paddingR: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    paddingR: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         paddingRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    pr: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    pr: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         paddingRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    paddingB: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    paddingB: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         paddingBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    pb: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    pb: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         paddingBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    paddingL: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    paddingL: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         paddingLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    pl: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
+    pl: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
         paddingLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "6.0.0-alpha.0-next.26+2d2c8a25",
+  "version": "6.0.0-alpha.0-next.27+438f1a7b",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -56,9 +56,9 @@
     "@emotion/styled": "^10.0.27",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^6.0.0-alpha.0-next.26+2d2c8a25",
-    "@workday/canvas-kit-popup-stack": "^6.0.0-alpha.0-next.26+2d2c8a25",
-    "@workday/canvas-kit-preview-react": "^6.0.0-alpha.0-next.26+2d2c8a25",
+    "@workday/canvas-kit-labs-react": "^6.0.0-alpha.0-next.27+438f1a7b",
+    "@workday/canvas-kit-popup-stack": "^6.0.0-alpha.0-next.27+438f1a7b",
+    "@workday/canvas-kit-preview-react": "^6.0.0-alpha.0-next.27+438f1a7b",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
@@ -74,5 +74,5 @@
     "@workday/canvas-accent-icons-web": "^1.0.0",
     "@workday/canvas-applet-icons-web": "^0.17.50"
   },
-  "gitHead": "2d2c8a258795d495edb4efa262829b7fae7cc731"
+  "gitHead": "438f1a7befd5744cf80fe8d70714f5cbf254029b"
 }

package/ts3.5/dist/commonjs/button/lib/parts/ButtonLabel.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="@emotion/core" />
-export declare const ButtonLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css">, import("../../../common").EmotionCanvasTheme>;
+export declare const ButtonLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "css" | "style" | "title" | "dir" | "slot" | "children" | "hidden" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, import("../../../common").EmotionCanvasTheme>;
 //# sourceMappingURL=ButtonLabel.d.ts.map

package/ts3.5/dist/commonjs/common/lib/theming/breakpoints.d.ts

@@ -7,16 +7,297 @@ export declare enum BreakpointKey {
 }
 export declare type BreakpointFnParam = BreakpointKey | keyof typeof BreakpointKey;
 export declare type CanvasBreakpoints = {
-    zero: number;
-    s: number;
-    m: number;
-    l: number;
-    xl: number;
+    /**
+     * ### Zero Breakpoint
+     *
+     * This breakpoint is useful when you need to set a media query `min-width` below small.
+     *
+     * @example
+     * ```ts
+     * import { useTheme } from '@workday/canvas-kit-react/common';
+     * import { space } from '@workday/canvas-kit-react/tokens';
+     *
+     * const theme = useTheme();
+     * const { values } = theme.canvas.breakpoints;
+     * const styles = {
+     *   [`@media (min-width: ${values.zero}px)`]: {
+     *     padding: space.xxs,
+     *   },
+     * }
+     * ```
+     */
+    zero: 0;
+    /**
+     * ### Small Breakpoint
+     *
+     * The small breakpoint provides the `min-width` for mobile devices, such as phones and tablets.
+     * This size ranges from a min-width of 320px to a max-width of 767px.
+     *
+     * @example
+     * ```ts
+     * import { useTheme } from '@workday/canvas-kit-react/common';
+     * import { space } from '@workday/canvas-kit-react/tokens';
+     *
+     * const theme = useTheme();
+     * const { values } = theme.canvas.breakpoints;
+     * const styles = {
+     *   [`@media (min-width: ${values.s}px)`]: {
+     *     padding: space.xs,
+     *   },
+     * }
+     * ```
+     */
+    s: 320;
+    /**
+     * ### Medium Breakpoint
+     *
+     * The medium breakpoint is the min-width for intended for medium screens, such as laptops.
+     * This size ranges from a min-width of 768px to a max-width of 1023px.
+     *
+     * @example
+     * ```ts
+     * import { useTheme } from '@workday/canvas-kit-react/common';
+     * import { space } from '@workday/canvas-kit-react/tokens';
+     *
+     * const theme = useTheme();
+     * const { values } = theme.canvas.breakpoints;
+     * const styles = {
+     *   [`@media (min-width: ${values.m}px)`]: {
+     *     padding: space.s,
+     *   },
+     * }
+     * ```
+     */
+    m: 768;
+    /**
+     * ### Large Breakpoint
+     *
+     * The large breakpoint is the min-width for intended for large screens, such as desktops.
+     * This size ranges from a min-width of 1024px to a max-width of 1439px.
+     *
+     * @example
+     * ```ts
+     * import { useTheme } from '@workday/canvas-kit-react/common';
+     * import { space } from '@workday/canvas-kit-react/tokens';
+     *
+     * const theme = useTheme();
+     * const { values } = theme.canvas.breakpoints;
+     * const styles = {
+     *   [`@media (min-width: ${values.m}px)`]: {
+     *     padding: space.s,
+     *   },
+     * }
+     * ```
+     */
+    l: 1024;
+    /**
+     * ### Extra-Large Breakpoint
+     *
+     * The large breakpoint is the min-width for intended for extra-large screens, such as wide monitors and TVs.
+     * This size has a min-width of 1440px and no max-width.
+     *
+     * @example
+     * ```ts
+     * import { useTheme } from '@workday/canvas-kit-react/common';
+     * import { space } from '@workday/canvas-kit-react/tokens';
+     *
+     * const theme = useTheme();
+     * const { values } = theme.canvas.breakpoints;
+     * const styles = {
+     *   [`@media (min-width: ${values.m}px)`]: {
+     *     padding: space.s
+     *   },
+     * }
+     * ```
+     */
+    xl: 1440;
 };
 export declare const breakpointKeys: readonly ["zero", "s", "m", "l", "xl"];
+/**
+ * ### Theme Breakpoint Values
+ *
+ * Breakpoints are used by media queries to conditionally apply or modify styles based on the viewport width.
+ * This allows the UI to be responsive to various screen sizes. This object provides five breakpoint values
+ * that correspond to the min-widths of our standard screen sizes.
+ *
+ * - `zero`: 0
+ * - `s`: 320
+ * - `m`: 768
+ * - `l`: 1024
+ * - `xl`: 1440
+ *
+ * And these are our standard screen size ranges:
+ *
+ * - `small` (320px - 767px) Used for mobile-sized screens
+ * - `medium` (768px - 1023px) Used for tablet-sized screens
+ * - `large` - (1024px - 1439px) Used for laptop and small desktop screens
+ * - `extra-large` (≥1440px) Used for very large screens
+ *
+ * Note: Some applications may only require a subset of screen sizes and not use all breakpoints.
+ *
+ */
 export declare const breakpoints: CanvasBreakpoints;
+/**
+ * ### Up
+ *
+ * _Returns a media query above the `min-width` for the range of a given breakpoint_
+ *
+ * Given a `start` breakpoint key ("zero", "s", "m", "l", "xl"),
+ * this function returns a media query (string) using a `min-width`.
+ *
+ * @example
+ * ```ts
+ * import { useTheme } from '@workday/canvas-kit-react/common';
+ * import { space } from '@workday/canvas-kit-react/tokens';
+ *
+ * const theme = useTheme();
+ * const { up } = theme.canvas.breakpoints;
+ * const mediaQuery = up('l'); // Returns '@media (min-width: 1024px)'
+ * const styles = {
+ *   [mediaQuery]: {
+ *     padding: space.m,
+ *   }
+ * };
+ * ```
+ */
 export declare function up(key: BreakpointFnParam): string;
-export declare function down(key: BreakpointFnParam): string;
+/**
+ * ### Down
+ *
+ * _Returns a media query below the `max-width` for the range of a given breakpoint_
+ *
+ * Given an `end` breakpoint key ("zero", "s", "m", "l", "xl"),
+ * this function returns a media query (string) using a `max-width`.
+ *
+ * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
+ * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
+ *
+ * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width` of `0`,
+ * as seen in the second example below.
+ *
+ * @example
+ * ```ts
+ * import { useTheme } from '@workday/canvas-kit-react/common';
+ * import { space } from '@workday/canvas-kit-react/tokens';
+ *
+ * const theme = useTheme();
+ * const { down } = theme.canvas.breakpoints;
+ * const mediaQuery = down('m'); // Returns '@media (max-width: 1023.5px)'
+ * const styles = {
+ *   [mediaQuery]: {
+ *     padding: space.m,
+ *   }
+ * };
+ * ```
+ *
+ * This example uses the `xl` breakpoint and only adds a `min-width` of `0` to the media query.
+ * @example
+ * ```ts
+ * import { useTheme } from '@workday/canvas-kit-react/common';
+ * import { space } from '@workday/canvas-kit-react/tokens';
+ *
+ * const theme = useTheme();
+ * const { down } = theme.canvas.breakpoints;
+ * const mediaQuery = down('xl'); // Returns '@media (min-width: 0)'
+ * const styles = {
+ *   [mediaQuery]: {
+ *     padding: space.m,
+ *   }
+ * };
+ * ```
+ */
+export declare function down(endKey: BreakpointFnParam): string;
+/**
+ * ### Between
+ *
+ * _Returns a media query between two given breakpoints_
+ *
+ * Given `start` and `end` breakpoint keys ("zero", "s", "m", "l", "xl"),
+ * this function returns a media query (string) using a min-width and max-width.
+ *
+ * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
+ * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
+ *
+ * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width`,
+ * as seen in the second example below.
+ *
+ * @example
+ * ```ts
+ * import { useTheme } from '@workday/canvas-kit-react/common';
+ * import { space } from '@workday/canvas-kit-react/tokens';
+ *
+ * const theme = useTheme();
+ * const { between } = theme.canvas.breakpoints;
+ * // Returns '@media (min-width: 320px) and (max-width: 1023.5px)'
+ * const mediaQuery = between('s', 'm');
+ * const styles = {
+ *   [mediaQuery]: {
+ *     padding: space.s,
+ *   }
+ * };
+ * ```
+ *
+ * This example uses `xl` as the `end` breakpoint and only adds a min-width to the media query.
+ * @example
+ * ```ts
+ * import { useTheme } from '@workday/canvas-kit-react/common';
+ * import { space } from '@workday/canvas-kit-react/tokens';
+ *
+ * const theme = useTheme();
+ * const { between } = theme.canvas.breakpoints;
+ * const mediaQuery = between('m', 'xl'); // Returns '@media (min-width: 768px)'
+ * const styles = {
+ *   [mediaQuery]: {
+ *     padding: space.s,
+ *   }
+ * };
+ * ```
+ */
 export declare function between(start: BreakpointFnParam, end: BreakpointFnParam): string;
+/**
+ * ### Only
+ *
+ * _Returns a media query with a `min-width` and `max-width` for a given breakpoint_
+ *
+ * Given a breakpoint key ("zero", "s", "m", "l", "xl"),
+ * this function returns a media query (string) using a `min-width` and `max-width`.
+ *
+ * Note: This function subtracts `0.5px` from the next breakpoint value to prevent collisions.
+ * For example, `breakpoints.values.s`, has a `min-width` of `320px`, and the `max-width` is `767.5px`).
+ *
+ * If the `xl` breakpoint is provided, this function returns a media query with only a `min-width` of `1440px`,
+ * as seen in the second example below.
+ *
+ * @example
+ * ```ts
+ * import { useTheme } from '@workday/canvas-kit-react/common';
+ * import { space } from '@workday/canvas-kit-react/tokens';
+ *
+ * const theme = useTheme();
+ * const { only } = theme.canvas.breakpoints;
+ * const mediaQuery = only('s'); // Returns '@media (min-width: 320px) and (max-width: 767.5px)'
+ * const styles = {
+ *   [mediaQuery]: {
+ *     padding: space.s,
+ *   }
+ * };
+ * ```
+ *
+ * This example uses the `xl` breakpoint and only adds a `min-width` of `1440px` to the media query.
+ * @example
+ * ```ts
+ * import { useTheme } from '@workday/canvas-kit-react/common';
+ * import { space } from '@workday/canvas-kit-react/tokens';
+ *
+ * const theme = useTheme();
+ * const { only } = theme.canvas.breakpoints;
+ * const mediaQuery = only('xl'); // Returns '@media (min-width: 1440px)'
+ * const styles = {
+ *   [mediaQuery]: {
+ *     padding: space.s,
+ *   }
+ * };
+ * ```
+ */
 export declare function only(key: BreakpointFnParam): string;
 //# sourceMappingURL=breakpoints.d.ts.map