@drivy/cobalt 0.51.0 → 1.0.0-beta.1

package/cjs/tokens/zIndexes.js

@@ -32,7 +32,8 @@ var _zIndexes = {
 	"modal-above": 91,
 	"alert-below": 99,
 	alert: alert,
-	"alert-above": 101
+	"alert-above": 101,
+	"autocomplete-popover": 2147483647
 };
 
 exports.above = above;

package/cjs/tokens/zIndexes.js.map

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

package/components/Accordion/index.js

@@ -1,52 +1,36 @@
-import React, { forwardRef } from 'react';
+import React, { useId } from 'react';
+import { Accordion as Accordion$1, useAccordionItemContext } from '@ark-ui/react';
+export { useAccordionItemContext } from '@ark-ui/react';
 import cx from 'classnames';
-import { useAccordionItemContext, AccordionButton, AccordionPanel, Accordion as Accordion$1, AccordionItem as AccordionItem$1 } from '@reach/accordion';
-export { useAccordionItemContext } from '@reach/accordion';
 import ToggleIcon from './ToggleIcon.js';
-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, useChevron = false, children, ...props }, ref) => {
-    const { isExpanded } = useAccordionItemContext();
+const AccordionItemHeader = ({ children, className, headingLevel = 4, leftToggleIcon, useChevron = false, ...props }) => {
     const Heading = `h${headingLevel}`;
+    const { expanded } = useAccordionItemContext();
     return (React.createElement(Heading, null,
-        React.createElement(AccordionButton, { ref: ref, className: cx("cobalt-accordion__header", {
+        React.createElement(Accordion$1.ItemTrigger, { className: cx("cobalt-accordion__header", {
                 "cobalt-accordion__header--left-toggle-icon": leftToggleIcon,
             }), ...props },
             React.createElement("span", { className: cx("cobalt-accordion__header-content", className) }, children),
-            React.createElement(ToggleIcon, { useChevron: useChevron, isOpen: isExpanded }))));
-});
+            React.createElement(ToggleIcon, { useChevron: useChevron, isOpen: expanded }))));
+};
 AccordionItemHeader.displayName = "Accordion.Item.Header";
-const AnimatedAccordionPanel = animated(AccordionPanel);
 const AccordionItemPanel = ({ children, className, ...props }) => {
-    const { isExpanded } = useAccordionItemContext();
-    const { ref, height } = useElementHeight();
-    const animation = useSpring({
-        opacity: isExpanded ? 1 : 0,
-        height: isExpanded ? height : 0,
-        overflow: "hidden",
-        config: accordionSpringConfig,
-    });
-    return (React.createElement(AnimatedAccordionPanel, { style: animation, 
-        // We need to set hidden to false for the exit animations to work
-        // but the panel should still be hidden from the accessibility tree
-        // when the panel is closed. We'll use aria-hidden instead.
-        hidden: false, "aria-hidden": !isExpanded || undefined, ...props },
-        React.createElement("div", { ref: ref, className: cx("cobalt-accordion__panel", className) }, children)));
+    return (React.createElement(Accordion$1.ItemContent, { className: cx("cobalt-accordion__panel", className), ...props }, children));
 };
 AccordionItemPanel.displayName = "Accordion.Item.Panel";
-const AccordionItem = ({ children, className, ...props }) => {
-    return (React.createElement(AccordionItem$1, { className: cx("cobalt-accordions-list__item", className), ...props }, children));
+const AccordionItem = ({ children, className, value, ...props }) => {
+    const accordionItemId = value || useId();
+    return (React.createElement(Accordion$1.Item, { className: cx("cobalt-accordions-list__item", className), value: accordionItemId, ...props }, children));
 };
 AccordionItem.displayName = "Accordion.Item";
 AccordionItem.Header = AccordionItemHeader;
 AccordionItem.Panel = AccordionItemPanel;
-const Accordion = ({ className, children, index, collapsible = true, multiple = false, ...props }) => {
-    const hasIndex = index === 0 || !!index;
-    return (React.createElement(Accordion$1, { className: cx("cobalt-accordions-list", className), collapsible: !hasIndex && collapsible, multiple: !hasIndex && multiple, index: index, ...props }, children));
+const Accordion = ({ className, children, collapsible = true, onValueChange, ...props }) => {
+    return (React.createElement(Accordion$1.Root, { className: cx("cobalt-accordions-list", className), collapsible: collapsible, onValueChange: (details) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(details.value), ...props }, children));
 };
+Accordion.displayName = "Accordion";
 Accordion.Item = AccordionItem;
 
-export { AccordionItem, AccordionItemHeader, AccordionItemPanel, Accordion as default };
+export { Accordion as default };
 //# sourceMappingURL=index.js.map

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  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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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { useId } from \"react\"\nimport {\n  AccordionItemProps as ArkAccordionItemProps,\n  AccordionItemTriggerProps as ArkAccordionItemTriggerProps,\n  AccordionRootProps as ArkAccordionRootProps,\n  Accordion as ArkAccordion,\n  useAccordionItemContext,\n  AccordionItemContentProps as ArkAccordionItemContentProps,\n  AccordionValueChangeDetails,\n} from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport ToggleIcon from \"./ToggleIcon\"\n\nexport { useAccordionItemContext } from \"@ark-ui/react\"\n\ntype HeadingLevelMapType = {\n  h2: 2\n  h3: 3\n  h4: 4\n  h5: 5\n  h6: 6\n}\n\ntype HeadingTag = keyof HeadingLevelMapType\n\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   */\n  headingLevel?: HeadingLevelMapType[HeadingTag]\n  className?: string\n  leftToggleIcon?: boolean\n  useChevron?: boolean\n} & ArkAccordionItemTriggerProps\n\nexport type AccordionItemPanelPropsType = ArkAccordionItemContentProps\n\nexport type AccordionItemPropsType = Omit<ArkAccordionItemProps, \"value\"> & {\n  value?: ArkAccordionItemProps[\"value\"]\n}\n\nexport type AccordionPropsType = Omit<\n  ArkAccordionRootProps,\n  \"onValueChange\"\n> & {\n  onValueChange?: (value: AccordionValueChangeDetails[\"value\"]) => void\n}\n\nconst AccordionItemHeader = ({\n  children,\n  className,\n  headingLevel = 4,\n  leftToggleIcon,\n  useChevron = false,\n  ...props\n}: AccordionItemHeaderPropsType) => {\n  const Heading = `h${headingLevel}` as HeadingTag\n  const { expanded } = useAccordionItemContext()\n\n  return (\n    <Heading>\n      <ArkAccordion.ItemTrigger\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={expanded} />\n      </ArkAccordion.ItemTrigger>\n    </Heading>\n  )\n}\n\nAccordionItemHeader.displayName = \"Accordion.Item.Header\"\n\nconst AccordionItemPanel = ({\n  children,\n  className,\n  ...props\n}: AccordionItemPanelPropsType) => {\n  return (\n    <ArkAccordion.ItemContent\n      className={cx(\"cobalt-accordion__panel\", className)}\n      {...props}\n    >\n      {children}\n    </ArkAccordion.ItemContent>\n  )\n}\n\nAccordionItemPanel.displayName = \"Accordion.Item.Panel\"\n\nconst AccordionItem = ({\n  children,\n  className,\n  value,\n  ...props\n}: AccordionItemPropsType) => {\n  const accordionItemId = value || useId()\n\n  return (\n    <ArkAccordion.Item\n      className={cx(\"cobalt-accordions-list__item\", className)}\n      value={accordionItemId}\n      {...props}\n    >\n      {children}\n    </ArkAccordion.Item>\n  )\n}\nAccordionItem.displayName = \"Accordion.Item\"\nAccordionItem.Header = AccordionItemHeader\nAccordionItem.Panel = AccordionItemPanel\n\nconst Accordion = ({\n  className,\n  children,\n  collapsible = true,\n  onValueChange,\n  ...props\n}: AccordionPropsType) => {\n  return (\n    <ArkAccordion.Root\n      className={cx(\"cobalt-accordions-list\", className)}\n      collapsible={collapsible}\n      onValueChange={(details) => onValueChange?.(details.value)}\n      {...props}\n    >\n      {children}\n    </ArkAccordion.Root>\n  )\n}\n\nAccordion.displayName = \"Accordion\"\nAccordion.Item = AccordionItem\n\nexport default Accordion\n"],"names":["ArkAccordion"],"mappings":";;;;;;AAkDA,MAAM,mBAAmB,GAAG,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,YAAY,GAAG,CAAC,EAChB,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,GAAG,KAAK,EACqB,KAAI;AACjC,IAAA,MAAM,OAAO,GAAG,CAAI,CAAA,EAAA,YAAY,EAAgB,CAAA;AAChD,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,uBAAuB,EAAE,CAAA;IAE9C,QACE,oBAAC,OAAO,EAAA,IAAA;QACN,KAAC,CAAA,aAAA,CAAAA,WAAY,CAAC,WAAW,EAAA,EACvB,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE;AACxC,gBAAA,4CAA4C,EAAE,cAAc;AAC7D,aAAA,CAAC,KACE,KAAK,EAAA;YAET,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,kCAAkC,EAAE,SAAS,CAAC,EAC/D,EAAA,QAAQ,CACJ;AACP,YAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAA,CAAI,CAC/B,CACnB,EACX;AACH,CAAC,CAAA;AAED,mBAAmB,CAAC,WAAW,GAAG,uBAAuB,CAAA;AAEzD,MAAM,kBAAkB,GAAG,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACoB,KAAI;IAChC,QACE,oBAACA,WAAY,CAAC,WAAW,EACvB,EAAA,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,EAC/C,GAAA,KAAK,IAER,QAAQ,CACgB,EAC5B;AACH,CAAC,CAAA;AAED,kBAAkB,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAEvD,MAAM,aAAa,GAAG,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACe,KAAI;AAC3B,IAAA,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,EAAE,CAAA;IAExC,QACE,KAAC,CAAA,aAAA,CAAAA,WAAY,CAAC,IAAI,IAChB,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,SAAS,CAAC,EACxD,KAAK,EAAE,eAAe,EAAA,GAClB,KAAK,EAER,EAAA,QAAQ,CACS,EACrB;AACH,CAAC,CAAA;AACD,aAAa,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAC5C,aAAa,CAAC,MAAM,GAAG,mBAAmB,CAAA;AAC1C,aAAa,CAAC,KAAK,GAAG,kBAAkB,CAAA;AAExC,MAAM,SAAS,GAAG,CAAC,EACjB,SAAS,EACT,QAAQ,EACR,WAAW,GAAG,IAAI,EAClB,aAAa,EACb,GAAG,KAAK,EACW,KAAI;AACvB,IAAA,QACE,KAAC,CAAA,aAAA,CAAAA,WAAY,CAAC,IAAI,EAAA,EAChB,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAClD,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,CAAC,OAAO,KAAK,aAAa,KAAb,IAAA,IAAA,aAAa,uBAAb,aAAa,CAAG,OAAO,CAAC,KAAK,CAAC,EACtD,GAAA,KAAK,IAER,QAAQ,CACS,EACrB;AACH,EAAC;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AACnC,SAAS,CAAC,IAAI,GAAG,aAAa;;;;"}

package/components/Alerter/index.js

@@ -1,88 +1,56 @@
-import React, { useContext, useReducer } from 'react';
-import { nanoid } from 'nanoid';
-import Portal from '@reach/portal';
+import React from 'react';
+import { createToaster, Portal, Toaster, Toast } from '@ark-ui/react';
+import '../Icon/index.js';
 import cx from 'classnames';
-import { useTransition, config, animated } from '@react-spring/web';
-import Alert from './Alert.js';
-import useBreakpoint from '../../hooks/useBreakpoint.js';
-import 'lodash.throttle';
-import { remToPx } from '../utils/px.js';
+import InfoFilledIcon from '../Icon/__generated__/InfoFilledIcon.js';
+import CheckCircleIcon from '../Icon/__generated__/CheckCircleIcon.js';
+import ContextualWarningCircleFilledIcon from '../Icon/__generated__/ContextualWarningCircleFilledIcon.js';
 
-var AlertActionType;
-(function (AlertActionType) {
-    AlertActionType["send"] = "send";
-    AlertActionType["dismiss"] = "dismiss";
-})(AlertActionType || (AlertActionType = {}));
-const hasDismiss = (alertData) => "dismiss" in alertData;
-const initialQueue = [];
-function alertsReducer(queue, action) {
-    const { type, ...alertData } = action;
-    if (type === AlertActionType.dismiss) {
-        return queue.filter((a) => a.id !== alertData.id);
-    }
-    // We can't send alerts in the queue without providing a way to dismiss it
-    if (type === AlertActionType.send && hasDismiss(alertData))
-        return [alertData].concat(queue);
-    return queue;
-}
-const defaultSendAlert = () => initialQueue; // we never actually use this
-const AlertsContext = React.createContext({
-    queue: initialQueue,
-    sendAlert: defaultSendAlert, // just to mock out the dispatch type and make it not optional
+const DEFAULT_TIMEOUT = 3000;
+const MAX_TEXT_TIMEOUT = 9000;
+const computeTimeDurationFromText = (content) => {
+    if (typeof content !== "string")
+        return DEFAULT_TIMEOUT;
+    return Math.min(Math.max(DEFAULT_TIMEOUT, content.length * 90), MAX_TEXT_TIMEOUT);
+};
+const toaster = createToaster({
+    overlap: true,
+    gap: 12,
+    placement: "bottom",
+    max: 12,
 });
-const AlertsProvider = (props) => {
-    const [queue, dispatch] = useReducer(alertsReducer, initialQueue);
-    const dismissAlert = (args) => {
-        dispatch({
-            type: AlertActionType.dismiss,
-            ...args,
-        });
-    };
-    const sendAlert = (args) => {
-        const alertData = { ...args, id: nanoid() };
-        dispatch({
-            type: AlertActionType.send,
-            ...alertData,
-            dismiss: () => dismissAlert(alertData),
-        });
+const useAlerts = () => {
+    return {
+        sendAlert: ({ message, status, duration, }) => toaster.create({
+            description: message,
+            type: status,
+            placement: "bottom",
+            duration: duration !== null && duration !== void 0 ? duration : computeTimeDurationFromText(message),
+        }),
     };
-    return React.createElement(AlertsContext.Provider, { value: { queue, sendAlert }, ...props });
 };
-// Alerter hook
-const useAlerts = () => {
-    return useContext(AlertsContext);
+const STATUS_ICONS_MAP = {
+    info: InfoFilledIcon,
+    success: CheckCircleIcon,
+    error: ContextualWarningCircleFilledIcon,
 };
-const InnerAlerter = ({ children }) => {
-    const { queue } = useAlerts();
-    const { isMobile } = useBreakpoint();
-    const transformSpring = {
-        from: remToPx(2),
-        enter: 0,
-        leave: isMobile ? remToPx(2) : remToPx(5),
-    };
-    const transition = useTransition(queue, {
-        keys: queue.map((a) => a.id),
-        from: { opacity: 0, transform: transformSpring.from },
-        enter: { opacity: 1, transform: transformSpring.enter },
-        leave: { opacity: 0, transform: transformSpring.leave },
-        config: config.stiff,
-    });
+const STATUS_ICON_COLOR_MAP = {
+    info: "infoAlt",
+    success: "success",
+    error: "error",
+};
+const Alerter = ({ children }) => {
     return (React.createElement(React.Fragment, null,
+        children,
         React.createElement(Portal, null,
-            React.createElement("div", { className: cx("cobalt-alerts", {
-                    "cobalt-alerts--mobile": isMobile,
-                }) }, transition((style, alertData) => (React.createElement(animated.div, { key: alertData.id, style: {
-                    opacity: style.opacity,
-                    ...(isMobile
-                        ? { translateY: style.transform }
-                        : { translateX: style.transform }),
-                } },
-                React.createElement(Alert, { status: alertData.status, dismiss: alertData.dismiss }, alertData.message)))))),
-        children));
-};
-const Alerter = (props) => {
-    return (React.createElement(AlertsProvider, null,
-        React.createElement(InnerAlerter, { ...props })));
+            React.createElement(Toaster, { toaster: toaster, className: "cobalt-alerter" }, (toast) => {
+                const status = toast.type;
+                const IconComp = STATUS_ICONS_MAP[status];
+                return (React.createElement(Toast.Root, { className: cx("cobalt-alert"), key: toast.id },
+                    React.createElement("div", { className: "cobalt-alert__wrapper" },
+                        React.createElement(IconComp, { size: 20, color: STATUS_ICON_COLOR_MAP[status] }),
+                        React.createElement(Toast.Description, null, toast.description))));
+            }))));
 };
 
 export { Alerter as default, useAlerts };

package/components/Alerter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Alerter/index.tsx"],"sourcesContent":["import React, { useContext, useReducer } from \"react\"\nimport { nanoid } from \"nanoid\"\nimport Portal from \"@reach/portal\"\nimport cx from \"classnames\"\nimport { useTransition, animated, config } from \"@react-spring/web\"\n\nimport Alert, { AlertType } from \"./Alert\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport { remToPx } from \"../utils\"\nexport { type AlertStatus } from \"./Alert\"\n\ntype AlertPropsType = Parameters<AlertType>[0]\n\nenum AlertActionType {\n  send = \"send\",\n  dismiss = \"dismiss\",\n}\n\nexport type AlertReducerActionData = {\n  id: string\n  status: AlertPropsType[\"status\"]\n  message: AlertPropsType[\"children\"]\n  // mandatory only for sent alerts\n  dismiss?: AlertPropsType[\"dismiss\"]\n}\n\n// We omit props type private to the Alerter\ntype SendAlertParameters = Omit<AlertReducerActionData, \"dismiss\" | \"id\">\ntype DismissAlertParameters = Omit<AlertReducerActionData, \"dismiss\">\n// We omit types only use in the reducer\ntype AlertsQueue = (Omit<AlertReducerActionData, \"dismiss\"> & {\n  dismiss: NonNullable<AlertReducerActionData[\"dismiss\"]>\n})[]\n\nconst hasDismiss = (\n  alertData: AlertReducerActionData\n): alertData is AlertsQueue[0] => \"dismiss\" in alertData\n\nconst initialQueue: AlertsQueue = []\n\nfunction alertsReducer(\n  queue: AlertsQueue,\n  action: AlertReducerActionData & { type: AlertActionType }\n): AlertsQueue {\n  const { type, ...alertData } = action\n  if (type === AlertActionType.dismiss) {\n    return queue.filter((a) => a.id !== alertData.id)\n  }\n  // We can't send alerts in the queue without providing a way to dismiss it\n  if (type === AlertActionType.send && hasDismiss(alertData))\n    return [alertData].concat(queue)\n  return queue\n}\n\nconst defaultSendAlert: React.Dispatch<SendAlertParameters> = () => initialQueue // we never actually use this\nconst AlertsContext = React.createContext({\n  queue: initialQueue,\n  sendAlert: defaultSendAlert, // just to mock out the dispatch type and make it not optional\n})\n\nconst AlertsProvider = (props: { children?: React.ReactNode }) => {\n  const [queue, dispatch] = useReducer(alertsReducer, initialQueue)\n  const dismissAlert: React.Dispatch<DismissAlertParameters> = (args) => {\n    dispatch({\n      type: AlertActionType.dismiss,\n      ...args,\n    })\n  }\n  const sendAlert: React.Dispatch<SendAlertParameters> = (args) => {\n    const alertData = { ...args, id: nanoid() }\n    dispatch({\n      type: AlertActionType.send,\n      ...alertData,\n      dismiss: () => dismissAlert(alertData),\n    })\n  }\n  return <AlertsContext.Provider value={{ queue, sendAlert }} {...props} />\n}\n\n// Alerter hook\nexport const useAlerts = () => {\n  return useContext(AlertsContext)\n}\n\nconst InnerAlerter = ({ children }: { children: React.ReactNode }) => {\n  const { queue } = useAlerts()\n  const { isMobile } = useBreakpoint()\n\n  const transformSpring = {\n    from: remToPx(2),\n    enter: 0,\n    leave: isMobile ? remToPx(2) : remToPx(5),\n  }\n\n  const transition = useTransition(queue, {\n    keys: queue.map((a) => a.id),\n    from: { opacity: 0, transform: transformSpring.from },\n    enter: { opacity: 1, transform: transformSpring.enter },\n    leave: { opacity: 0, transform: transformSpring.leave },\n    config: config.stiff,\n  })\n\n  return (\n    <>\n      <Portal>\n        <div\n          className={cx(\"cobalt-alerts\", {\n            \"cobalt-alerts--mobile\": isMobile,\n          })}\n        >\n          {transition((style, alertData) => (\n            <animated.div\n              key={alertData.id}\n              style={{\n                opacity: style.opacity,\n                ...(isMobile\n                  ? { translateY: style.transform }\n                  : { translateX: style.transform }),\n              }}\n            >\n              <Alert status={alertData.status} dismiss={alertData.dismiss}>\n                {alertData.message}\n              </Alert>\n            </animated.div>\n          ))}\n        </div>\n      </Portal>\n      {children}\n    </>\n  )\n}\n\nconst Alerter = (props: { children: React.ReactNode }) => {\n  return (\n    <AlertsProvider>\n      <InnerAlerter {...props} />\n    </AlertsProvider>\n  )\n}\n\nexport default Alerter\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Alerter/index.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from \"react\"\nimport { Toast, Toaster, createToaster, Portal } from \"@ark-ui/react\"\nimport {\n  InfoFilledIcon,\n  CheckCircleIcon,\n  ContextualWarningCircleFilledIcon,\n  IconColorsType,\n} from \"../Icon\"\nimport cx from \"classnames\"\n\nconst DEFAULT_TIMEOUT = 3000\nconst MAX_TEXT_TIMEOUT = 9000\n\nexport type AlertStatus = \"info\" | \"success\" | \"error\"\n\nconst computeTimeDurationFromText = (\n  content: string | React.ReactNode\n): number => {\n  if (typeof content !== \"string\") return DEFAULT_TIMEOUT\n  return Math.min(\n    Math.max(DEFAULT_TIMEOUT, content.length * 90),\n    MAX_TEXT_TIMEOUT\n  )\n}\n\nconst toaster = createToaster({\n  overlap: true,\n  gap: 12,\n  placement: \"bottom\",\n  max: 12,\n})\n\nexport const useAlerts = () => {\n  return {\n    sendAlert: ({\n      message,\n      status,\n      duration,\n    }: {\n      message: React.ReactNode\n      status: AlertStatus\n      duration?: number\n    }) =>\n      toaster.create({\n        description: message,\n        type: status,\n        placement: \"bottom\",\n        duration: duration ?? computeTimeDurationFromText(message),\n      }),\n  }\n}\n\nconst STATUS_ICONS_MAP: { [k in AlertStatus]: typeof InfoFilledIcon } = {\n  info: InfoFilledIcon,\n  success: CheckCircleIcon,\n  error: ContextualWarningCircleFilledIcon,\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in AlertStatus]: IconColorsType } = {\n  info: \"infoAlt\",\n  success: \"success\",\n  error: \"error\",\n}\n\nconst Alerter = ({ children }: PropsWithChildren) => {\n  return (\n    <>\n      {children}\n      <Portal>\n        <Toaster toaster={toaster} className=\"cobalt-alerter\">\n          {(toast) => {\n            const status = toast.type as AlertStatus\n            const IconComp = STATUS_ICONS_MAP[status]\n            return (\n              <Toast.Root className={cx(\"cobalt-alert\")} key={toast.id}>\n                <div className=\"cobalt-alert__wrapper\">\n                  <IconComp size={20} color={STATUS_ICON_COLOR_MAP[status]} />\n                  <Toast.Description>{toast.description}</Toast.Description>\n                </div>\n              </Toast.Root>\n            )\n          }}\n        </Toaster>\n      </Portal>\n    </>\n  )\n}\n\nexport default Alerter\n"],"names":[],"mappings":";;;;;;;;AAUA,MAAM,eAAe,GAAG,IAAI,CAAA;AAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAA;AAI7B,MAAM,2BAA2B,GAAG,CAClC,OAAiC,KACvB;IACV,IAAI,OAAO,OAAO,KAAK,QAAQ;AAAE,QAAA,OAAO,eAAe,CAAA;AACvD,IAAA,OAAO,IAAI,CAAC,GAAG,CACb,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,OAAO,CAAC,MAAM,GAAG,EAAE,CAAC,EAC9C,gBAAgB,CACjB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,aAAa,CAAC;AAC5B,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,GAAG,EAAE,EAAE;AACP,IAAA,SAAS,EAAE,QAAQ;AACnB,IAAA,GAAG,EAAE,EAAE;AACR,CAAA,CAAC,CAAA;AAEK,MAAM,SAAS,GAAG,MAAK;IAC5B,OAAO;AACL,QAAA,SAAS,EAAE,CAAC,EACV,OAAO,EACP,MAAM,EACN,QAAQ,GAKT,KACC,OAAO,CAAC,MAAM,CAAC;AACb,YAAA,WAAW,EAAE,OAAO;AACpB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,SAAS,EAAE,QAAQ;YACnB,QAAQ,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,KAAA,CAAA,GAAR,QAAQ,GAAI,2BAA2B,CAAC,OAAO,CAAC;SAC3D,CAAC;KACL,CAAA;AACH,EAAC;AAED,MAAM,gBAAgB,GAAkD;AACtE,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,KAAK,EAAE,iCAAiC;CACzC,CAAA;AAED,MAAM,qBAAqB,GAA2C;AACpE,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;CACf,CAAA;AAED,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAqB,KAAI;AAClD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACG,QAAQ;AACT,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,gBAAgB,EAAA,EAClD,CAAC,KAAK,KAAI;AACT,gBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAmB,CAAA;AACxC,gBAAA,MAAM,QAAQ,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;AACzC,gBAAA,QACE,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,EAAA;oBACtD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;AACpC,wBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,qBAAqB,CAAC,MAAM,CAAC,EAAI,CAAA;wBAC5D,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,WAAW,EAAE,IAAA,EAAA,KAAK,CAAC,WAAW,CAAqB,CACtD,CACK,EACd;AACH,aAAC,CACO,CACH,CACR,EACJ;AACH;;;;"}

package/components/ContainedIcon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ContainedIcon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport capitalize from \"../utils/capitalize\"\nimport { IconColorsType } from \"../Icon\"\nimport cx from \"classnames\"\n\ntype Extends<T, U extends T> = U\n\ntype ContainedIconColorType = Extends<\n  IconColorsType,\n  \"base\" | \"accent\" | \"disabled\" | \"error\" | \"info\" | \"success\" | \"connect\"\n>\n\nexport type ContainedIconPropsType = {\n  icon: React.JSX.Element\n  color?: ContainedIconColorType\n  className?: string\n}\n\nexport function ContainedIcon({\n  icon,\n  color = \"base\",\n  className,\n}: ContainedIconPropsType) {\n  return (\n    <div\n      className={cx(\n        className,\n        `cobalt-contained-icon cobalt-contained-icon--color${capitalize(color)}`\n      )}\n    >\n      {icon}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;AAkBM,SAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,GAAG,MAAM,EACd,SAAS,GACc,EAAA;AACvB,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,SAAS,EACT,CAAA,kDAAA,EAAqD,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,CACzE,IAEA,IAAI,CACD,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ContainedIcon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport capitalize from \"../utils/capitalize\"\nimport { IconColorsType } from \"../Icon\"\nimport cx from \"classnames\"\n\ntype Extends<T, U extends T> = U\n\ntype ContainedIconColorType =\n  | Extends<\n      IconColorsType,\n      | \"base\"\n      | \"accent\"\n      | \"disabled\"\n      | \"error\"\n      | \"info\"\n      | \"success\"\n      | \"connect\"\n      | \"keyExchange\"\n      | \"rideshare\"\n      | \"accentAlt\"\n      | \"disabledAlt\"\n      | \"errorAlt\"\n      | \"infoAlt\"\n      | \"successAlt\"\n      | \"connectAlt\"\n    >\n  | \"baseAlt\"\n\nexport type ContainedIconPropsType = {\n  icon: React.JSX.Element\n  color?: ContainedIconColorType\n  className?: string\n}\n\nexport function ContainedIcon({\n  icon,\n  color = \"base\",\n  className,\n}: ContainedIconPropsType) {\n  return (\n    <div\n      className={cx(\n        className,\n        `cobalt-contained-icon cobalt-contained-icon--color${capitalize(color)}`\n      )}\n    >\n      {icon}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;AAkCM,SAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,GAAG,MAAM,EACd,SAAS,GACc,EAAA;AACvB,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,SAAS,EACT,CAAA,kDAAA,EAAqD,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,CACzE,IAEA,IAAI,CACD,EACP;AACH;;;;"}