@drivy/cobalt 0.48.0 → 0.49.1

package/_virtual/_commonjsHelpers.js

@@ -0,0 +1,6 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+export { getDefaultExportFromCjs };
+//# sourceMappingURL=_commonjsHelpers.js.map

package/_virtual/_commonjsHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/tokens/icons.js

@@ -66,6 +66,7 @@ const icons = {
 	chevronLeft: "chevron-left.svg",
 	chevronRight: "chevron-right.svg",
 	chevronUp: "chevron-up.svg",
+	circledArrowLeft: "circled-arrow-left.svg",
 	circledArrowRight: "circled-arrow-right.svg",
 	city: "city.svg",
 	cleaning: "cleaning.svg",
@@ -115,6 +116,8 @@ const icons = {
 	facebook: "facebook.svg",
 	family: "family.svg",
 	fileFilled: "file-filled.svg",
+	filepdf: "filepdf.svg",
+	filexls: "filexls.svg",
 	filter: "filter.svg",
 	filters: "filters.svg",
 	flag: "flag.svg",

package/cjs/tokens/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/tokens/theme.js

@@ -53,7 +53,7 @@ const background = {
 };
 const text = {
 	base: "navy.700/grey.100",
-	subdued: "navy.400/grey.300",
+	subdued: "navy.300/grey.300",
 	accent: "purple.500/purple.400",
 	accentAlt: "purple.700/purple.200",
 	info: "yellow.900/yellow.400",
@@ -91,7 +91,7 @@ const text = {
 		hover: "navy.900/grey.300"
 	},
 	subduedInteractive: {
-		DEFAULT: "navy.400/grey.300",
+		DEFAULT: "navy.300/grey.300",
 		hover: "navy.500/grey.400"
 	},
 	accentInteractive: {
@@ -105,7 +105,7 @@ const text = {
 };
 const icon = {
 	base: "navy.700/grey.100",
-	subdued: "navy.400/grey.300",
+	subdued: "navy.300/grey.300",
 	accent: "purple.500/purple.400",
 	accentAlt: "purple.700/purple.200",
 	info: "yellow.900/yellow.400",
@@ -139,7 +139,7 @@ const icon = {
 		hover: "navy.900/grey.200"
 	},
 	subduedInteractive: {
-		DEFAULT: "navy.400/grey.300",
+		DEFAULT: "navy.300/grey.300",
 		hover: "navy.500/grey.400"
 	},
 	accentInteractive: {

package/components/Accordion/ToggleIcon.js

@@ -1,8 +1,12 @@
 import React from 'react';
 import cx from 'classnames';
+import '../Icon/index.js';
+import ChevronDownIcon from '../Icon/__generated__/ChevronDownIcon.js';
 
-const ToggleIcon = ({ isOpen }) => {
-    return (React.createElement("div", { className: cx("cobalt-accordion__header-icon", {
+const ToggleIcon = ({ isOpen, useChevron }) => {
+    return useChevron ? (React.createElement(ChevronDownIcon, { color: "subdued", size: 24, className: cx("cobalt-accordion__header-chevron-icon", {
+            "cobalt-accordion__header-chevron-icon--opened": isOpen,
+        }) })) : (React.createElement("div", { className: cx("cobalt-accordion__header-icon", {
             "cobalt-accordion__header-icon--opened": isOpen,
         }) }));
 };

package/components/Accordion/ToggleIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleIcon.js","sources":["../../../src/components/Accordion/ToggleIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\ntype ToggleIconPropsType = { isOpen: boolean }\n\nconst ToggleIcon = ({ isOpen }: ToggleIconPropsType) => {\n  return (\n    <div\n      className={cx(\"cobalt-accordion__header-icon\", {\n        \"cobalt-accordion__header-icon--opened\": isOpen,\n      })}\n    />\n  )\n}\n\nexport default ToggleIcon\n"],"names":[],"mappings":";;;AAKA,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAuB,KAAI;AACrD,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE;AAC7C,YAAA,uCAAuC,EAAE,MAAM;SAChD,CAAC,EAAA,CACF,EACH;AACH;;;;"}
+{"version":3,"file":"ToggleIcon.js","sources":["../../../src/components/Accordion/ToggleIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { ChevronDownIcon } from \"../Icon\"\n\ntype ToggleIconPropsType = { isOpen: boolean; useChevron: boolean }\n\nconst ToggleIcon = ({ isOpen, useChevron }: ToggleIconPropsType) => {\n  return useChevron ? (\n    <ChevronDownIcon\n      color=\"subdued\"\n      size={24}\n      className={cx(\"cobalt-accordion__header-chevron-icon\", {\n        \"cobalt-accordion__header-chevron-icon--opened\": isOpen,\n      })}\n    />\n  ) : (\n    <div\n      className={cx(\"cobalt-accordion__header-icon\", {\n        \"cobalt-accordion__header-icon--opened\": isOpen,\n      })}\n    />\n  )\n}\n\nexport default ToggleIcon\n"],"names":[],"mappings":";;;;;AAMM,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,UAAU,EAAuB,KAAI;IACjE,OAAO,UAAU,IACf,KAAC,CAAA,aAAA,CAAA,eAAe,IACd,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,EAAE,CAAC,uCAAuC,EAAE;AACrD,YAAA,+CAA+C,EAAE,MAAM;AACxD,SAAA,CAAC,EACF,CAAA,KAEF,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE;AAC7C,YAAA,uCAAuC,EAAE,MAAM;SAChD,CAAC,EAAA,CACF,CACH,CAAA;AACH;;;;"}

package/components/Accordion/index.js

@@ -7,7 +7,7 @@ import { animated, useSpring } from '@react-spring/web';
 import useElementHeight from '../../hooks/useElementHeight.js';
 
 const accordionSpringConfig = { tension: 300, friction: 30, clamp: true };
-const AccordionItemHeader = forwardRef(({ headingLevel = 4, className, leftToggleIcon = false, children, ...props }, ref) => {
+const AccordionItemHeader = forwardRef(({ headingLevel = 4, className, leftToggleIcon = false, useChevron = false, children, ...props }, ref) => {
     const { isExpanded } = useAccordionItemContext();
     const Heading = `h${headingLevel}`;
     return (React.createElement(Heading, null,
@@ -15,7 +15,7 @@ const AccordionItemHeader = forwardRef(({ headingLevel = 4, className, leftToggl
                 "cobalt-accordion__header--left-toggle-icon": leftToggleIcon,
             }), ...props },
             React.createElement("span", { className: cx("cobalt-accordion__header-content", className) }, children),
-            React.createElement(ToggleIcon, { isOpen: isExpanded }))));
+            React.createElement(ToggleIcon, { useChevron: useChevron, isOpen: isExpanded }))));
 });
 AccordionItemHeader.displayName = "Accordion.Item.Header";
 const AnimatedAccordionPanel = animated(AccordionPanel);

package/components/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport {\n  Accordion as ReachAccordion,\n  AccordionItem as ReachAccordionItem,\n  AccordionButton as ReachAccordionButton,\n  AccordionPanel as ReachAccordionPanel,\n  AccordionProps as ReachAccordionProps,\n  AccordionItemProps as ReachAccordionItemProps,\n  AccordionButtonProps as ReachAccordionButtonProps,\n  useAccordionItemContext,\n  AccordionPanelProps as ReachAccordionPanelProps,\n} from \"@reach/accordion\"\nimport ToggleIcon from \"./ToggleIcon\"\nimport { animated, useSpring } from \"@react-spring/web\"\nimport useElementHeight from \"../../hooks/useElementHeight\"\nexport { useAccordionItemContext } from \"@reach/accordion\"\n\ntype HeadingLevelMapType = {\n  h2: 2\n  h3: 3\n  h4: 4\n  h5: 5\n  h6: 6\n}\n\ntype HeadingTag = keyof HeadingLevelMapType\nexport type AccordionItemHeaderPropsType = {\n  /**\n   * To improve the semantics of the markup further, the ARIA guidelines dictate\n   * that each accordion item's button should be wrapped in an element with\n   * role=\"heading\", or more simply, an HTML heading tag.\n   * https://reach.tech/accordion/#accordion-headings\n   */\n  headingLevel?: HeadingLevelMapType[HeadingTag]\n  className?: string\n  leftToggleIcon?: boolean\n} & ReachAccordionButtonProps\n\nexport type AccordionItemPanelPropsType = {\n  className?: string\n} & ReachAccordionPanelProps\nexport type AccordionItemPropsType = {\n  className?: string\n} & ReachAccordionItemProps\nexport type AccordionPropsType = {\n  className?: string\n  // We have to explicit them below to get displayed by Storybook\n  // should work without but might be an issue on Storybook side\n  collapsible?: ReachAccordionProps[\"collapsible\"]\n  defaultIndex?: ReachAccordionProps[\"defaultIndex\"]\n  index?: ReachAccordionProps[\"index\"]\n  multiple?: ReachAccordionProps[\"multiple\"]\n  onChange?: ReachAccordionProps[\"onChange\"]\n} & ReachAccordionProps\n\nconst accordionSpringConfig = { tension: 300, friction: 30, clamp: true }\n\nexport const AccordionItemHeader = forwardRef<\n  HTMLButtonElement,\n  AccordionItemHeaderPropsType\n>(\n  (\n    { headingLevel = 4, className, leftToggleIcon = false, children, ...props },\n    ref\n  ) => {\n    const { isExpanded } = useAccordionItemContext()\n    const Heading = `h${headingLevel}` as HeadingTag\n    return (\n      <Heading>\n        <ReachAccordionButton\n          ref={ref}\n          className={cx(\"cobalt-accordion__header\", {\n            \"cobalt-accordion__header--left-toggle-icon\": leftToggleIcon,\n          })}\n          {...props}\n        >\n          <span className={cx(\"cobalt-accordion__header-content\", className)}>\n            {children}\n          </span>\n          <ToggleIcon isOpen={isExpanded} />\n        </ReachAccordionButton>\n      </Heading>\n    )\n  }\n)\nAccordionItemHeader.displayName = \"Accordion.Item.Header\"\n\nconst AnimatedAccordionPanel = animated(ReachAccordionPanel)\nexport const AccordionItemPanel = ({\n  children,\n  className,\n  ...props\n}: AccordionItemPanelPropsType) => {\n  const { isExpanded } = useAccordionItemContext()\n  const { ref, height } = useElementHeight<HTMLDivElement>()\n  const animation = useSpring({\n    opacity: isExpanded ? 1 : 0,\n    height: isExpanded ? height : 0,\n    overflow: \"hidden\",\n    config: accordionSpringConfig,\n  })\n\n  return (\n    <AnimatedAccordionPanel\n      style={animation}\n      // We need to set hidden to false for the exit animations to work\n      // but the panel should still be hidden from the accessibility tree\n      // when the panel is closed. We'll use aria-hidden instead.\n      hidden={false}\n      aria-hidden={!isExpanded || undefined}\n      {...props}\n    >\n      <div ref={ref} className={cx(\"cobalt-accordion__panel\", className)}>\n        {children}\n      </div>\n    </AnimatedAccordionPanel>\n  )\n}\nAccordionItemPanel.displayName = \"Accordion.Item.Panel\"\n\nexport const AccordionItem = ({\n  children,\n  className,\n  ...props\n}: AccordionItemPropsType) => {\n  return (\n    <ReachAccordionItem\n      className={cx(\"cobalt-accordions-list__item\", className)}\n      {...props}\n    >\n      {children}\n    </ReachAccordionItem>\n  )\n}\nAccordionItem.displayName = \"Accordion.Item\"\nAccordionItem.Header = AccordionItemHeader\nAccordionItem.Panel = AccordionItemPanel\n\nconst Accordion = ({\n  className,\n  children,\n  index,\n  collapsible = true,\n  multiple = false,\n  ...props\n}: AccordionPropsType) => {\n  const hasIndex = index === 0 || !!index\n  return (\n    <ReachAccordion\n      className={cx(\"cobalt-accordions-list\", className)}\n      collapsible={!hasIndex && collapsible}\n      multiple={!hasIndex && multiple}\n      index={index}\n      {...props}\n    >\n      {children}\n    </ReachAccordion>\n  )\n}\nAccordion.Item = AccordionItem\n\nexport default Accordion\n"],"names":["ReachAccordionButton","ReachAccordionPanel","ReachAccordionItem","ReachAccordion"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport {\n  Accordion as ReachAccordion,\n  AccordionItem as ReachAccordionItem,\n  AccordionButton as ReachAccordionButton,\n  AccordionPanel as ReachAccordionPanel,\n  AccordionProps as ReachAccordionProps,\n  AccordionItemProps as ReachAccordionItemProps,\n  AccordionButtonProps as ReachAccordionButtonProps,\n  useAccordionItemContext,\n  AccordionPanelProps as ReachAccordionPanelProps,\n} from \"@reach/accordion\"\nimport ToggleIcon from \"./ToggleIcon\"\nimport { animated, useSpring } from \"@react-spring/web\"\nimport useElementHeight from \"../../hooks/useElementHeight\"\nexport { useAccordionItemContext } from \"@reach/accordion\"\n\ntype HeadingLevelMapType = {\n  h2: 2\n  h3: 3\n  h4: 4\n  h5: 5\n  h6: 6\n}\n\ntype HeadingTag = keyof HeadingLevelMapType\nexport type AccordionItemHeaderPropsType = {\n  /**\n   * To improve the semantics of the markup further, the ARIA guidelines dictate\n   * that each accordion item's button should be wrapped in an element with\n   * role=\"heading\", or more simply, an HTML heading tag.\n   * https://reach.tech/accordion/#accordion-headings\n   */\n  headingLevel?: HeadingLevelMapType[HeadingTag]\n  className?: string\n  leftToggleIcon?: boolean\n  useChevron?: boolean\n} & ReachAccordionButtonProps\n\nexport type AccordionItemPanelPropsType = {\n  className?: string\n} & ReachAccordionPanelProps\nexport type AccordionItemPropsType = {\n  className?: string\n} & ReachAccordionItemProps\nexport type AccordionPropsType = {\n  className?: string\n  // We have to explicit them below to get displayed by Storybook\n  // should work without but might be an issue on Storybook side\n  collapsible?: ReachAccordionProps[\"collapsible\"]\n  defaultIndex?: ReachAccordionProps[\"defaultIndex\"]\n  index?: ReachAccordionProps[\"index\"]\n  multiple?: ReachAccordionProps[\"multiple\"]\n  onChange?: ReachAccordionProps[\"onChange\"]\n} & ReachAccordionProps\n\nconst accordionSpringConfig = { tension: 300, friction: 30, clamp: true }\n\nexport const AccordionItemHeader = forwardRef<\n  HTMLButtonElement,\n  AccordionItemHeaderPropsType\n>(\n  (\n    {\n      headingLevel = 4,\n      className,\n      leftToggleIcon = false,\n      useChevron = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { isExpanded } = useAccordionItemContext()\n    const Heading = `h${headingLevel}` as HeadingTag\n    return (\n      <Heading>\n        <ReachAccordionButton\n          ref={ref}\n          className={cx(\"cobalt-accordion__header\", {\n            \"cobalt-accordion__header--left-toggle-icon\": leftToggleIcon,\n          })}\n          {...props}\n        >\n          <span className={cx(\"cobalt-accordion__header-content\", className)}>\n            {children}\n          </span>\n          <ToggleIcon useChevron={useChevron} isOpen={isExpanded} />\n        </ReachAccordionButton>\n      </Heading>\n    )\n  }\n)\nAccordionItemHeader.displayName = \"Accordion.Item.Header\"\n\nconst AnimatedAccordionPanel = animated(ReachAccordionPanel)\nexport const AccordionItemPanel = ({\n  children,\n  className,\n  ...props\n}: AccordionItemPanelPropsType) => {\n  const { isExpanded } = useAccordionItemContext()\n  const { ref, height } = useElementHeight<HTMLDivElement>()\n  const animation = useSpring({\n    opacity: isExpanded ? 1 : 0,\n    height: isExpanded ? height : 0,\n    overflow: \"hidden\",\n    config: accordionSpringConfig,\n  })\n\n  return (\n    <AnimatedAccordionPanel\n      style={animation}\n      // We need to set hidden to false for the exit animations to work\n      // but the panel should still be hidden from the accessibility tree\n      // when the panel is closed. We'll use aria-hidden instead.\n      hidden={false}\n      aria-hidden={!isExpanded || undefined}\n      {...props}\n    >\n      <div ref={ref} className={cx(\"cobalt-accordion__panel\", className)}>\n        {children}\n      </div>\n    </AnimatedAccordionPanel>\n  )\n}\nAccordionItemPanel.displayName = \"Accordion.Item.Panel\"\n\nexport const AccordionItem = ({\n  children,\n  className,\n  ...props\n}: AccordionItemPropsType) => {\n  return (\n    <ReachAccordionItem\n      className={cx(\"cobalt-accordions-list__item\", className)}\n      {...props}\n    >\n      {children}\n    </ReachAccordionItem>\n  )\n}\nAccordionItem.displayName = \"Accordion.Item\"\nAccordionItem.Header = AccordionItemHeader\nAccordionItem.Panel = AccordionItemPanel\n\nconst Accordion = ({\n  className,\n  children,\n  index,\n  collapsible = true,\n  multiple = false,\n  ...props\n}: AccordionPropsType) => {\n  const hasIndex = index === 0 || !!index\n  return (\n    <ReachAccordion\n      className={cx(\"cobalt-accordions-list\", className)}\n      collapsible={!hasIndex && collapsible}\n      multiple={!hasIndex && multiple}\n      index={index}\n      {...props}\n    >\n      {children}\n    </ReachAccordion>\n  )\n}\nAccordion.Item = AccordionItem\n\nexport default Accordion\n"],"names":["ReachAccordionButton","ReachAccordionPanel","ReachAccordionItem","ReachAccordion"],"mappings":"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"}

package/components/Form/Stepper.js

@@ -2,6 +2,9 @@ import React, { PureComponent } from 'react';
 import cx from 'classnames';
 import { withFieldLabelAndHint } from './field.js';
 import DefaultButton from '../Buttons/DefaultButton/index.js';
+import '../Icon/index.js';
+import MinusIcon from '../Icon/__generated__/MinusIcon.js';
+import PlusIcon from '../Icon/__generated__/PlusIcon.js';
 
 const AUTO_CHANGE_TIMEOUT_IN_MS = 750;
 const AUTO_CHANGE_INTERVAL_IN_MS = 150;
@@ -77,11 +80,13 @@ class Stepper extends PureComponent {
                 "cobalt-Stepper--error": status === "error",
             }) },
             React.createElement("div", { className: "cobalt-Stepper__Wrapper" },
-                React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === min, onPointerDown: () => this.onPointerDown(this.onDecrement), onPointerUp: this.onPointerUp, onPointerLeave: this.onPointerUp, type: "button" }, "-"),
+                React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === min, onPointerDown: () => this.onPointerDown(this.onDecrement), onPointerUp: this.onPointerUp, onPointerLeave: this.onPointerUp, type: "button" },
+                    React.createElement(MinusIcon, null)),
                 React.createElement("div", { className: "cobalt-Stepper__ContentWrapper" },
                     children ? children(this.state.value) : this.state.value,
                     React.createElement("input", { type: "hidden", name: name, value: this.state.value })),
-                React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === max, onPointerDown: () => this.onPointerDown(this.onIncrement), onPointerUp: this.onPointerUp, onPointerLeave: this.onPointerUp, type: "button" }, "+"))));
+                React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === max, onPointerDown: () => this.onPointerDown(this.onIncrement), onPointerUp: this.onPointerUp, onPointerLeave: this.onPointerUp, type: "button" },
+                    React.createElement(PlusIcon, null)))));
     }
 }
 const wrappedComponent = withFieldLabelAndHint(Stepper);

package/components/Form/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/Form/Stepper.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport DefaultButton from \"../Buttons/DefaultButton\"\n\nconst AUTO_CHANGE_TIMEOUT_IN_MS = 750\nconst AUTO_CHANGE_INTERVAL_IN_MS = 150\n\nconst enforceInRange = (\n  value: number,\n  min: number | undefined,\n  max: number | undefined\n) => {\n  let enforcedValue = value\n  if (typeof max !== \"undefined\") {\n    enforcedValue = Math.min(enforcedValue, max)\n  }\n  if (typeof min !== \"undefined\") {\n    enforcedValue = Math.max(enforcedValue, min)\n  }\n  return enforcedValue\n}\n\ntype Props = {\n  value: number\n  name?: string\n  disabled?: boolean\n  min?: number\n  max?: number\n  step: number\n  onChange?: (value: number) => void\n  children?: (value: number) => React.ReactNode\n} & FormElement\n\ntype State = {\n  value: number\n}\n\nclass Stepper extends PureComponent<Props, State> {\n  constructor(props: Props) {\n    super(props)\n\n    if (props.step < 0)\n      throw new Error(\"Incorrect step value. Can't be below zero\")\n\n    this.onDecrement = this.onDecrement.bind(this)\n    this.onIncrement = this.onIncrement.bind(this)\n    this.changeValue = this.changeValue.bind(this)\n    this.onPointerDown = this.onPointerDown.bind(this)\n    this.onPointerUp = this.onPointerUp.bind(this)\n\n    this.state = {\n      value: enforceInRange(props.value, props.min, props.max),\n    }\n  }\n\n  timeout: ReturnType<typeof setTimeout> | null = null\n  interval: ReturnType<typeof setInterval> | null = null\n\n  componentDidUpdate(_prevProps: Props, prevState: State) {\n    if (prevState.value !== this.state.value) {\n      this.changeValue(this.state.value)\n    } else if (this.props.value !== this.state.value) {\n      this.changeValue(this.props.value)\n    }\n  }\n\n  onDecrement = () => {\n    ;(this.props.min !== null || this.state.value > this.props.min) &&\n      this.changeValue(\n        parseFloat((this.state.value - this.props.step).toFixed(10))\n      )\n  }\n\n  onIncrement = () => {\n    ;(this.props.max !== null || this.state.value < this.props.max) &&\n      this.changeValue(\n        parseFloat((this.state.value + this.props.step).toFixed(10))\n      )\n  }\n\n  onPointerDown = (callback: () => void) => {\n    callback()\n    this.timeout && clearTimeout(this.timeout)\n    this.timeout = setTimeout(() => {\n      this.interval && clearInterval(this.interval)\n      this.interval = setInterval(callback, AUTO_CHANGE_INTERVAL_IN_MS)\n    }, AUTO_CHANGE_TIMEOUT_IN_MS)\n  }\n\n  onPointerUp = () => {\n    if (this.interval) {\n      clearInterval(this.interval)\n      this.interval = null\n    }\n    this.timeout && clearTimeout(this.timeout)\n  }\n\n  changeValue = (value: number) => {\n    this.setState(\n      {\n        value: enforceInRange(value, this.props.min, this.props.max),\n      },\n      () => {\n        this.props.onChange && this.props.onChange(this.state.value)\n      }\n    )\n  }\n\n  render() {\n    const { name, status, disabled, min, max, children } = this.props\n\n    return (\n      <div\n        className={classNames(\"cobalt-Stepper\", {\n          \"cobalt-Stepper--disabled\": disabled,\n          \"cobalt-Stepper--success\": status === \"success\",\n          \"cobalt-Stepper--error\": status === \"error\",\n        })}\n      >\n        <div className=\"cobalt-Stepper__Wrapper\">\n          <DefaultButton\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === min}\n            onPointerDown={() => this.onPointerDown(this.onDecrement)}\n            onPointerUp={this.onPointerUp}\n            onPointerLeave={this.onPointerUp}\n            type={\"button\"}\n          >\n            -\n          </DefaultButton>\n          <div className=\"cobalt-Stepper__ContentWrapper\">\n            {children ? children(this.state.value) : this.state.value}\n            <input type=\"hidden\" name={name} value={this.state.value} />\n          </div>\n          <DefaultButton\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === max}\n            onPointerDown={() => this.onPointerDown(this.onIncrement)}\n            onPointerUp={this.onPointerUp}\n            onPointerLeave={this.onPointerUp}\n            type={\"button\"}\n          >\n            +\n          </DefaultButton>\n        </div>\n      </div>\n    )\n  }\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Stepper)\nwrappedComponent.displayName = \"Stepper\"\n\nexport { wrappedComponent as Stepper }\n\ntype StepperMetaProps = {\n  children: React.ReactNode\n}\nconst StepperMeta = ({ children }: StepperMetaProps) => {\n  return <div className=\"cobalt-Stepper__Meta\">{children}</div>\n}\n\nexport { StepperMeta }\n"],"names":["classNames"],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Form/Stepper.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport DefaultButton from \"../Buttons/DefaultButton\"\nimport { MinusIcon, PlusIcon } from \"../Icon\"\n\nconst AUTO_CHANGE_TIMEOUT_IN_MS = 750\nconst AUTO_CHANGE_INTERVAL_IN_MS = 150\n\nconst enforceInRange = (\n  value: number,\n  min: number | undefined,\n  max: number | undefined\n) => {\n  let enforcedValue = value\n  if (typeof max !== \"undefined\") {\n    enforcedValue = Math.min(enforcedValue, max)\n  }\n  if (typeof min !== \"undefined\") {\n    enforcedValue = Math.max(enforcedValue, min)\n  }\n  return enforcedValue\n}\n\ntype Props = {\n  value: number\n  name?: string\n  disabled?: boolean\n  min?: number\n  max?: number\n  step: number\n  onChange?: (value: number) => void\n  children?: (value: number) => React.ReactNode\n} & FormElement\n\ntype State = {\n  value: number\n}\n\nclass Stepper extends PureComponent<Props, State> {\n  constructor(props: Props) {\n    super(props)\n\n    if (props.step < 0)\n      throw new Error(\"Incorrect step value. Can't be below zero\")\n\n    this.onDecrement = this.onDecrement.bind(this)\n    this.onIncrement = this.onIncrement.bind(this)\n    this.changeValue = this.changeValue.bind(this)\n    this.onPointerDown = this.onPointerDown.bind(this)\n    this.onPointerUp = this.onPointerUp.bind(this)\n\n    this.state = {\n      value: enforceInRange(props.value, props.min, props.max),\n    }\n  }\n\n  timeout: ReturnType<typeof setTimeout> | null = null\n  interval: ReturnType<typeof setInterval> | null = null\n\n  componentDidUpdate(_prevProps: Props, prevState: State) {\n    if (prevState.value !== this.state.value) {\n      this.changeValue(this.state.value)\n    } else if (this.props.value !== this.state.value) {\n      this.changeValue(this.props.value)\n    }\n  }\n\n  onDecrement = () => {\n    ;(this.props.min !== null || this.state.value > this.props.min) &&\n      this.changeValue(\n        parseFloat((this.state.value - this.props.step).toFixed(10))\n      )\n  }\n\n  onIncrement = () => {\n    ;(this.props.max !== null || this.state.value < this.props.max) &&\n      this.changeValue(\n        parseFloat((this.state.value + this.props.step).toFixed(10))\n      )\n  }\n\n  onPointerDown = (callback: () => void) => {\n    callback()\n    this.timeout && clearTimeout(this.timeout)\n    this.timeout = setTimeout(() => {\n      this.interval && clearInterval(this.interval)\n      this.interval = setInterval(callback, AUTO_CHANGE_INTERVAL_IN_MS)\n    }, AUTO_CHANGE_TIMEOUT_IN_MS)\n  }\n\n  onPointerUp = () => {\n    if (this.interval) {\n      clearInterval(this.interval)\n      this.interval = null\n    }\n    this.timeout && clearTimeout(this.timeout)\n  }\n\n  changeValue = (value: number) => {\n    this.setState(\n      {\n        value: enforceInRange(value, this.props.min, this.props.max),\n      },\n      () => {\n        this.props.onChange && this.props.onChange(this.state.value)\n      }\n    )\n  }\n\n  render() {\n    const { name, status, disabled, min, max, children } = this.props\n\n    return (\n      <div\n        className={classNames(\"cobalt-Stepper\", {\n          \"cobalt-Stepper--disabled\": disabled,\n          \"cobalt-Stepper--success\": status === \"success\",\n          \"cobalt-Stepper--error\": status === \"error\",\n        })}\n      >\n        <div className=\"cobalt-Stepper__Wrapper\">\n          <DefaultButton\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === min}\n            onPointerDown={() => this.onPointerDown(this.onDecrement)}\n            onPointerUp={this.onPointerUp}\n            onPointerLeave={this.onPointerUp}\n            type={\"button\"}\n          >\n            <MinusIcon />\n          </DefaultButton>\n          <div className=\"cobalt-Stepper__ContentWrapper\">\n            {children ? children(this.state.value) : this.state.value}\n            <input type=\"hidden\" name={name} value={this.state.value} />\n          </div>\n          <DefaultButton\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === max}\n            onPointerDown={() => this.onPointerDown(this.onIncrement)}\n            onPointerUp={this.onPointerUp}\n            onPointerLeave={this.onPointerUp}\n            type={\"button\"}\n          >\n            <PlusIcon />\n          </DefaultButton>\n        </div>\n      </div>\n    )\n  }\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Stepper)\nwrappedComponent.displayName = \"Stepper\"\n\nexport { wrappedComponent as Stepper }\n\ntype StepperMetaProps = {\n  children: React.ReactNode\n}\nconst StepperMeta = ({ children }: StepperMetaProps) => {\n  return <div className=\"cobalt-Stepper__Meta\">{children}</div>\n}\n\nexport { StepperMeta }\n"],"names":["classNames"],"mappings":"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"}

package/components/Icon/__generated__/CircledArrowLeftIcon.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import capitalize from '../../utils/capitalize.js';
+import 'lodash.throttle';
+import cx from 'classnames';
+
+const iconSource = "circledArrowLeft";
+const CircledArrowLeftIcon = ({ color, size = 24, contained = false, className, }) => {
+    const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
+        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        "cobalt-Icon--size16": size === 16,
+        "cobalt-Icon--size20": size === 20,
+        "cobalt-Icon--size32": size === 32,
+        "cobalt-Icon--contained": contained,
+    });
+    const wrap = (content) => (React.createElement("span", { className: computedClassName }, content));
+    return wrap(React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+        React.createElement("path", { d: "M12.957 16.543 9.414 13H18v-2H9.414l3.543-3.543-1.414-1.414L5.586 12l5.957 5.957z" }),
+        React.createElement("path", { fillRule: "evenodd", d: "M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m2 0a9 9 0 1 1 18 0 9 9 0 0 1-18 0", clipRule: "evenodd" })));
+};
+
+export { CircledArrowLeftIcon as default };
+//# sourceMappingURL=CircledArrowLeftIcon.js.map

package/components/Icon/__generated__/CircledArrowLeftIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircledArrowLeftIcon.js","sources":["../../../../src/components/Icon/__generated__/CircledArrowLeftIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"circledArrowLeft\"\nconst CircledArrowLeftIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n      <path d=\"M12.957 16.543 9.414 13H18v-2H9.414l3.543-3.543-1.414-1.414L5.586 12l5.957 5.957z\" />\n      <path\n        fillRule=\"evenodd\"\n        d=\"M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m2 0a9 9 0 1 1 18 0 9 9 0 0 1-18 0\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  )\n}\nexport default CircledArrowLeftIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,kBAAkB,CAAA;AACrC,MAAM,oBAAoB,GAAG,CAAC,EAC5B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;QACzD,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,mFAAmF,EAAG,CAAA;AAC9F,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,0GAA0G,EAC5G,QAAQ,EAAC,SAAS,EAClB,CAAA,CACE,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/FilepdfIcon.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import capitalize from '../../utils/capitalize.js';
+import 'lodash.throttle';
+import cx from 'classnames';
+
+const iconSource = "filepdf";
+const FilepdfIcon = ({ color, size = 24, contained = false, className, }) => {
+    const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
+        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        "cobalt-Icon--size16": size === 16,
+        "cobalt-Icon--size20": size === 20,
+        "cobalt-Icon--size32": size === 32,
+        "cobalt-Icon--contained": contained,
+    });
+    const wrap = (content) => (React.createElement("span", { className: computedClassName }, content));
+    return wrap(React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+        React.createElement("path", { fillRule: "evenodd", d: "M5.375 19.125H3.5a.627.627 0 0 1-.625-.625v-15c0-.344.281-.625.625-.625h6.25V6c0 .691.559 1.25 1.25 1.25h3.125v5.625H16v-5.84a2.5 2.5 0 0 0-.73-1.77L11.734 1.73A2.5 2.5 0 0 0 9.964 1H3.5A2.5 2.5 0 0 0 1 3.5v15C1 19.879 2.121 21 3.5 21h1.875zm13.514-3.762V21h1.434v-2.102h2.183v-1.097h-2.183v-1.285h2.402v-1.153zM13.019 21v-5.637h2.367q.843 0 1.43.325.59.32.898.937t.309 1.496v.008q0 .922-.305 1.566a2.14 2.14 0 0 1-.895.973q-.586.332-1.437.332zm1.433-1.152h.676q.465 0 .781-.192.32-.19.485-.566.168-.38.168-.934v-.008q0-.523-.172-.886a1.2 1.2 0 0 0-.492-.555 1.47 1.47 0 0 0-.77-.191h-.676zm-5.354-.496V21H7.664v-5.637h2.43q.629 0 1.094.25.465.246.718.696.258.445.258 1.05v.008q0 .602-.258 1.051-.254.445-.719.691-.465.243-1.093.243zm0-1.086h.648q.457 0 .711-.23.258-.232.258-.669v-.008q0-.441-.258-.668-.255-.225-.71-.226h-.65z", clipRule: "evenodd" })));
+};
+
+export { FilepdfIcon as default };
+//# sourceMappingURL=FilepdfIcon.js.map

package/components/Icon/__generated__/FilepdfIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilepdfIcon.js","sources":["../../../../src/components/Icon/__generated__/FilepdfIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"filepdf\"\nconst FilepdfIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M5.375 19.125H3.5a.627.627 0 0 1-.625-.625v-15c0-.344.281-.625.625-.625h6.25V6c0 .691.559 1.25 1.25 1.25h3.125v5.625H16v-5.84a2.5 2.5 0 0 0-.73-1.77L11.734 1.73A2.5 2.5 0 0 0 9.964 1H3.5A2.5 2.5 0 0 0 1 3.5v15C1 19.879 2.121 21 3.5 21h1.875zm13.514-3.762V21h1.434v-2.102h2.183v-1.097h-2.183v-1.285h2.402v-1.153zM13.019 21v-5.637h2.367q.843 0 1.43.325.59.32.898.937t.309 1.496v.008q0 .922-.305 1.566a2.14 2.14 0 0 1-.895.973q-.586.332-1.437.332zm1.433-1.152h.676q.465 0 .781-.192.32-.19.485-.566.168-.38.168-.934v-.008q0-.523-.172-.886a1.2 1.2 0 0 0-.492-.555 1.47 1.47 0 0 0-.77-.191h-.676zm-5.354-.496V21H7.664v-5.637h2.43q.629 0 1.094.25.465.246.718.696.258.445.258 1.05v.008q0 .602-.258 1.051-.254.445-.719.691-.465.243-1.093.243zm0-1.086h.648q.457 0 .711-.23.258-.232.258-.669v-.008q0-.441-.258-.668-.255-.225-.71-.226h-.65z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  )\n}\nexport default FilepdfIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,SAAS,CAAA;AAC5B,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,8zBAA8zB,EACh0B,QAAQ,EAAC,SAAS,EAClB,CAAA,CACE,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/FilexlsIcon.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import capitalize from '../../utils/capitalize.js';
+import 'lodash.throttle';
+import cx from 'classnames';
+
+const iconSource = "filexls";
+const FilexlsIcon = ({ color, size = 24, contained = false, className, }) => {
+    const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
+        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        "cobalt-Icon--size16": size === 16,
+        "cobalt-Icon--size20": size === 20,
+        "cobalt-Icon--size32": size === 32,
+        "cobalt-Icon--contained": contained,
+    });
+    const wrap = (content) => (React.createElement("span", { className: computedClassName }, content));
+    return wrap(React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+        React.createElement("path", { fillRule: "evenodd", d: "M5.375 19.125H3.5a.627.627 0 0 1-.625-.625v-15c0-.344.281-.625.625-.625h6.25V6c0 .691.559 1.25 1.25 1.25h3.125v5.625H16v-5.84a2.5 2.5 0 0 0-.73-1.77L11.734 1.73A2.5 2.5 0 0 0 9.964 1H3.5A2.5 2.5 0 0 0 1 3.5v15C1 19.879 2.121 21 3.5 21h1.875zm13.705 1.824q.516.203 1.22.203.74 0 1.273-.23.531-.234.812-.656.285-.426.285-1v-.004q0-.457-.187-.778a1.4 1.4 0 0 0-.57-.527q-.387-.207-.989-.324l-.582-.113q-.456-.087-.664-.227a.45.45 0 0 1-.203-.387v-.004q0-.168.098-.293a.65.65 0 0 1 .285-.199q.183-.075.437-.074.262 0 .461.074a.8.8 0 0 1 .317.207q.12.129.152.309l.008.043h1.328l-.004-.047a1.77 1.77 0 0 0-.312-.883 1.8 1.8 0 0 0-.762-.605q-.489-.223-1.195-.223-.65 0-1.153.226-.504.223-.793.633-.288.406-.293.957v.004q0 .66.406 1.078.411.419 1.301.594l.582.113q.496.098.703.227a.41.41 0 0 1 .207.367v.004a.48.48 0 0 1-.117.316.73.73 0 0 1-.32.22q-.207.077-.488.077-.285 0-.504-.078a.9.9 0 0 1-.348-.21.53.53 0 0 1-.148-.31l-.004-.034h-1.371l.003.07q.032.524.32.902.294.375.81.582M13.52 21v-5.637h1.433v4.485h2.395V21zm-4.46-2.83L7.339 21h1.528l1.086-1.828h.035L11.086 21h1.61l-1.778-2.819v-.02l1.793-2.798h-1.594l-1.024 1.907h-.042L9.02 15.363H7.34l1.719 2.782z", clipRule: "evenodd" })));
+};
+
+export { FilexlsIcon as default };
+//# sourceMappingURL=FilexlsIcon.js.map

package/components/Icon/__generated__/FilexlsIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilexlsIcon.js","sources":["../../../../src/components/Icon/__generated__/FilexlsIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"filexls\"\nconst FilexlsIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M5.375 19.125H3.5a.627.627 0 0 1-.625-.625v-15c0-.344.281-.625.625-.625h6.25V6c0 .691.559 1.25 1.25 1.25h3.125v5.625H16v-5.84a2.5 2.5 0 0 0-.73-1.77L11.734 1.73A2.5 2.5 0 0 0 9.964 1H3.5A2.5 2.5 0 0 0 1 3.5v15C1 19.879 2.121 21 3.5 21h1.875zm13.705 1.824q.516.203 1.22.203.74 0 1.273-.23.531-.234.812-.656.285-.426.285-1v-.004q0-.457-.187-.778a1.4 1.4 0 0 0-.57-.527q-.387-.207-.989-.324l-.582-.113q-.456-.087-.664-.227a.45.45 0 0 1-.203-.387v-.004q0-.168.098-.293a.65.65 0 0 1 .285-.199q.183-.075.437-.074.262 0 .461.074a.8.8 0 0 1 .317.207q.12.129.152.309l.008.043h1.328l-.004-.047a1.77 1.77 0 0 0-.312-.883 1.8 1.8 0 0 0-.762-.605q-.489-.223-1.195-.223-.65 0-1.153.226-.504.223-.793.633-.288.406-.293.957v.004q0 .66.406 1.078.411.419 1.301.594l.582.113q.496.098.703.227a.41.41 0 0 1 .207.367v.004a.48.48 0 0 1-.117.316.73.73 0 0 1-.32.22q-.207.077-.488.077-.285 0-.504-.078a.9.9 0 0 1-.348-.21.53.53 0 0 1-.148-.31l-.004-.034h-1.371l.003.07q.032.524.32.902.294.375.81.582M13.52 21v-5.637h1.433v4.485h2.395V21zm-4.46-2.83L7.339 21h1.528l1.086-1.828h.035L11.086 21h1.61l-1.778-2.819v-.02l1.793-2.798h-1.594l-1.024 1.907h-.042L9.02 15.363H7.34l1.719 2.782z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  )\n}\nexport default FilexlsIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,SAAS,CAAA;AAC5B,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,soCAAsoC,EACxoC,QAAQ,EAAC,SAAS,EAClB,CAAA,CACE,CACP,CAAA;AACH;;;;"}

package/components/Layout/Components/LayoutCard.js

@@ -4,8 +4,8 @@ import cx from 'classnames';
 const LayoutCardItem = ({ children }) => {
     return React.createElement("div", { className: "cobalt-layout-card__item" }, children);
 };
-const LayoutCard = ({ children, isPageHeader, }) => {
-    return (React.createElement("div", { className: cx("cobalt-layout-card", {
+const LayoutCard = ({ children, isPageHeader, className, }) => {
+    return (React.createElement("div", { className: cx("cobalt-layout-card", className, {
             "cobalt-layout--isPageHeader": isPageHeader,
         }) }, children));
 };

package/components/Layout/Components/LayoutCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutCard.js","sources":["../../../../src/components/Layout/Components/LayoutCard.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nconst LayoutCardItem = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"cobalt-layout-card__item\">{children}</div>\n}\n\nconst LayoutCard = ({\n  children,\n  isPageHeader,\n}: {\n  children: React.ReactNode\n  isPageHeader?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\"cobalt-layout-card\", {\n        \"cobalt-layout--isPageHeader\": isPageHeader,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nLayoutCard.Item = LayoutCardItem\n\nexport default LayoutCard\n"],"names":[],"mappings":";;;AAGA,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAiC,KAAI;AACrE,IAAA,OAAO,6BAAK,SAAS,EAAC,0BAA0B,EAAE,EAAA,QAAQ,CAAO,CAAA;AACnE,CAAC,CAAA;AAEK,MAAA,UAAU,GAAG,CAAC,EAClB,QAAQ,EACR,YAAY,GAIb,KAAI;AACH,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE;AAClC,YAAA,6BAA6B,EAAE,YAAY;AAC5C,SAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AACH,EAAC;AAED,UAAU,CAAC,IAAI,GAAG,cAAc;;;;"}
+{"version":3,"file":"LayoutCard.js","sources":["../../../../src/components/Layout/Components/LayoutCard.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nconst LayoutCardItem = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"cobalt-layout-card__item\">{children}</div>\n}\n\nconst LayoutCard = ({\n  children,\n  isPageHeader,\n  className,\n}: {\n  children: React.ReactNode\n  isPageHeader?: boolean\n  className?: string\n}) => {\n  return (\n    <div\n      className={cx(\"cobalt-layout-card\", className, {\n        \"cobalt-layout--isPageHeader\": isPageHeader,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nLayoutCard.Item = LayoutCardItem\n\nexport default LayoutCard\n"],"names":[],"mappings":";;;AAGA,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAiC,KAAI;AACrE,IAAA,OAAO,6BAAK,SAAS,EAAC,0BAA0B,EAAE,EAAA,QAAQ,CAAO,CAAA;AACnE,CAAC,CAAA;AAEK,MAAA,UAAU,GAAG,CAAC,EAClB,QAAQ,EACR,YAAY,EACZ,SAAS,GAKV,KAAI;IACH,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,SAAS,EAAE;AAC7C,YAAA,6BAA6B,EAAE,YAAY;AAC5C,SAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AACH,EAAC;AAED,UAAU,CAAC,IAAI,GAAG,cAAc;;;;"}

package/components/Layout/Components/LayoutSection.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import cx from 'classnames';
 
-const LayoutSection = ({ children, isPageHeader, }) => {
-    return (React.createElement("div", { className: cx("cobalt-layout-section", {
+const LayoutSection = ({ children, isPageHeader, className, }) => {
+    return (React.createElement("div", { className: cx("cobalt-layout-section", className, {
             "cobalt-layout--isPageHeader": isPageHeader,
         }) }, children));
 };

package/components/Layout/Components/LayoutSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutSection.js","sources":["../../../../src/components/Layout/Components/LayoutSection.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nconst LayoutSection = ({\n  children,\n  isPageHeader,\n}: {\n  children: React.ReactNode\n  isPageHeader?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\"cobalt-layout-section\", {\n        \"cobalt-layout--isPageHeader\": isPageHeader,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport default LayoutSection\n"],"names":[],"mappings":";;;AAGM,MAAA,aAAa,GAAG,CAAC,EACrB,QAAQ,EACR,YAAY,GAIb,KAAI;AACH,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE;AACrC,YAAA,6BAA6B,EAAE,YAAY;AAC5C,SAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AACH;;;;"}
+{"version":3,"file":"LayoutSection.js","sources":["../../../../src/components/Layout/Components/LayoutSection.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nconst LayoutSection = ({\n  children,\n  isPageHeader,\n  className,\n}: {\n  children: React.ReactNode\n  isPageHeader?: boolean\n  className?: string\n}) => {\n  return (\n    <div\n      className={cx(\"cobalt-layout-section\", className, {\n        \"cobalt-layout--isPageHeader\": isPageHeader,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport default LayoutSection\n"],"names":[],"mappings":";;;AAGM,MAAA,aAAa,GAAG,CAAC,EACrB,QAAQ,EACR,YAAY,EACZ,SAAS,GAKV,KAAI;IACH,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,EAAE;AAChD,YAAA,6BAA6B,EAAE,YAAY;AAC5C,SAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AACH;;;;"}

package/components/Layout/Surfaces/index.js

@@ -13,19 +13,22 @@ const getDirectionClasses = (direction) => {
     }
     return directionClasses;
 };
-const Flexible = ({ children, direction = "column", bottomPadding = false, }) => {
+const Flexible = ({ children, direction = "column", bottomPadding = false, isFullHeight = false, }) => {
     return (React.createElement("div", { className: cx("cobalt-layout-flexible", getDirectionClasses(direction), {
             "cobalt-layout--bottomPadding": bottomPadding,
+            "cobalt-layout--fullHeight": isFullHeight,
         }) }, children));
 };
-const FlexibleWithConstraint = ({ children, size, direction = "column", bottomPadding = false, }) => {
+const FlexibleWithConstraint = ({ children, size, direction = "column", bottomPadding = false, isFullHeight = false, }) => {
     return (React.createElement("div", { className: cx(`cobalt-layout-flexibleWithConstraint cobalt-layout-flexibleWithConstraint--${size}`, getDirectionClasses(direction), {
             "cobalt-layout--bottomPadding": bottomPadding,
+            "cobalt-layout--fullHeight": isFullHeight,
         }) }, children));
 };
-const Fixed = ({ children, width, direction = "column", bottomPadding = false, }) => {
+const Fixed = ({ children, width, direction = "column", bottomPadding = false, isFullHeight = false, }) => {
     return (React.createElement("div", { className: cx(`cobalt-layout-fixed cobalt-layout-fixed--${width}`, getDirectionClasses(direction), {
             "cobalt-layout--bottomPadding": bottomPadding,
+            "cobalt-layout--fullHeight": isFullHeight,
         }) }, children));
 };
 

package/components/Layout/Surfaces/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Layout/Surfaces/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\"\nimport cx from \"classnames\"\nimport { breakpoints } from \"../../../tokens\"\n\nexport type ResponsiveProp<T> = {\n  [key in keyof typeof breakpoints]?: T\n}\n\ntype DirectionProp = \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\"\ntype ResponsiveDirection = ResponsiveProp<DirectionProp>\n\nconst getDirectionClasses = (\n  direction: ResponsiveDirection | DirectionProp\n) => {\n  const directionClasses: string[] = []\n  if (typeof direction === \"string\") {\n    directionClasses.push(`c-flex-${direction}`.replace(\"column\", \"col\"))\n  } else {\n    for (const [key, value] of Object.entries(direction)) {\n      directionClasses.push(`${key}:c-flex-${value}`.replace(\"column\", \"col\"))\n    }\n  }\n  return directionClasses\n}\n\nexport const Flexible = ({\n  children,\n  direction = \"column\",\n  bottomPadding = false,\n}: {\n  children?: ReactNode\n  direction?: ResponsiveDirection | DirectionProp\n  bottomPadding?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\"cobalt-layout-flexible\", getDirectionClasses(direction), {\n        \"cobalt-layout--bottomPadding\": bottomPadding,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport const FlexibleWithConstraint = ({\n  children,\n  size,\n  direction = \"column\",\n  bottomPadding = false,\n}: {\n  children?: ReactNode\n  size: \"small\" | \"medium\" | \"large\"\n  direction?: ResponsiveDirection | DirectionProp\n  bottomPadding?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\n        `cobalt-layout-flexibleWithConstraint cobalt-layout-flexibleWithConstraint--${size}`,\n        getDirectionClasses(direction),\n        {\n          \"cobalt-layout--bottomPadding\": bottomPadding,\n        }\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport const Fixed = ({\n  children,\n  width,\n  direction = \"column\",\n  bottomPadding = false,\n}: {\n  children?: ReactNode\n  width: 280 | 420 | 600\n  direction?: ResponsiveDirection | DirectionProp\n  bottomPadding?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\n        `cobalt-layout-fixed cobalt-layout-fixed--${width}`,\n        getDirectionClasses(direction),\n        {\n          \"cobalt-layout--bottomPadding\": bottomPadding,\n        }\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAWA,MAAM,mBAAmB,GAAG,CAC1B,SAA8C,KAC5C;IACF,MAAM,gBAAgB,GAAa,EAAE,CAAA;AACrC,IAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;AACjC,QAAA,gBAAgB,CAAC,IAAI,CAAC,CAAA,OAAA,EAAU,SAAS,CAAE,CAAA,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;KACtE;SAAM;AACL,QAAA,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;AACpD,YAAA,gBAAgB,CAAC,IAAI,CAAC,CAAG,EAAA,GAAG,WAAW,KAAK,CAAA,CAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;SACzE;KACF;AACD,IAAA,OAAO,gBAAgB,CAAA;AACzB,CAAC,CAAA;AAEY,MAAA,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,GAKtB,KAAI;AACH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE;AACtE,YAAA,8BAA8B,EAAE,aAAa;AAC9C,SAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AACH,EAAC;AAEY,MAAA,sBAAsB,GAAG,CAAC,EACrC,QAAQ,EACR,IAAI,EACJ,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,GAMtB,KAAI;AACH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,CAAA,2EAAA,EAA8E,IAAI,CAAA,CAAE,EACpF,mBAAmB,CAAC,SAAS,CAAC,EAC9B;AACE,YAAA,8BAA8B,EAAE,aAAa;AAC9C,SAAA,CACF,EAEA,EAAA,QAAQ,CACL,EACP;AACH,EAAC;AAEY,MAAA,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,GAMtB,KAAI;AACH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,CAAA,yCAAA,EAA4C,KAAK,CAAA,CAAE,EACnD,mBAAmB,CAAC,SAAS,CAAC,EAC9B;AACE,YAAA,8BAA8B,EAAE,aAAa;AAC9C,SAAA,CACF,EAEA,EAAA,QAAQ,CACL,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Layout/Surfaces/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\"\nimport cx from \"classnames\"\nimport { breakpoints } from \"../../../tokens\"\n\nexport type ResponsiveProp<T> = {\n  [key in keyof typeof breakpoints]?: T\n}\n\ntype DirectionProp = \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\"\ntype ResponsiveDirection = ResponsiveProp<DirectionProp>\n\nconst getDirectionClasses = (\n  direction: ResponsiveDirection | DirectionProp\n) => {\n  const directionClasses: string[] = []\n  if (typeof direction === \"string\") {\n    directionClasses.push(`c-flex-${direction}`.replace(\"column\", \"col\"))\n  } else {\n    for (const [key, value] of Object.entries(direction)) {\n      directionClasses.push(`${key}:c-flex-${value}`.replace(\"column\", \"col\"))\n    }\n  }\n  return directionClasses\n}\n\nexport const Flexible = ({\n  children,\n  direction = \"column\",\n  bottomPadding = false,\n  isFullHeight = false,\n}: {\n  children?: ReactNode\n  direction?: ResponsiveDirection | DirectionProp\n  bottomPadding?: boolean\n  isFullHeight?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\"cobalt-layout-flexible\", getDirectionClasses(direction), {\n        \"cobalt-layout--bottomPadding\": bottomPadding,\n        \"cobalt-layout--fullHeight\": isFullHeight,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport const FlexibleWithConstraint = ({\n  children,\n  size,\n  direction = \"column\",\n  bottomPadding = false,\n  isFullHeight = false,\n}: {\n  children?: ReactNode\n  size: \"small\" | \"medium\" | \"large\"\n  direction?: ResponsiveDirection | DirectionProp\n  bottomPadding?: boolean\n  isFullHeight?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\n        `cobalt-layout-flexibleWithConstraint cobalt-layout-flexibleWithConstraint--${size}`,\n        getDirectionClasses(direction),\n        {\n          \"cobalt-layout--bottomPadding\": bottomPadding,\n          \"cobalt-layout--fullHeight\": isFullHeight,\n        }\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport const Fixed = ({\n  children,\n  width,\n  direction = \"column\",\n  bottomPadding = false,\n  isFullHeight = false,\n}: {\n  children?: ReactNode\n  width: 280 | 420 | 600\n  direction?: ResponsiveDirection | DirectionProp\n  bottomPadding?: boolean\n  isFullHeight?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\n        `cobalt-layout-fixed cobalt-layout-fixed--${width}`,\n        getDirectionClasses(direction),\n        {\n          \"cobalt-layout--bottomPadding\": bottomPadding,\n          \"cobalt-layout--fullHeight\": isFullHeight,\n        }\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAWA,MAAM,mBAAmB,GAAG,CAC1B,SAA8C,KAC5C;IACF,MAAM,gBAAgB,GAAa,EAAE,CAAA;AACrC,IAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;AACjC,QAAA,gBAAgB,CAAC,IAAI,CAAC,CAAA,OAAA,EAAU,SAAS,CAAE,CAAA,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;KACtE;SAAM;AACL,QAAA,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;AACpD,YAAA,gBAAgB,CAAC,IAAI,CAAC,CAAG,EAAA,GAAG,WAAW,KAAK,CAAA,CAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;SACzE;KACF;AACD,IAAA,OAAO,gBAAgB,CAAA;AACzB,CAAC,CAAA;MAEY,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,KAAK,GAMrB,KAAI;AACH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE;AACtE,YAAA,8BAA8B,EAAE,aAAa;AAC7C,YAAA,2BAA2B,EAAE,YAAY;AAC1C,SAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AACH,EAAC;MAEY,sBAAsB,GAAG,CAAC,EACrC,QAAQ,EACR,IAAI,EACJ,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,KAAK,GAOrB,KAAI;AACH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,CAAA,2EAAA,EAA8E,IAAI,CAAA,CAAE,EACpF,mBAAmB,CAAC,SAAS,CAAC,EAC9B;AACE,YAAA,8BAA8B,EAAE,aAAa;AAC7C,YAAA,2BAA2B,EAAE,YAAY;AAC1C,SAAA,CACF,EAEA,EAAA,QAAQ,CACL,EACP;AACH,EAAC;MAEY,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,KAAK,GAOrB,KAAI;AACH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,CAAA,yCAAA,EAA4C,KAAK,CAAA,CAAE,EACnD,mBAAmB,CAAC,SAAS,CAAC,EAC9B;AACE,YAAA,8BAA8B,EAAE,aAAa;AAC7C,YAAA,2BAA2B,EAAE,YAAY;AAC1C,SAAA,CACF,EAEA,EAAA,QAAQ,CACL,EACP;AACH;;;;"}

package/components/Pagination/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import cx from 'classnames';
+import DefaultButton from '../Buttons/DefaultButton/index.js';
+import '../Icon/index.js';
+import DotsHorizontalIcon from '../Icon/__generated__/DotsHorizontalIcon.js';
+
+const PaginationButton = ({ currentPage, pageNumber, onPageChange, }) => {
+    const isActive = currentPage === pageNumber;
+    return (React.createElement(DefaultButton, { className: cx("cobalt-pagination__DefaultButton"), selected: isActive, onClick: () => !isActive && onPageChange(pageNumber) }, pageNumber));
+};
+const PAGE_DOTS_VALUE = -1; // Unrevelant value only used to represent dots in the pages array
+const generatePages = (currentPage, totalPages) => {
+    const pages = [];
+    const maxVisiblePages = 11; // Always show exactly 11 visible pages (excluding dots)
+    const edgeButtons = 3; // Number of fixed edge buttons
+    if (totalPages <= maxVisiblePages) {
+        // Show all pages
+        for (let i = 1; i <= totalPages; i++) {
+            pages.push(i);
+        }
+        return pages;
+    }
+    // Calculate dynamic range for middle pages
+    const middlePagesCount = maxVisiblePages - 2 * edgeButtons; // Remaining pages for the middle
+    let startMiddlePage = Math.max(currentPage - Math.floor(middlePagesCount / 2), edgeButtons + 1);
+    let endMiddlePage = Math.min(currentPage + Math.floor(middlePagesCount / 2), totalPages - edgeButtons);
+    // Adjust start and end pages if they exceed boundaries
+    if (startMiddlePage === edgeButtons + 1) {
+        endMiddlePage = startMiddlePage + middlePagesCount - 1;
+    }
+    else if (endMiddlePage === totalPages - edgeButtons) {
+        startMiddlePage = endMiddlePage - middlePagesCount + 1;
+    }
+    // Add leading edge buttons
+    for (let i = 1; i <= edgeButtons; i++) {
+        pages.push(i);
+    }
+    if (startMiddlePage > edgeButtons + 1) {
+        pages.push(PAGE_DOTS_VALUE);
+    }
+    // Add middle pages
+    for (let i = startMiddlePage; i <= endMiddlePage; i++) {
+        pages.push(i);
+    }
+    // Add trailing edge buttons
+    if (endMiddlePage < totalPages - edgeButtons) {
+        pages.push(PAGE_DOTS_VALUE);
+    }
+    for (let i = totalPages - edgeButtons + 1; i <= totalPages; i++) {
+        pages.push(i);
+    }
+    return pages;
+};
+// eslint-disable-next-line complexity
+const Pagination = ({ onPageChange, currentPage, totalPages, }) => {
+    if (totalPages <= 1)
+        return null;
+    const pages = generatePages(currentPage, totalPages);
+    return (React.createElement("div", { className: "cobalt-pagination" },
+        React.createElement(DefaultButton, { className: cx("cobalt-pagination__DefaultButton"), disabled: currentPage === 1, onClick: () => onPageChange(currentPage - 1), icon: "chevronLeft" }),
+        pages.map((page, index) => page === PAGE_DOTS_VALUE ? (React.createElement(DotsHorizontalIcon, { key: `dots-${index}`, className: "cobalt-pagination__threeDots", color: "accent" })) : (React.createElement(PaginationButton, { key: page, currentPage: currentPage, pageNumber: page, onPageChange: onPageChange }))),
+        React.createElement(DefaultButton, { className: cx("cobalt-pagination__DefaultButton"), disabled: currentPage === totalPages, onClick: () => onPageChange(currentPage + 1), icon: "chevronRight" })));
+};
+
+export { Pagination as default };
+//# sourceMappingURL=index.js.map

package/components/Pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport DefaultButton from \"../Buttons/DefaultButton\"\nimport { DotsHorizontalIcon } from \"../Icon\"\n\nconst PaginationButton = ({\n  currentPage,\n  pageNumber,\n  onPageChange,\n}: {\n  currentPage: number\n  pageNumber: number\n  onPageChange: (page: number) => void\n}) => {\n  const isActive = currentPage === pageNumber\n  return (\n    <DefaultButton\n      className={cx(\"cobalt-pagination__DefaultButton\")}\n      selected={isActive}\n      onClick={() => !isActive && onPageChange(pageNumber)}\n    >\n      {pageNumber}\n    </DefaultButton>\n  )\n}\n\nconst PAGE_DOTS_VALUE = -1 // Unrevelant value only used to represent dots in the pages array\n\nconst generatePages = (currentPage: number, totalPages: number) => {\n  const pages: number[] = []\n  const maxVisiblePages = 11 // Always show exactly 11 visible pages (excluding dots)\n  const edgeButtons = 3 // Number of fixed edge buttons\n\n  if (totalPages <= maxVisiblePages) {\n    // Show all pages\n    for (let i = 1; i <= totalPages; i++) {\n      pages.push(i)\n    }\n    return pages\n  }\n\n  // Calculate dynamic range for middle pages\n  const middlePagesCount = maxVisiblePages - 2 * edgeButtons // Remaining pages for the middle\n  let startMiddlePage = Math.max(\n    currentPage - Math.floor(middlePagesCount / 2),\n    edgeButtons + 1\n  )\n  let endMiddlePage = Math.min(\n    currentPage + Math.floor(middlePagesCount / 2),\n    totalPages - edgeButtons\n  )\n\n  // Adjust start and end pages if they exceed boundaries\n  if (startMiddlePage === edgeButtons + 1) {\n    endMiddlePage = startMiddlePage + middlePagesCount - 1\n  } else if (endMiddlePage === totalPages - edgeButtons) {\n    startMiddlePage = endMiddlePage - middlePagesCount + 1\n  }\n\n  // Add leading edge buttons\n  for (let i = 1; i <= edgeButtons; i++) {\n    pages.push(i)\n  }\n  if (startMiddlePage > edgeButtons + 1) {\n    pages.push(PAGE_DOTS_VALUE)\n  }\n\n  // Add middle pages\n  for (let i = startMiddlePage; i <= endMiddlePage; i++) {\n    pages.push(i)\n  }\n\n  // Add trailing edge buttons\n  if (endMiddlePage < totalPages - edgeButtons) {\n    pages.push(PAGE_DOTS_VALUE)\n  }\n  for (let i = totalPages - edgeButtons + 1; i <= totalPages; i++) {\n    pages.push(i)\n  }\n\n  return pages\n}\n\n// eslint-disable-next-line complexity\nconst Pagination = ({\n  onPageChange,\n  currentPage,\n  totalPages,\n}: {\n  currentPage: number\n  totalPages: number\n  onPageChange: (page: number) => void\n}) => {\n  if (totalPages <= 1) return null\n  const pages = generatePages(currentPage, totalPages)\n\n  return (\n    <div className=\"cobalt-pagination\">\n      <DefaultButton\n        className={cx(\"cobalt-pagination__DefaultButton\")}\n        disabled={currentPage === 1}\n        onClick={() => onPageChange(currentPage - 1)}\n        icon=\"chevronLeft\"\n      />\n      {pages.map((page, index) =>\n        page === PAGE_DOTS_VALUE ? (\n          <DotsHorizontalIcon\n            key={`dots-${index}`}\n            className=\"cobalt-pagination__threeDots\"\n            color=\"accent\"\n          />\n        ) : (\n          <PaginationButton\n            key={page}\n            currentPage={currentPage}\n            pageNumber={page}\n            onPageChange={onPageChange}\n          />\n        )\n      )}\n      <DefaultButton\n        className={cx(\"cobalt-pagination__DefaultButton\")}\n        disabled={currentPage === totalPages}\n        onClick={() => onPageChange(currentPage + 1)}\n        icon=\"chevronRight\"\n      />\n    </div>\n  )\n}\n\nexport default Pagination\n"],"names":[],"mappings":";;;;;;AAKA,MAAM,gBAAgB,GAAG,CAAC,EACxB,WAAW,EACX,UAAU,EACV,YAAY,GAKb,KAAI;AACH,IAAA,MAAM,QAAQ,GAAG,WAAW,KAAK,UAAU,CAAA;AAC3C,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAE,EAAE,CAAC,kCAAkC,CAAC,EACjD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,MAAM,CAAC,QAAQ,IAAI,YAAY,CAAC,UAAU,CAAC,EAAA,EAEnD,UAAU,CACG,EACjB;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,CAAC,CAAA;AAE1B,MAAM,aAAa,GAAG,CAAC,WAAmB,EAAE,UAAkB,KAAI;IAChE,MAAM,KAAK,GAAa,EAAE,CAAA;AAC1B,IAAA,MAAM,eAAe,GAAG,EAAE,CAAA;AAC1B,IAAA,MAAM,WAAW,GAAG,CAAC,CAAA;AAErB,IAAA,IAAI,UAAU,IAAI,eAAe,EAAE;;AAEjC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,UAAU,EAAE,CAAC,EAAE,EAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;SACd;AACD,QAAA,OAAO,KAAK,CAAA;KACb;;IAGD,MAAM,gBAAgB,GAAG,eAAe,GAAG,CAAC,GAAG,WAAW,CAAA;IAC1D,IAAI,eAAe,GAAG,IAAI,CAAC,GAAG,CAC5B,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,CAAC,CAAC,EAC9C,WAAW,GAAG,CAAC,CAChB,CAAA;IACD,IAAI,aAAa,GAAG,IAAI,CAAC,GAAG,CAC1B,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,CAAC,CAAC,EAC9C,UAAU,GAAG,WAAW,CACzB,CAAA;;AAGD,IAAA,IAAI,eAAe,KAAK,WAAW,GAAG,CAAC,EAAE;AACvC,QAAA,aAAa,GAAG,eAAe,GAAG,gBAAgB,GAAG,CAAC,CAAA;KACvD;AAAM,SAAA,IAAI,aAAa,KAAK,UAAU,GAAG,WAAW,EAAE;AACrD,QAAA,eAAe,GAAG,aAAa,GAAG,gBAAgB,GAAG,CAAC,CAAA;KACvD;;AAGD,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,WAAW,EAAE,CAAC,EAAE,EAAE;AACrC,QAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KACd;AACD,IAAA,IAAI,eAAe,GAAG,WAAW,GAAG,CAAC,EAAE;AACrC,QAAA,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;KAC5B;;AAGD,IAAA,KAAK,IAAI,CAAC,GAAG,eAAe,EAAE,CAAC,IAAI,aAAa,EAAE,CAAC,EAAE,EAAE;AACrD,QAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KACd;;AAGD,IAAA,IAAI,aAAa,GAAG,UAAU,GAAG,WAAW,EAAE;AAC5C,QAAA,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;KAC5B;AACD,IAAA,KAAK,IAAI,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,CAAC,EAAE,CAAC,IAAI,UAAU,EAAE,CAAC,EAAE,EAAE;AAC/D,QAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;KACd;AAED,IAAA,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAED;AACM,MAAA,UAAU,GAAG,CAAC,EAClB,YAAY,EACZ,WAAW,EACX,UAAU,GAKX,KAAI;IACH,IAAI,UAAU,IAAI,CAAC;AAAE,QAAA,OAAO,IAAI,CAAA;IAChC,MAAM,KAAK,GAAG,aAAa,CAAC,WAAW,EAAE,UAAU,CAAC,CAAA;AAEpD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,EAAA;AAChC,QAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAE,EAAE,CAAC,kCAAkC,CAAC,EACjD,QAAQ,EAAE,WAAW,KAAK,CAAC,EAC3B,OAAO,EAAE,MAAM,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,EAC5C,IAAI,EAAC,aAAa,EAClB,CAAA;QACD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KACrB,IAAI,KAAK,eAAe,IACtB,KAAC,CAAA,aAAA,CAAA,kBAAkB,EACjB,EAAA,GAAG,EAAE,CAAA,KAAA,EAAQ,KAAK,CAAA,CAAE,EACpB,SAAS,EAAC,8BAA8B,EACxC,KAAK,EAAC,QAAQ,EACd,CAAA,KAEF,KAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,GAAG,EAAE,IAAI,EACT,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,IAAI,EAChB,YAAY,EAAE,YAAY,EAC1B,CAAA,CACH,CACF;AACD,QAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAE,EAAE,CAAC,kCAAkC,CAAC,EACjD,QAAQ,EAAE,WAAW,KAAK,UAAU,EACpC,OAAO,EAAE,MAAM,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,EAC5C,IAAI,EAAC,cAAc,EACnB,CAAA,CACE,EACP;AACH;;;;"}

package/components/Sidepanel/index.js

@@ -4,6 +4,7 @@ import Modal from '../Modal/index.js';
 import useBreakpoint from '../../hooks/useBreakpoint.js';
 import '../Icon/index.js';
 import ReactDOM from 'react-dom';
+import { Fixed } from '../Layout/Surfaces/index.js';
 import CloseIcon from '../Icon/__generated__/CloseIcon.js';
 
 const SidepanelFooter = ({ children, className }) => {
@@ -26,7 +27,7 @@ SidepanelContent.displayName = "SidepanelContent";
 // Only for the API, render nothing
 const SidepanelFooterAPI = (_props) => null;
 const isSidepanelFooterAPIComponent = (component) => React.isValidElement(component) && component.type === SidepanelFooterAPI;
-const _Sidepanel = ({ isOpen, title, close, withDesktopOverlay, children, }) => {
+const _Sidepanel = ({ isOpen, title, close, withDesktopOverlay, width = 420, children, }) => {
     const { isMobile } = useBreakpoint();
     // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition
     const [isPanelVisible, setIsPanelVisible] = useState(false);
@@ -47,9 +48,10 @@ const _Sidepanel = ({ isOpen, title, close, withDesktopOverlay, children, }) =>
             }), onTransitionEnd: () => {
                 !isOpen && setIsPanelVisible(false);
             } },
-            React.createElement(SidepanelContent, { isOpen: isOpen, title: title, close: close },
-                children,
-                footer)),
+            React.createElement(Fixed, { width: width, isFullHeight: true },
+                React.createElement(SidepanelContent, { isOpen: isOpen, title: title, close: close },
+                    children,
+                    footer))),
         withDesktopOverlay && React.createElement("div", { className: "cobalt-sidepanel-overlay" })), document.body));
 };
 _Sidepanel.displayName = "Sidepanel";

package/components/Sidepanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Sidepanel/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport cx from \"classnames\"\nimport Modal from \"../Modal\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport { CloseIcon } from \"../Icon\"\nimport ReactDOM from \"react-dom\"\n\ntype SidepanelFooterPropsType = React.PropsWithChildren<{\n  className?: string\n}>\n\nconst SidepanelFooter = ({ children, className }: SidepanelFooterPropsType) => {\n  return (\n    <div className={cx(\"c-p-sm c-border-t c-border-base\", className)}>\n      {children}\n    </div>\n  )\n}\n\ntype SidepanelPropsType = React.PropsWithChildren<{\n  isOpen: boolean\n  title?: string\n  close?: () => void\n  withDesktopOverlay?: boolean\n}>\n\n// Memoized component to not render content when the panel is collapsing\nfunction _SidepanelContent({ title, close, children }: SidepanelPropsType) {\n  return (\n    <>\n      {title && (\n        <div className=\"c-flex c-gap-sm c-items-center c-px-sm c-py-md c-border-b c-border-base\">\n          <div className=\"c-text-title-md c-flex-1\">{title}</div>\n          {close && (\n            <div className=\"c-w-md c-cursor-pointer\" onClick={close}>\n              <CloseIcon size={24} />\n            </div>\n          )}\n        </div>\n      )}\n      {children}\n    </>\n  )\n}\n\nfunction areSidepanelContentEqual(\n  _prevProps: SidepanelPropsType,\n  nextProps: SidepanelPropsType\n) {\n  return !nextProps.isOpen\n}\n\nconst SidepanelContent = React.memo(_SidepanelContent, areSidepanelContentEqual)\nSidepanelContent.displayName = \"SidepanelContent\"\n\n// Only for the API, render nothing\nconst SidepanelFooterAPI = (_props: SidepanelFooterPropsType) => null\n\nconst isSidepanelFooterAPIComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<SidepanelFooterPropsType> =>\n  React.isValidElement(component) && component.type === SidepanelFooterAPI\n\nconst _Sidepanel = ({\n  isOpen,\n  title,\n  close,\n  withDesktopOverlay,\n  children,\n}: SidepanelPropsType) => {\n  const { isMobile } = useBreakpoint()\n\n  // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition\n  const [isPanelVisible, setIsPanelVisible] = useState(false)\n\n  useEffect(() => {\n    isOpen && setIsPanelVisible(true)\n  }, [isOpen])\n\n  const sidepanelFooter = React.Children.toArray(children).find((c) =>\n    isSidepanelFooterAPIComponent(c)\n  )\n\n  let footer: React.ReactNode = null\n  if (React.isValidElement(sidepanelFooter)) {\n    footer = isMobile ? (\n      <Modal.Footer {...sidepanelFooter.props}></Modal.Footer>\n    ) : (\n      <SidepanelFooter {...sidepanelFooter.props} />\n    )\n  }\n\n  return isMobile ? (\n    <Modal\n      aria-label={\"Sidepanel\"}\n      isOpen={isOpen}\n      bodySpacing={false}\n      close={close}\n      title={title}\n    >\n      {children}\n      {footer}\n    </Modal>\n  ) : (\n    ReactDOM.createPortal(\n      <>\n        <div\n          className={cx(\"cobalt-sidepanel\", {\n            \"cobalt-sidepanel--show\": isOpen,\n            \"cobalt-sidepanel--visible\": isPanelVisible,\n          })}\n          onTransitionEnd={() => {\n            !isOpen && setIsPanelVisible(false)\n          }}\n        >\n          <SidepanelContent isOpen={isOpen} title={title} close={close}>\n            {children}\n            {footer}\n          </SidepanelContent>\n        </div>\n        {withDesktopOverlay && <div className=\"cobalt-sidepanel-overlay\"></div>}\n      </>,\n      document.body\n    )\n  )\n}\n\n_Sidepanel.displayName = \"Sidepanel\"\n\nexport const Sidepanel = Object.assign(_Sidepanel, {\n  Footer: SidepanelFooterAPI,\n})\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Sidepanel/index.tsx"],"sourcesContent":["import React, { ComponentProps, useEffect, useState } from \"react\"\nimport cx from \"classnames\"\nimport Modal from \"../Modal\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport { CloseIcon } from \"../Icon\"\nimport ReactDOM from \"react-dom\"\nimport { Fixed } from \"../Layout/Surfaces\"\n\ntype SidepanelFooterPropsType = React.PropsWithChildren<{\n  className?: string\n}>\n\nconst SidepanelFooter = ({ children, className }: SidepanelFooterPropsType) => {\n  return (\n    <div className={cx(\"c-p-sm c-border-t c-border-base\", className)}>\n      {children}\n    </div>\n  )\n}\n\ntype SidepanelPropsType = React.PropsWithChildren<{\n  isOpen: boolean\n  title?: string\n  close?: () => void\n  width?: ComponentProps<typeof Fixed>[\"width\"]\n  withDesktopOverlay?: boolean\n}>\n\n// Memoized component to not render content when the panel is collapsing\nfunction _SidepanelContent({ title, close, children }: SidepanelPropsType) {\n  return (\n    <>\n      {title && (\n        <div className=\"c-flex c-gap-sm c-items-center c-px-sm c-py-md c-border-b c-border-base\">\n          <div className=\"c-text-title-md c-flex-1\">{title}</div>\n          {close && (\n            <div className=\"c-w-md c-cursor-pointer\" onClick={close}>\n              <CloseIcon size={24} />\n            </div>\n          )}\n        </div>\n      )}\n      {children}\n    </>\n  )\n}\n\nfunction areSidepanelContentEqual(\n  _prevProps: SidepanelPropsType,\n  nextProps: SidepanelPropsType\n) {\n  return !nextProps.isOpen\n}\n\nconst SidepanelContent = React.memo(_SidepanelContent, areSidepanelContentEqual)\nSidepanelContent.displayName = \"SidepanelContent\"\n\n// Only for the API, render nothing\nconst SidepanelFooterAPI = (_props: SidepanelFooterPropsType) => null\n\nconst isSidepanelFooterAPIComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<SidepanelFooterPropsType> =>\n  React.isValidElement(component) && component.type === SidepanelFooterAPI\n\nconst _Sidepanel = ({\n  isOpen,\n  title,\n  close,\n  withDesktopOverlay,\n  width = 420,\n  children,\n}: SidepanelPropsType) => {\n  const { isMobile } = useBreakpoint()\n\n  // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition\n  const [isPanelVisible, setIsPanelVisible] = useState(false)\n\n  useEffect(() => {\n    isOpen && setIsPanelVisible(true)\n  }, [isOpen])\n\n  const sidepanelFooter = React.Children.toArray(children).find((c) =>\n    isSidepanelFooterAPIComponent(c)\n  )\n\n  let footer: React.ReactNode = null\n  if (React.isValidElement(sidepanelFooter)) {\n    footer = isMobile ? (\n      <Modal.Footer {...sidepanelFooter.props}></Modal.Footer>\n    ) : (\n      <SidepanelFooter {...sidepanelFooter.props} />\n    )\n  }\n\n  return isMobile ? (\n    <Modal\n      aria-label={\"Sidepanel\"}\n      isOpen={isOpen}\n      bodySpacing={false}\n      close={close}\n      title={title}\n    >\n      {children}\n      {footer}\n    </Modal>\n  ) : (\n    ReactDOM.createPortal(\n      <>\n        <div\n          className={cx(\"cobalt-sidepanel\", {\n            \"cobalt-sidepanel--show\": isOpen,\n            \"cobalt-sidepanel--visible\": isPanelVisible,\n          })}\n          onTransitionEnd={() => {\n            !isOpen && setIsPanelVisible(false)\n          }}\n        >\n          <Fixed width={width} isFullHeight>\n            <SidepanelContent isOpen={isOpen} title={title} close={close}>\n              {children}\n              {footer}\n            </SidepanelContent>\n          </Fixed>\n        </div>\n        {withDesktopOverlay && <div className=\"cobalt-sidepanel-overlay\"></div>}\n      </>,\n      document.body\n    )\n  )\n}\n\n_Sidepanel.displayName = \"Sidepanel\"\n\nexport const Sidepanel = Object.assign(_Sidepanel, {\n  Footer: SidepanelFooterAPI,\n})\n"],"names":[],"mappings":"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"}

package/icons/circled-arrow-left.js

@@ -0,0 +1,4 @@
+var circledArrowLeft = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12.957 16.543 9.414 13H18v-2H9.414l3.543-3.543-1.414-1.414L5.586 12l5.957 5.957z\"/><path fill-rule=\"evenodd\" d=\"M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m2 0a9 9 0 1 1 18 0 9 9 0 0 1-18 0\" clip-rule=\"evenodd\"/></svg>";
+
+export { circledArrowLeft as default };
+//# sourceMappingURL=circled-arrow-left.js.map

package/icons/circled-arrow-left.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circled-arrow-left.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/icons/circled-arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.957 16.543 9.414 13H18v-2H9.414l3.543-3.543-1.414-1.414L5.586 12l5.957 5.957z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m2 0a9 9 0 1 1 18 0 9 9 0 0 1-18 0" clip-rule="evenodd"/></svg>