@artsy/palette 45.14.0-canary.1497.33065.0 → 45.14.0-canary.1497.33070.0

package/dist/esm/elements/Toasts/Toasts.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toasts.story.js","names":["React","useState","Flex","Button","Text","TOAST_VARIANTS","Toasts","ToastsProvider","useToasts","Separator","Clickable","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Demo","render","_useToasts","sendToast","retractToast","_useState","_useState2","_slicedToArray","activeToasts","setActiveToasts","createElement","Fragment","mb","Object","keys","map","variant","captialized","charAt","toUpperCase","slice","key","size","mr","onClick","_sendToast","message","concat","onClose","closedID","filter","id","_toConsumableArray","_sendToast2","ttl","Infinity","limit","length","my","display","decorators","Story"],"sources":["../../../../src/elements/Toasts/Toasts.story.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { Flex } from \"../Flex\"\nimport { Button } from \"../Button\"\nimport { Text } from \"../Text\"\nimport { ToastVariant, TOAST_VARIANTS } from \"./Toast\"\nimport { Toasts } from \"./Toasts\"\nimport { ToastsProvider, useToasts } from \"./useToasts\"\nimport { Separator } from \"../Separator\"\nimport { Clickable } from \"../Clickable\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Toasts,\n  title: \"Components/Toasts\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A toast container component that manages multiple toast notifications with ToastsProvider.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Demo = {\n  render: () => {\n    const { sendToast, retractToast } = useToasts()\n\n    const [activeToasts, setActiveToasts] = useState<string[]>([])\n\n    return (\n      <>\n        <Flex mb={1}>\n          {(Object.keys(TOAST_VARIANTS) as ToastVariant[]).map((variant) => {\n            const captialized =\n              variant.charAt(0).toUpperCase() + variant.slice(1)\n\n            return (\n              <Button\n                key={variant}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                mr={1}\n                onClick={() => {\n                  const { id } = sendToast({\n                    variant,\n                    message: `${captialized} Title`,\n                    description: \"This is example text.\",\n                    onClose: (closedID) => {\n                      setActiveToasts((activeToasts) => {\n                        return activeToasts.filter((id) => id !== closedID)\n                      })\n                    },\n                  })\n\n                  setActiveToasts((activeToasts) => [...activeToasts, id])\n                }}\n              >\n                {captialized}\n              </Button>\n            )\n          })}\n\n          <Button\n            size=\"small\"\n            variant=\"primaryGray\"\n            onClick={() => {\n              const { id } = sendToast({\n                variant: \"message\",\n                message: \"Until manually dismissed\",\n                description:\n                  \"This toast will hang around until it's manually dismissed.\",\n                ttl: Infinity,\n                onClose: (closedID) => {\n                  setActiveToasts((activeToasts) => {\n                    return activeToasts.filter((id) => id !== closedID)\n                  })\n                },\n              })\n\n              setActiveToasts((activeToasts) => [...activeToasts, id])\n            }}\n          >\n            Until manually dismissed\n          </Button>\n        </Flex>\n\n        <Toasts limit={7} />\n\n        {activeToasts.length > 0 && (\n          <>\n            <Separator my={1} />\n\n            <Text variant=\"xs\">\n              <u>Active toasts:</u>\n\n              {activeToasts.map((id) => {\n                return (\n                  <Clickable\n                    key={id}\n                    display=\"block\"\n                    onClick={() => retractToast(id)}\n                  >\n                    Remove {id}\n                  </Clickable>\n                )\n              })}\n            </Text>\n          </>\n        )}\n      </>\n    )\n  },\n  decorators: [\n    (Story) => (\n      <ToastsProvider>\n        <Story />\n      </ToastsProvider>\n    ),\n  ],\n}\n"],"mappings":"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"}
+{"version":3,"file":"Toasts.story.js","names":["React","useState","Flex","Button","Text","ToastVariant","TOAST_VARIANTS","Toasts","ToastsProvider","useToasts","Separator","Clickable","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Demo","render","_useToasts","sendToast","retractToast","_useState","_useState2","_slicedToArray","activeToasts","setActiveToasts","createElement","Fragment","mb","Object","keys","map","variant","captialized","charAt","toUpperCase","slice","key","size","mr","onClick","_sendToast","message","concat","onClose","closedID","filter","id","_toConsumableArray","_sendToast2","ttl","Infinity","limit","length","my","display","decorators","Story"],"sources":["../../../../src/elements/Toasts/Toasts.story.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { Flex } from \"../Flex\"\nimport { Button } from \"../Button\"\nimport { Text } from \"../Text\"\nimport { ToastVariant, TOAST_VARIANTS } from \"./Toast\"\nimport { Toasts } from \"./Toasts\"\nimport { ToastsProvider, useToasts } from \"./useToasts\"\nimport { Separator } from \"../Separator\"\nimport { Clickable } from \"../Clickable\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Toasts,\n  title: \"Components/Toasts\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A toast container component that manages multiple toast notifications with ToastsProvider.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Demo = {\n  render: () => {\n    const { sendToast, retractToast } = useToasts()\n\n    const [activeToasts, setActiveToasts] = useState<string[]>([])\n\n    return (\n      <>\n        <Flex mb={1}>\n          {(Object.keys(TOAST_VARIANTS) as ToastVariant[]).map((variant) => {\n            const captialized =\n              variant.charAt(0).toUpperCase() + variant.slice(1)\n\n            return (\n              <Button\n                key={variant}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                mr={1}\n                onClick={() => {\n                  const { id } = sendToast({\n                    variant,\n                    message: `${captialized} Title`,\n                    description: \"This is example text.\",\n                    onClose: (closedID) => {\n                      setActiveToasts((activeToasts) => {\n                        return activeToasts.filter((id) => id !== closedID)\n                      })\n                    },\n                  })\n\n                  setActiveToasts((activeToasts) => [...activeToasts, id])\n                }}\n              >\n                {captialized}\n              </Button>\n            )\n          })}\n\n          <Button\n            size=\"small\"\n            variant=\"primaryGray\"\n            onClick={() => {\n              const { id } = sendToast({\n                variant: \"message\",\n                message: \"Until manually dismissed\",\n                description:\n                  \"This toast will hang around until it's manually dismissed.\",\n                ttl: Infinity,\n                onClose: (closedID) => {\n                  setActiveToasts((activeToasts) => {\n                    return activeToasts.filter((id) => id !== closedID)\n                  })\n                },\n              })\n\n              setActiveToasts((activeToasts) => [...activeToasts, id])\n            }}\n          >\n            Until manually dismissed\n          </Button>\n        </Flex>\n\n        <Toasts limit={7} />\n\n        {activeToasts.length > 0 && (\n          <>\n            <Separator my={1} />\n\n            <Text variant=\"xs\">\n              <u>Active toasts:</u>\n\n              {activeToasts.map((id) => {\n                return (\n                  <Clickable\n                    key={id}\n                    display=\"block\"\n                    onClick={() => retractToast(id)}\n                  >\n                    Remove {id}\n                  </Clickable>\n                )\n              })}\n            </Text>\n          </>\n        )}\n      </>\n    )\n  },\n  decorators: [\n    (Story) => (\n      <ToastsProvider>\n        <Story />\n      </ToastsProvider>\n    ),\n  ],\n}\n"],"mappings":"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"}

package/dist/esm/elements/Toasts/useToasts.js

@@ -18,6 +18,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import React, { createContext, useContext, useReducer, useCallback, useRef, useEffect } from "react";
+import { ToastProps } from "./Toast";
 var reducer = function reducer(state, action) {
   switch (action.type) {
     case "SEND":

package/dist/esm/elements/Toasts/useToasts.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToasts.js","names":["React","createContext","useContext","useReducer","useCallback","useRef","useEffect","reducer","state","action","type","_objectSpread","toasts","concat","_toConsumableArray","payload","filter","_ref","id","ToastsContext","sendToast","handleClose","retractToast","ToastsProvider","_ref2","children","_useReducer","_useReducer2","_slicedToArray","dispatch","activeToasts","Map","_toast$onClose","toast","current","get","clearTimeout","timeout","delete","onClose","call","_ref3","_ref3$ttl","ttl","rest","_objectWithoutProperties","_excluded","generateId","set","Infinity","window","setTimeout","forEach","createElement","Provider","value","displayName","useToasts","_useContext","Math","random","toString","slice"],"sources":["../../../../src/elements/Toasts/useToasts.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useReducer,\n  useCallback,\n  useRef,\n  useEffect,\n} from \"react\"\nimport { ToastProps } from \"./Toast\"\n\ninterface Toast extends ToastProps {\n  id: string\n  ttl: number\n  onClose(id: string): void\n}\n\ntype Payload = Omit<Toast, \"id\" | \"ttl\" | \"onClose\"> & {\n  ttl?: number\n  onClose?(id: string): void\n}\n\ntype State = { toasts: Toast[] }\n\ntype Action =\n  | { type: \"SEND\"; payload: Toast }\n  | { type: \"RETRACT\"; payload: { id: string } }\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"SEND\":\n      return { ...state, toasts: [...state.toasts, action.payload] }\n\n    case \"RETRACT\":\n      return {\n        ...state,\n        toasts: state.toasts.filter(({ id }) => {\n          return id !== action.payload.id\n        }),\n      }\n  }\n}\n\nexport const ToastsContext = createContext<{\n  state: State\n  sendToast(toast: Payload): { id: string; handleClose: () => void }\n  retractToast(id: string): void\n}>({\n  state: { toasts: [] },\n  sendToast: () => {\n    return {\n      id: \"\",\n      handleClose: () => {\n        // NOOP\n      },\n    }\n  },\n  retractToast: () => {\n    // NOOP\n  },\n})\n\nexport const ToastsProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {\n  const [state, dispatch] = useReducer(reducer, { toasts: [] })\n\n  const activeToasts = useRef<\n    Map<\n      string,\n      {\n        timeout: number\n        onClose?: (id: string) => void\n      }\n    >\n  >(new Map())\n\n  const retractToast = useCallback((id: string) => {\n    const toast = activeToasts.current.get(id)\n\n    if (!toast) return\n\n    clearTimeout(toast.timeout)\n\n    activeToasts.current.delete(id)\n\n    dispatch({ type: \"RETRACT\", payload: { id } })\n\n    toast.onClose?.(id)\n  }, [])\n\n  const sendToast = useCallback(\n    ({ ttl = 6000, onClose, ...rest }: Payload) => {\n      const id = generateId()\n\n      const handleClose = () => {\n        retractToast(id)\n      }\n\n      dispatch({\n        type: \"SEND\",\n        payload: { ...rest, id, ttl, onClose: handleClose },\n      })\n\n      activeToasts.current.set(id, {\n        timeout: ttl !== Infinity ? window.setTimeout(handleClose, ttl) : -1,\n        onClose,\n      })\n\n      return { id, handleClose }\n    },\n    [retractToast]\n  )\n\n  useEffect(() => {\n    const toasts = activeToasts.current\n\n    return () => {\n      toasts.forEach((toast) => clearTimeout(toast.timeout))\n    }\n  }, [])\n\n  return (\n    <ToastsContext.Provider value={{ state, sendToast, retractToast }}>\n      {children}\n    </ToastsContext.Provider>\n  )\n}\n\nexport const useToasts = () => {\n  const {\n    state: { toasts },\n    sendToast,\n    retractToast,\n  } = useContext(ToastsContext)\n\n  return { toasts, sendToast, retractToast }\n}\n\nconst generateId = () => Math.random().toString(26).slice(2)\n"],"mappings":"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"}
+{"version":3,"file":"useToasts.js","names":["React","createContext","useContext","useReducer","useCallback","useRef","useEffect","ToastProps","reducer","state","action","type","_objectSpread","toasts","concat","_toConsumableArray","payload","filter","_ref","id","ToastsContext","sendToast","handleClose","retractToast","ToastsProvider","_ref2","children","_useReducer","_useReducer2","_slicedToArray","dispatch","activeToasts","Map","_toast$onClose","toast","current","get","clearTimeout","timeout","delete","onClose","call","_ref3","_ref3$ttl","ttl","rest","_objectWithoutProperties","_excluded","generateId","set","Infinity","window","setTimeout","forEach","createElement","Provider","value","displayName","useToasts","_useContext","Math","random","toString","slice"],"sources":["../../../../src/elements/Toasts/useToasts.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useReducer,\n  useCallback,\n  useRef,\n  useEffect,\n} from \"react\"\nimport { ToastProps } from \"./Toast\"\n\ninterface Toast extends ToastProps {\n  id: string\n  ttl: number\n  onClose(id: string): void\n}\n\ntype Payload = Omit<Toast, \"id\" | \"ttl\" | \"onClose\"> & {\n  ttl?: number\n  onClose?(id: string): void\n}\n\ntype State = { toasts: Toast[] }\n\ntype Action =\n  | { type: \"SEND\"; payload: Toast }\n  | { type: \"RETRACT\"; payload: { id: string } }\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"SEND\":\n      return { ...state, toasts: [...state.toasts, action.payload] }\n\n    case \"RETRACT\":\n      return {\n        ...state,\n        toasts: state.toasts.filter(({ id }) => {\n          return id !== action.payload.id\n        }),\n      }\n  }\n}\n\nexport const ToastsContext = createContext<{\n  state: State\n  sendToast(toast: Payload): { id: string; handleClose: () => void }\n  retractToast(id: string): void\n}>({\n  state: { toasts: [] },\n  sendToast: () => {\n    return {\n      id: \"\",\n      handleClose: () => {\n        // NOOP\n      },\n    }\n  },\n  retractToast: () => {\n    // NOOP\n  },\n})\n\nexport const ToastsProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {\n  const [state, dispatch] = useReducer(reducer, { toasts: [] })\n\n  const activeToasts = useRef<\n    Map<\n      string,\n      {\n        timeout: number\n        onClose?: (id: string) => void\n      }\n    >\n  >(new Map())\n\n  const retractToast = useCallback((id: string) => {\n    const toast = activeToasts.current.get(id)\n\n    if (!toast) return\n\n    clearTimeout(toast.timeout)\n\n    activeToasts.current.delete(id)\n\n    dispatch({ type: \"RETRACT\", payload: { id } })\n\n    toast.onClose?.(id)\n  }, [])\n\n  const sendToast = useCallback(\n    ({ ttl = 6000, onClose, ...rest }: Payload) => {\n      const id = generateId()\n\n      const handleClose = () => {\n        retractToast(id)\n      }\n\n      dispatch({\n        type: \"SEND\",\n        payload: { ...rest, id, ttl, onClose: handleClose },\n      })\n\n      activeToasts.current.set(id, {\n        timeout: ttl !== Infinity ? window.setTimeout(handleClose, ttl) : -1,\n        onClose,\n      })\n\n      return { id, handleClose }\n    },\n    [retractToast]\n  )\n\n  useEffect(() => {\n    const toasts = activeToasts.current\n\n    return () => {\n      toasts.forEach((toast) => clearTimeout(toast.timeout))\n    }\n  }, [])\n\n  return (\n    <ToastsContext.Provider value={{ state, sendToast, retractToast }}>\n      {children}\n    </ToastsContext.Provider>\n  )\n}\n\nexport const useToasts = () => {\n  const {\n    state: { toasts },\n    sendToast,\n    retractToast,\n  } = useContext(ToastsContext)\n\n  return { toasts, sendToast, retractToast }\n}\n\nconst generateId = () => Math.random().toString(26).slice(2)\n"],"mappings":"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"}

package/dist/esm/elements/Toggle/Toggle.js

@@ -4,7 +4,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from "react";
 import styled, { css } from "styled-components";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 import { SWITCH_STATES, TOGGLE_STATES } from "./tokens";
 import { themeGet } from "@styled-system/theme-get";
 /** A toggle */

package/dist/esm/elements/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["React","styled","css","Box","SWITCH_STATES","TOGGLE_STATES","themeGet","Toggle","_ref","_ref$selected","selected","disabled","hover","onSelect","onClick","rest","_objectWithoutProperties","_excluded","isSelectable","undefined","handleClick","event","handleKeyPress","key","preventDefault","createElement","Container","_extends","display","alignItems","tabIndex","onKeyPress","role","Switch","displayName","withConfig","componentId","props","default"],"sources":["../../../../src/elements/Toggle/Toggle.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\nimport { SWITCH_STATES, TOGGLE_STATES } from \"./tokens\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport interface ToggleProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable toggle interactions */\n  disabled?: boolean\n  /** Select the toggle on render */\n  selected?: boolean\n  /** Used to force the toggle into the visual hover state */\n  hover?: boolean\n  /** Callback when selected */\n  onSelect?: (selected: boolean) => void\n}\n\n/** A toggle */\nexport const Toggle: React.FC<React.PropsWithChildren<ToggleProps>> = ({\n  selected = false,\n  disabled,\n  hover,\n  onSelect,\n  onClick,\n  ...rest\n}) => {\n  const isSelectable = !disabled && onSelect !== undefined\n\n  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (isSelectable && onSelect) {\n      onSelect(!selected)\n    }\n\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \" && isSelectable && onSelect) {\n      event.preventDefault()\n      onSelect(!selected)\n    }\n  }\n\n  return (\n    <Container\n      display=\"flex\"\n      alignItems=\"center\"\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      role=\"toggle\"\n      aria-checked={selected}\n      selected={selected}\n      disabled={disabled}\n      hover={hover}\n      {...rest}\n    >\n      <Switch selected={selected} />\n    </Container>\n  )\n}\n\nconst Switch = styled(Box)<{ selected: boolean }>`\n  width: 26px;\n  height: 26px;\n  margin: 3px;\n  border-radius: 50%;\n  transition: transform 0.3s;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n\n  ${(props) => {\n    return css`\n      ${props.selected ? SWITCH_STATES.selected : SWITCH_STATES.default}\n    `\n  }}\n`\n\nconst Container = styled(Box)<{\n  selected: boolean\n  hover?: boolean\n  disabled?: boolean\n}>`\n  user-select: none;\n  border-radius: 100px;\n  width: 51px;\n  height: 31px;\n  flex-shrink: 0;\n\n  ${(props) => {\n    return css`\n      ${props.selected ? TOGGLE_STATES.selected : TOGGLE_STATES.default}\n      ${props.hover && TOGGLE_STATES.hover}\n      ${props.disabled &&\n      (props.selected\n        ? TOGGLE_STATES.disabled.selected\n        : TOGGLE_STATES.disabled.default)}\n\n      &:hover {\n        ${TOGGLE_STATES.hover}\n      }\n    `\n  }}\n`\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,GAAG;AACZ,SAASC,aAAa,EAAEC,aAAa;AACrC,SAASC,QAAQ,QAAQ,0BAA0B;AAenD;AACA,OAAO,IAAMC,MAAsD,GAAG,SAAzDA,MAAsDA,CAAAC,IAAA,EAO7D;EAAA,IAAAC,aAAA,GAAAD,IAAA,CANJE,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAChBE,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,OAAO,GAAAN,IAAA,CAAPM,OAAO;IACJC,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAEP,IAAMC,YAAY,GAAG,CAACP,QAAQ,IAAIE,QAAQ,KAAKM,SAAS;EAExD,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIC,KAAmD,EAAK;IAC3E,IAAIH,YAAY,IAAIL,QAAQ,EAAE;MAC5BA,QAAQ,CAAC,CAACH,QAAQ,CAAC;IACrB;IAEA,IAAII,OAAO,EAAE;MACXA,OAAO,CAACO,KAAK,CAAC;IAChB;EACF,CAAC;EAED,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAID,KAA0C,EAAK;IACrE,IAAIA,KAAK,CAACE,GAAG,KAAK,GAAG,IAAIL,YAAY,IAAIL,QAAQ,EAAE;MACjDQ,KAAK,CAACG,cAAc,EAAE;MACtBX,QAAQ,CAAC,CAACH,QAAQ,CAAC;IACrB;EACF,CAAC;EAED,oBACEV,KAAA,CAAAyB,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,OAAO,EAAC,MAAM;IACdC,UAAU,EAAC,QAAQ;IACnBf,OAAO,EAAEM,WAAY;IACrBU,QAAQ,EAAEnB,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;IAC5BoB,UAAU,EAAET,cAAe;IAC3BU,IAAI,EAAC,QAAQ;IACb,gBAActB,QAAS;IACvBA,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA;EAAM,GACTG,IAAI,gBAERf,KAAA,CAAAyB,aAAA,CAACQ,MAAM;IAACvB,QAAQ,EAAEA;EAAS,EAAG,CACpB;AAEhB,CAAC;AA5CYH,MAAsD,CAAA2B,WAAA;AA8CnE,IAAMD,MAAM,GAAGhC,MAAM,CAACE,GAAG,CAAC,CAAAgC,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,2GAMV9B,QAAQ,CAAC,oBAAoB,CAAC,EAE1C,UAAC+B,KAAK,EAAK;EACX,OAAOnC,GAAG,WACNmC,KAAK,CAAC3B,QAAQ,GAAGN,aAAa,CAACM,QAAQ,GAAGN,aAAa,CAACkC,OAAO;AAErE,CAAC,CACF;AAED,IAAMZ,SAAS,GAAGzB,MAAM,CAACE,GAAG,CAAC,CAAAgC,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,uFAWzB,UAACC,KAAK,EAAK;EACX,OAAOnC,GAAG,mCACNmC,KAAK,CAAC3B,QAAQ,GAAGL,aAAa,CAACK,QAAQ,GAAGL,aAAa,CAACiC,OAAO,EAC/DD,KAAK,CAACzB,KAAK,IAAIP,aAAa,CAACO,KAAK,EAClCyB,KAAK,CAAC1B,QAAQ,KACf0B,KAAK,CAAC3B,QAAQ,GACXL,aAAa,CAACM,QAAQ,CAACD,QAAQ,GAC/BL,aAAa,CAACM,QAAQ,CAAC2B,OAAO,CAAC,EAG/BjC,aAAa,CAACO,KAAK;AAG3B,CAAC,CACF"}
+{"version":3,"file":"Toggle.js","names":["React","styled","css","Box","BoxProps","SWITCH_STATES","TOGGLE_STATES","themeGet","Toggle","_ref","_ref$selected","selected","disabled","hover","onSelect","onClick","rest","_objectWithoutProperties","_excluded","isSelectable","undefined","handleClick","event","handleKeyPress","key","preventDefault","createElement","Container","_extends","display","alignItems","tabIndex","onKeyPress","role","Switch","displayName","withConfig","componentId","props","default"],"sources":["../../../../src/elements/Toggle/Toggle.tsx"],"sourcesContent":["import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\nimport { SWITCH_STATES, TOGGLE_STATES } from \"./tokens\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport interface ToggleProps\n  extends BoxProps,\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Disable toggle interactions */\n  disabled?: boolean\n  /** Select the toggle on render */\n  selected?: boolean\n  /** Used to force the toggle into the visual hover state */\n  hover?: boolean\n  /** Callback when selected */\n  onSelect?: (selected: boolean) => void\n}\n\n/** A toggle */\nexport const Toggle: React.FC<React.PropsWithChildren<ToggleProps>> = ({\n  selected = false,\n  disabled,\n  hover,\n  onSelect,\n  onClick,\n  ...rest\n}) => {\n  const isSelectable = !disabled && onSelect !== undefined\n\n  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    if (isSelectable && onSelect) {\n      onSelect(!selected)\n    }\n\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \" && isSelectable && onSelect) {\n      event.preventDefault()\n      onSelect(!selected)\n    }\n  }\n\n  return (\n    <Container\n      display=\"flex\"\n      alignItems=\"center\"\n      onClick={handleClick}\n      tabIndex={disabled ? -1 : 0}\n      onKeyPress={handleKeyPress}\n      role=\"toggle\"\n      aria-checked={selected}\n      selected={selected}\n      disabled={disabled}\n      hover={hover}\n      {...rest}\n    >\n      <Switch selected={selected} />\n    </Container>\n  )\n}\n\nconst Switch = styled(Box)<{ selected: boolean }>`\n  width: 26px;\n  height: 26px;\n  margin: 3px;\n  border-radius: 50%;\n  transition: transform 0.3s;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n\n  ${(props) => {\n    return css`\n      ${props.selected ? SWITCH_STATES.selected : SWITCH_STATES.default}\n    `\n  }}\n`\n\nconst Container = styled(Box)<{\n  selected: boolean\n  hover?: boolean\n  disabled?: boolean\n}>`\n  user-select: none;\n  border-radius: 100px;\n  width: 51px;\n  height: 31px;\n  flex-shrink: 0;\n\n  ${(props) => {\n    return css`\n      ${props.selected ? TOGGLE_STATES.selected : TOGGLE_STATES.default}\n      ${props.hover && TOGGLE_STATES.hover}\n      ${props.disabled &&\n      (props.selected\n        ? TOGGLE_STATES.disabled.selected\n        : TOGGLE_STATES.disabled.default)}\n\n      &:hover {\n        ${TOGGLE_STATES.hover}\n      }\n    `\n  }}\n`\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,aAAa,EAAEC,aAAa;AACrC,SAASC,QAAQ,QAAQ,0BAA0B;AAenD;AACA,OAAO,IAAMC,MAAsD,GAAG,SAAzDA,MAAsDA,CAAAC,IAAA,EAO7D;EAAA,IAAAC,aAAA,GAAAD,IAAA,CANJE,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAChBE,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,OAAO,GAAAN,IAAA,CAAPM,OAAO;IACJC,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAEP,IAAMC,YAAY,GAAG,CAACP,QAAQ,IAAIE,QAAQ,KAAKM,SAAS;EAExD,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIC,KAAmD,EAAK;IAC3E,IAAIH,YAAY,IAAIL,QAAQ,EAAE;MAC5BA,QAAQ,CAAC,CAACH,QAAQ,CAAC;IACrB;IAEA,IAAII,OAAO,EAAE;MACXA,OAAO,CAACO,KAAK,CAAC;IAChB;EACF,CAAC;EAED,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAID,KAA0C,EAAK;IACrE,IAAIA,KAAK,CAACE,GAAG,KAAK,GAAG,IAAIL,YAAY,IAAIL,QAAQ,EAAE;MACjDQ,KAAK,CAACG,cAAc,EAAE;MACtBX,QAAQ,CAAC,CAACH,QAAQ,CAAC;IACrB;EACF,CAAC;EAED,oBACEX,KAAA,CAAA0B,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,OAAO,EAAC,MAAM;IACdC,UAAU,EAAC,QAAQ;IACnBf,OAAO,EAAEM,WAAY;IACrBU,QAAQ,EAAEnB,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;IAC5BoB,UAAU,EAAET,cAAe;IAC3BU,IAAI,EAAC,QAAQ;IACb,gBAActB,QAAS;IACvBA,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA;EAAM,GACTG,IAAI,gBAERhB,KAAA,CAAA0B,aAAA,CAACQ,MAAM;IAACvB,QAAQ,EAAEA;EAAS,EAAG,CACpB;AAEhB,CAAC;AA5CYH,MAAsD,CAAA2B,WAAA;AA8CnE,IAAMD,MAAM,GAAGjC,MAAM,CAACE,GAAG,CAAC,CAAAiC,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,2GAMV9B,QAAQ,CAAC,oBAAoB,CAAC,EAE1C,UAAC+B,KAAK,EAAK;EACX,OAAOpC,GAAG,WACNoC,KAAK,CAAC3B,QAAQ,GAAGN,aAAa,CAACM,QAAQ,GAAGN,aAAa,CAACkC,OAAO;AAErE,CAAC,CACF;AAED,IAAMZ,SAAS,GAAG1B,MAAM,CAACE,GAAG,CAAC,CAAAiC,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,uFAWzB,UAACC,KAAK,EAAK;EACX,OAAOpC,GAAG,mCACNoC,KAAK,CAAC3B,QAAQ,GAAGL,aAAa,CAACK,QAAQ,GAAGL,aAAa,CAACiC,OAAO,EAC/DD,KAAK,CAACzB,KAAK,IAAIP,aAAa,CAACO,KAAK,EAClCyB,KAAK,CAAC1B,QAAQ,KACf0B,KAAK,CAAC3B,QAAQ,GACXL,aAAa,CAACM,QAAQ,CAACD,QAAQ,GAC/BL,aAAa,CAACM,QAAQ,CAAC2B,OAAO,CAAC,EAG/BjC,aAAa,CAACO,KAAK;AAG3B,CAAC,CACF"}

package/dist/esm/elements/Tooltip/Tooltip.js

@@ -12,8 +12,8 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import { variant } from "styled-system";
 import { isText } from "../../helpers";
-import { usePosition } from "../../utils/usePosition";
-import { Box } from "../Box";
+import { Position, usePosition } from "../../utils/usePosition";
+import { Box, BoxProps } from "../Box";
 import { Pointer } from "../Pointer";
 import { Text } from "../Text";
 import { themeGet } from "@styled-system/theme-get";

package/dist/esm/elements/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["React","useState","styled","variant","isText","usePosition","Box","Pointer","Text","themeGet","TOOLTIP_VARIANTS","defaultLight","backgroundColor","color","defaultDark","Tooltip","_ref","_children$props","_children$props2","_children$props3","_children$props4","_children$props5","children","content","_ref$width","width","_ref$offset","offset","_ref$placement","placement","_ref$pointer","pointer","_ref$variant","visible","_ref$zIndex","zIndex","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","active","setActive","handleClick","prevActive","activate","deactivate","_usePosition","position","anchorRef","tooltipRef","isFlipped","state","createElement","Fragment","cloneElement","ref","tabIndex","onClick","compose","props","onMouseOver","onMouseOut","onFocus","onBlur","Tip","style","opacity","Panel","_extends","p","withConfig","displayName","componentId","variants","a","b","_len","arguments","length","args","Array","_key","apply"],"sources":["../../../../src/elements/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { isText } from \"../../helpers\"\nimport { Position, usePosition } from \"../../utils/usePosition\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Pointer } from \"../Pointer\"\nimport { Text } from \"../Text\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport const TOOLTIP_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"mono0\",\n    color: \"mono100\",\n  },\n  defaultDark: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n}\n\nexport type TooltipVariant = keyof typeof TOOLTIP_VARIANTS\n\nexport interface TooltipProps extends BoxProps {\n  /** Anchor element to attach to tooltip */\n  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  /** Content of tooltip */\n  content: React.ReactNode\n  offset?: number\n  placement?: Position\n  pointer?: boolean\n  variant?: TooltipVariant\n  visible?: boolean\n}\n\n/**\n * A tooltip\n */\nexport const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({\n  children,\n  content,\n  width = 230,\n  offset = 10,\n  placement = \"top\",\n  pointer = false,\n  variant = \"defaultLight\",\n  visible,\n  zIndex = 1,\n  ...rest\n}) => {\n  const [active, setActive] = useState(false)\n\n  const handleClick = () => {\n    setActive((prevActive) => !prevActive)\n  }\n\n  const activate = () => {\n    setActive(true)\n  }\n\n  const deactivate = () => {\n    setActive(false)\n  }\n\n  const {\n    anchorRef,\n    tooltipRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset,\n    active: visible ?? active,\n  })\n\n  return (\n    <>\n      {React.cloneElement(children, {\n        ref: anchorRef,\n        tabIndex: 0,\n        onClick: compose(handleClick, children.props?.onClick),\n        onMouseOver: compose(activate, children.props?.onMouseOver),\n        onMouseOut: compose(deactivate, children.props?.onMouseOut),\n        onFocus: compose(activate, children.props?.onFocus),\n        onBlur: compose(deactivate, children.props?.onBlur),\n      })}\n\n      <Tip\n        ref={tooltipRef as any}\n        variant={variant}\n        width={width}\n        zIndex={zIndex}\n        style={\n          // If visible is explictly set to `false` then the tooltip should be hidden\n          // Otherwise it should be visible or utilize the active state.\n          visible !== false\n            ? {\n                opacity: visible ?? active ? 1 : 0,\n              }\n            : { opacity: 0 }\n        }\n      >\n        {pointer && (\n          <Pointer\n            anchorRef={anchorRef}\n            tooltipRef={tooltipRef}\n            variant={variant}\n            placement={placement}\n            isFlipped={isFlipped}\n          />\n        )}\n\n        <Panel variant={variant} p={1} {...rest}>\n          {isText(content) ? <Text variant=\"xs\">{content}</Text> : content}\n        </Panel>\n      </Tip>\n    </>\n  )\n}\n\nconst Tip = styled(Box)<{ variant?: TooltipVariant }>`\n  position: absolute;\n  transition: opacity 250ms ease-out;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  cursor: default;\n  pointer-events: none;\n  font-weight: normal;\n  font-style: normal;\n  ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst Panel = styled(Box)<{ variant?: TooltipVariant }>`\n  ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst compose = (a?: (...args: any) => any, b?: (...args: any) => any) => {\n  return (...args) => {\n    a?.(...args)\n    b?.(...args)\n  }\n}\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,MAAM;AACf,SAAmBC,WAAW;AAC9B,SAASC,GAAG;AACZ,SAASC,OAAO;AAChB,SAASC,IAAI;AACb,SAASC,QAAQ,QAAQ,0BAA0B;AAEnD,OAAO,IAAMC,gBAAgB,GAAG;EAC9BC,YAAY,EAAE;IACZC,eAAe,EAAE,OAAO;IACxBC,KAAK,EAAE;EACT,CAAC;EACDC,WAAW,EAAE;IACXF,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT;AACF,CAAC;AAgBD;AACA;AACA;AACA,OAAO,IAAME,OAAwD,GAAG,SAA3DA,OAAwDA,CAAAC,IAAA,EAW/D;EAAA,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;EAAA,IAVJC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IACRC,OAAO,GAAAP,IAAA,CAAPO,OAAO;IAAAC,UAAA,GAAAR,IAAA,CACPS,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,GAAG,GAAAA,UAAA;IAAAE,WAAA,GAAAV,IAAA,CACXW,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,EAAE,GAAAA,WAAA;IAAAE,cAAA,GAAAZ,IAAA,CACXa,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IAAAE,YAAA,GAAAd,IAAA,CACjBe,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IAAAE,YAAA,GAAAhB,IAAA,CACfb,OAAO;IAAPA,OAAO,GAAA6B,YAAA,cAAG,cAAc,GAAAA,YAAA;IACxBC,OAAO,GAAAjB,IAAA,CAAPiB,OAAO;IAAAC,WAAA,GAAAlB,IAAA,CACPmB,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,CAAC,GAAAA,WAAA;IACPE,IAAI,GAAAC,wBAAA,CAAArB,IAAA,EAAAsB,SAAA;EAEP,IAAAC,SAAA,GAA4BtC,QAAQ,CAAC,KAAK,CAAC;IAAAuC,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAApCG,MAAM,GAAAF,UAAA;IAAEG,SAAS,GAAAH,UAAA;EAExB,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBD,SAAS,CAAC,UAACE,UAAU;MAAA,OAAK,CAACA,UAAU;IAAA,EAAC;EACxC,CAAC;EAED,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAA,EAAS;IACrBH,SAAS,CAAC,IAAI,CAAC;EACjB,CAAC;EAED,IAAMI,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACvBJ,SAAS,CAAC,KAAK,CAAC;EAClB,CAAC;EAED,IAAAK,YAAA,GAII3C,WAAW,CAAC;MACd4C,QAAQ,EAAEpB,SAAS;MACnBF,MAAM,EAANA,MAAM;MACNe,MAAM,EAAET,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIS;IACrB,CAAC,CAAC;IAPAQ,SAAS,GAAAF,YAAA,CAATE,SAAS;IACTC,UAAU,GAAAH,YAAA,CAAVG,UAAU;IACDC,SAAS,GAAAJ,YAAA,CAAlBK,KAAK,CAAID,SAAS;EAOpB,oBACEpD,KAAA,CAAAsD,aAAA,CAAAtD,KAAA,CAAAuD,QAAA,qBACGvD,KAAK,CAACwD,YAAY,CAAClC,QAAQ,EAAE;IAC5BmC,GAAG,EAAEP,SAAS;IACdQ,QAAQ,EAAE,CAAC;IACXC,OAAO,EAAEC,OAAO,CAAChB,WAAW,GAAA3B,eAAA,GAAEK,QAAQ,CAACuC,KAAK,cAAA5C,eAAA,uBAAdA,eAAA,CAAgB0C,OAAO,CAAC;IACtDG,WAAW,EAAEF,OAAO,CAACd,QAAQ,GAAA5B,gBAAA,GAAEI,QAAQ,CAACuC,KAAK,cAAA3C,gBAAA,uBAAdA,gBAAA,CAAgB4C,WAAW,CAAC;IAC3DC,UAAU,EAAEH,OAAO,CAACb,UAAU,GAAA5B,gBAAA,GAAEG,QAAQ,CAACuC,KAAK,cAAA1C,gBAAA,uBAAdA,gBAAA,CAAgB4C,UAAU,CAAC;IAC3DC,OAAO,EAAEJ,OAAO,CAACd,QAAQ,GAAA1B,gBAAA,GAAEE,QAAQ,CAACuC,KAAK,cAAAzC,gBAAA,uBAAdA,gBAAA,CAAgB4C,OAAO,CAAC;IACnDC,MAAM,EAAEL,OAAO,CAACb,UAAU,GAAA1B,gBAAA,GAAEC,QAAQ,CAACuC,KAAK,cAAAxC,gBAAA,uBAAdA,gBAAA,CAAgB4C,MAAM;EACpD,CAAC,CAAC,eAEFjE,KAAA,CAAAsD,aAAA,CAACY,GAAG;IACFT,GAAG,EAAEN,UAAkB;IACvBhD,OAAO,EAAEA,OAAQ;IACjBsB,KAAK,EAAEA,KAAM;IACbU,MAAM,EAAEA,MAAO;IACfgC,KAAK;IACH;IACA;IACAlC,OAAO,KAAK,KAAK,GACb;MACEmC,OAAO,EAAE,CAAAnC,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIS,MAAM,IAAG,CAAC,GAAG;IACnC,CAAC,GACD;MAAE0B,OAAO,EAAE;IAAE;EAClB,GAEArC,OAAO,iBACN/B,KAAA,CAAAsD,aAAA,CAAC/C,OAAO;IACN2C,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IACvBhD,OAAO,EAAEA,OAAQ;IACjB0B,SAAS,EAAEA,SAAU;IACrBuB,SAAS,EAAEA;EAAU,EAExB,eAEDpD,KAAA,CAAAsD,aAAA,CAACe,KAAK,EAAAC,QAAA;IAACnE,OAAO,EAAEA,OAAQ;IAACoE,CAAC,EAAE;EAAE,GAAKnC,IAAI,GACpChC,MAAM,CAACmB,OAAO,CAAC,gBAAGvB,KAAA,CAAAsD,aAAA,CAAC9C,IAAI;IAACL,OAAO,EAAC;EAAI,GAAEoB,OAAO,CAAQ,GAAGA,OAAO,CAC1D,CACJ,CACL;AAEP,CAAC;AAED,IAAM2C,GAAG,GAAGhE,MAAM,CAACI,GAAG,CAAC,CAAAkE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yKAIPjE,QAAQ,CAAC,oBAAoB,CAAC,EAK1CN,OAAO,CAAC;EAAEwE,QAAQ,EAAEjE;AAAiB,CAAC,CAAC,CAC1C;AAED,IAAM2D,KAAK,GAAGnE,MAAM,CAACI,GAAG,CAAC,CAAAkE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACrBvE,OAAO,CAAC;EAAEwE,QAAQ,EAAEjE;AAAiB,CAAC,CAAC,CAC1C;AAED,IAAMkD,OAAO,GAAG,SAAVA,OAAOA,CAAIgB,CAAyB,EAAEC,CAAyB,EAAK;EACxE,OAAO,YAAa;IAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAATC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAJF,IAAI,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IACbP,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAAQ,KAAA,SAAMH,IAAI,CAAC;IACZJ,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAAO,KAAA,SAAMH,IAAI,CAAC;EACd,CAAC;AACH,CAAC"}
+{"version":3,"file":"Tooltip.js","names":["React","useState","styled","variant","isText","Position","usePosition","Box","BoxProps","Pointer","Text","themeGet","TOOLTIP_VARIANTS","defaultLight","backgroundColor","color","defaultDark","Tooltip","_ref","_children$props","_children$props2","_children$props3","_children$props4","_children$props5","children","content","_ref$width","width","_ref$offset","offset","_ref$placement","placement","_ref$pointer","pointer","_ref$variant","visible","_ref$zIndex","zIndex","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","active","setActive","handleClick","prevActive","activate","deactivate","_usePosition","position","anchorRef","tooltipRef","isFlipped","state","createElement","Fragment","cloneElement","ref","tabIndex","onClick","compose","props","onMouseOver","onMouseOut","onFocus","onBlur","Tip","style","opacity","Panel","_extends","p","withConfig","displayName","componentId","variants","a","b","_len","arguments","length","args","Array","_key","apply"],"sources":["../../../../src/elements/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { isText } from \"../../helpers\"\nimport { Position, usePosition } from \"../../utils/usePosition\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Pointer } from \"../Pointer\"\nimport { Text } from \"../Text\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport const TOOLTIP_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"mono0\",\n    color: \"mono100\",\n  },\n  defaultDark: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n}\n\nexport type TooltipVariant = keyof typeof TOOLTIP_VARIANTS\n\nexport interface TooltipProps extends BoxProps {\n  /** Anchor element to attach to tooltip */\n  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  /** Content of tooltip */\n  content: React.ReactNode\n  offset?: number\n  placement?: Position\n  pointer?: boolean\n  variant?: TooltipVariant\n  visible?: boolean\n}\n\n/**\n * A tooltip\n */\nexport const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({\n  children,\n  content,\n  width = 230,\n  offset = 10,\n  placement = \"top\",\n  pointer = false,\n  variant = \"defaultLight\",\n  visible,\n  zIndex = 1,\n  ...rest\n}) => {\n  const [active, setActive] = useState(false)\n\n  const handleClick = () => {\n    setActive((prevActive) => !prevActive)\n  }\n\n  const activate = () => {\n    setActive(true)\n  }\n\n  const deactivate = () => {\n    setActive(false)\n  }\n\n  const {\n    anchorRef,\n    tooltipRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset,\n    active: visible ?? active,\n  })\n\n  return (\n    <>\n      {React.cloneElement(children, {\n        ref: anchorRef,\n        tabIndex: 0,\n        onClick: compose(handleClick, children.props?.onClick),\n        onMouseOver: compose(activate, children.props?.onMouseOver),\n        onMouseOut: compose(deactivate, children.props?.onMouseOut),\n        onFocus: compose(activate, children.props?.onFocus),\n        onBlur: compose(deactivate, children.props?.onBlur),\n      })}\n\n      <Tip\n        ref={tooltipRef as any}\n        variant={variant}\n        width={width}\n        zIndex={zIndex}\n        style={\n          // If visible is explictly set to `false` then the tooltip should be hidden\n          // Otherwise it should be visible or utilize the active state.\n          visible !== false\n            ? {\n                opacity: visible ?? active ? 1 : 0,\n              }\n            : { opacity: 0 }\n        }\n      >\n        {pointer && (\n          <Pointer\n            anchorRef={anchorRef}\n            tooltipRef={tooltipRef}\n            variant={variant}\n            placement={placement}\n            isFlipped={isFlipped}\n          />\n        )}\n\n        <Panel variant={variant} p={1} {...rest}>\n          {isText(content) ? <Text variant=\"xs\">{content}</Text> : content}\n        </Panel>\n      </Tip>\n    </>\n  )\n}\n\nconst Tip = styled(Box)<{ variant?: TooltipVariant }>`\n  position: absolute;\n  transition: opacity 250ms ease-out;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  cursor: default;\n  pointer-events: none;\n  font-weight: normal;\n  font-style: normal;\n  ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst Panel = styled(Box)<{ variant?: TooltipVariant }>`\n  ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst compose = (a?: (...args: any) => any, b?: (...args: any) => any) => {\n  return (...args) => {\n    a?.(...args)\n    b?.(...args)\n  }\n}\n"],"mappings":"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"}

package/dist/esm/elements/Tooltip/Tooltip.story.js

@@ -9,14 +9,14 @@ import { fn } from "@storybook/test";
 import React, { useState } from "react";
 import { States } from "storybook-states";
 import HelpIcon from "@artsy/icons/HelpIcon";
-import { POSITION } from "../../utils/usePosition";
+import { Position, POSITION } from "../../utils/usePosition";
 import { Box } from "../Box";
 import { Button } from "../Button";
 import { Clickable } from "../Clickable";
 import { Input } from "../Input";
 import { Spacer } from "../Spacer";
 import { Text } from "../Text";
-import { Tooltip } from "./Tooltip";
+import { Tooltip, TooltipProps } from "./Tooltip";
 import { Stack } from "../Stack";
 import { Column, GridColumns } from "../GridColumns";
 import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";

package/dist/esm/elements/Tooltip/Tooltip.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.story.js","names":["fn","React","useState","States","HelpIcon","POSITION","Box","Button","Clickable","Input","Spacer","Text","Tooltip","Stack","Column","GridColumns","STORYBOOK_PROPS_BLOCKLIST","CONTENT","component","title","tags","parameters","docs","description","controls","exclude","Default","args","content","children","createElement","variant","textAlign","p","bg","color","WithClickable","onClick","chromatic","disable","Placement","render","states","Object","keys","map","placement","props","_extends","JSON","stringify","pointer","visible","maxWidth","mx","IconExample","display","alignItems","lineHeight","as","style","ml","ExternalControl","_useState","_useState2","_slicedToArray","setVisible","Fragment","PointerCentering","_useState3","_useState4","setPlacement","_useState5","_useState6","size","setSize","key","mr","mb","onMouseOver","type","min","max","value","onChange","e","parseInt","target","y","width","height","position","top","mt","left","StressTest","gap","Array","from","length","_","i","justifyContent","PositioningBug","span","flexDirection"],"sources":["../../../../src/elements/Tooltip/Tooltip.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport HelpIcon from \"@artsy/icons/HelpIcon\"\nimport { Position, POSITION } from \"../../utils/usePosition\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Clickable } from \"../Clickable\"\nimport { Input } from \"../Input\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Tooltip, TooltipProps } from \"./Tooltip\"\nimport { Stack } from \"../Stack\"\nimport { Column, GridColumns } from \"../GridColumns\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst CONTENT = \"Lorem ipsum dolor sit amet consectetur adipisicing elit?\"\n\nexport default {\n  component: Tooltip,\n  title: \"Components/Tooltip\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A tooltip component for displaying contextual information on hover or focus with various placement options.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    content: CONTENT,\n    children: (\n      <Text variant=\"xs\" textAlign=\"center\" p={1} bg=\"mono100\" color=\"mono0\">\n        This text has a tooltip\n      </Text>\n    ),\n  },\n}\n\nexport const WithClickable = {\n  tags: [\"!autodocs\"],\n  args: {\n    content: CONTENT,\n    children: (\n      <Clickable onClick={fn()}>\n        <Text variant=\"xs\" textAlign=\"center\" p={1} bg=\"mono100\" color=\"mono0\">\n          This text has a tooltip and is clickable\n        </Text>\n      </Clickable>\n    ),\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Placement = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <States<Partial<TooltipProps>>\n        states={Object.keys(POSITION).map((placement) => ({\n          placement: placement as Position,\n        }))}\n      >\n        {(props) => {\n          return (\n            <Tooltip\n              content={JSON.stringify(props)}\n              variant=\"defaultDark\"\n              pointer\n              visible\n              {...props}\n            >\n              <Text\n                variant=\"xs\"\n                textAlign=\"center\"\n                p={1}\n                maxWidth=\"50%\"\n                mx=\"auto\"\n                bg=\"mono10\"\n              >\n                {JSON.stringify(props)}\n              </Text>\n            </Tooltip>\n          )\n        }}\n      </States>\n    )\n  },\n}\n\nexport const IconExample = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <Text variant=\"xs\" display=\"flex\" alignItems=\"center\" lineHeight={1}>\n        Hover (or focus) the icon to display the tooltip.{\" \"}\n        <Tooltip content={CONTENT} placement=\"bottom\">\n          {/* Icons don't forwardRefs so we have to wrap in a span */}\n          <Box as=\"span\" style={{ lineHeight: 0 }}>\n            <HelpIcon ml={0.5} />\n          </Box>\n        </Tooltip>\n      </Text>\n    )\n  },\n}\n\nexport const ExternalControl = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    const [visible, setVisible] = useState(false)\n\n    return (\n      <>\n        <Tooltip\n          content={CONTENT}\n          visible={visible}\n          pointer\n          variant=\"defaultDark\"\n        >\n          <Button\n            variant=\"secondaryBlack\"\n            onClick={() => {\n              setVisible((visible) => !visible)\n            }}\n          >\n            {visible ? \"Click to hide tooltip\" : \"Click to show tooltip\"}\n          </Button>\n        </Tooltip>\n      </>\n    )\n  },\n}\n\nexport const PointerCentering = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    const [placement, setPlacement] = useState<Position>(\"top\")\n    const [size, setSize] = useState(50)\n\n    return (\n      <>\n        {Object.keys(POSITION).map((placement) => {\n          return (\n            <Button\n              key={placement}\n              mr={1}\n              mb={1}\n              variant=\"secondaryBlack\"\n              size=\"small\"\n              onMouseOver={() => {\n                setPlacement(placement as Position)\n              }}\n            >\n              {placement}\n            </Button>\n          )\n        })}\n\n        <Input\n          type=\"range\"\n          min={0}\n          max={200}\n          value={size}\n          onChange={(e) => {\n            setSize(parseInt(e.target.value))\n          }}\n        />\n\n        <Spacer y={12} />\n\n        <Tooltip\n          content={CONTENT}\n          pointer\n          visible\n          variant=\"defaultDark\"\n          placement={placement}\n        >\n          <Box\n            bg=\"mono10\"\n            width={size}\n            height={size}\n            mx=\"auto\"\n            position=\"relative\"\n          >\n            <Box\n              height=\"1px\"\n              bg=\"red100\"\n              width=\"100%\"\n              position=\"absolute\"\n              top=\"50%\"\n              mt=\"-0.5px\"\n            />\n\n            <Box\n              height=\"100%\"\n              width=\"1px\"\n              bg=\"red100\"\n              position=\"absolute\"\n              left=\"50%\"\n              ml=\"-0.5px\"\n            />\n          </Box>\n        </Tooltip>\n      </>\n    )\n  },\n}\n\nexport const StressTest = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <Stack gap={1}>\n        {Array.from({ length: 3000 }).map((_, i) => {\n          return (\n            <Tooltip\n              key={i}\n              content={CONTENT}\n              pointer\n              variant=\"defaultDark\"\n              placement=\"right\"\n            >\n              <Text\n                variant=\"xs\"\n                textAlign=\"center\"\n                width={40}\n                height={40}\n                mx=\"auto\"\n                bg=\"mono10\"\n                display=\"flex\"\n                alignItems=\"center\"\n                justifyContent=\"center\"\n              >\n                {i}\n              </Text>\n            </Tooltip>\n          )\n        })}\n      </Stack>\n    )\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const PositioningBug = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <GridColumns>\n        <Column span={9}>Example left-column content</Column>\n        <Column span={3} display=\"flex\" flexDirection=\"column\" gap={2}>\n          <Tooltip content=\"Example content\">\n            <Button size=\"small\">Example tooltip trigger</Button>\n          </Tooltip>\n\n          <Text variant=\"xs\">There should not be a horizontal scrollbar</Text>\n        </Column>\n      </GridColumns>\n    )\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.story.js","names":["fn","React","useState","States","HelpIcon","Position","POSITION","Box","Button","Clickable","Input","Spacer","Text","Tooltip","TooltipProps","Stack","Column","GridColumns","STORYBOOK_PROPS_BLOCKLIST","CONTENT","component","title","tags","parameters","docs","description","controls","exclude","Default","args","content","children","createElement","variant","textAlign","p","bg","color","WithClickable","onClick","chromatic","disable","Placement","render","states","Object","keys","map","placement","props","_extends","JSON","stringify","pointer","visible","maxWidth","mx","IconExample","display","alignItems","lineHeight","as","style","ml","ExternalControl","_useState","_useState2","_slicedToArray","setVisible","Fragment","PointerCentering","_useState3","_useState4","setPlacement","_useState5","_useState6","size","setSize","key","mr","mb","onMouseOver","type","min","max","value","onChange","e","parseInt","target","y","width","height","position","top","mt","left","StressTest","gap","Array","from","length","_","i","justifyContent","PositioningBug","span","flexDirection"],"sources":["../../../../src/elements/Tooltip/Tooltip.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport HelpIcon from \"@artsy/icons/HelpIcon\"\nimport { Position, POSITION } from \"../../utils/usePosition\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Clickable } from \"../Clickable\"\nimport { Input } from \"../Input\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Tooltip, TooltipProps } from \"./Tooltip\"\nimport { Stack } from \"../Stack\"\nimport { Column, GridColumns } from \"../GridColumns\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst CONTENT = \"Lorem ipsum dolor sit amet consectetur adipisicing elit?\"\n\nexport default {\n  component: Tooltip,\n  title: \"Components/Tooltip\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A tooltip component for displaying contextual information on hover or focus with various placement options.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    content: CONTENT,\n    children: (\n      <Text variant=\"xs\" textAlign=\"center\" p={1} bg=\"mono100\" color=\"mono0\">\n        This text has a tooltip\n      </Text>\n    ),\n  },\n}\n\nexport const WithClickable = {\n  tags: [\"!autodocs\"],\n  args: {\n    content: CONTENT,\n    children: (\n      <Clickable onClick={fn()}>\n        <Text variant=\"xs\" textAlign=\"center\" p={1} bg=\"mono100\" color=\"mono0\">\n          This text has a tooltip and is clickable\n        </Text>\n      </Clickable>\n    ),\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Placement = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <States<Partial<TooltipProps>>\n        states={Object.keys(POSITION).map((placement) => ({\n          placement: placement as Position,\n        }))}\n      >\n        {(props) => {\n          return (\n            <Tooltip\n              content={JSON.stringify(props)}\n              variant=\"defaultDark\"\n              pointer\n              visible\n              {...props}\n            >\n              <Text\n                variant=\"xs\"\n                textAlign=\"center\"\n                p={1}\n                maxWidth=\"50%\"\n                mx=\"auto\"\n                bg=\"mono10\"\n              >\n                {JSON.stringify(props)}\n              </Text>\n            </Tooltip>\n          )\n        }}\n      </States>\n    )\n  },\n}\n\nexport const IconExample = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <Text variant=\"xs\" display=\"flex\" alignItems=\"center\" lineHeight={1}>\n        Hover (or focus) the icon to display the tooltip.{\" \"}\n        <Tooltip content={CONTENT} placement=\"bottom\">\n          {/* Icons don't forwardRefs so we have to wrap in a span */}\n          <Box as=\"span\" style={{ lineHeight: 0 }}>\n            <HelpIcon ml={0.5} />\n          </Box>\n        </Tooltip>\n      </Text>\n    )\n  },\n}\n\nexport const ExternalControl = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    const [visible, setVisible] = useState(false)\n\n    return (\n      <>\n        <Tooltip\n          content={CONTENT}\n          visible={visible}\n          pointer\n          variant=\"defaultDark\"\n        >\n          <Button\n            variant=\"secondaryBlack\"\n            onClick={() => {\n              setVisible((visible) => !visible)\n            }}\n          >\n            {visible ? \"Click to hide tooltip\" : \"Click to show tooltip\"}\n          </Button>\n        </Tooltip>\n      </>\n    )\n  },\n}\n\nexport const PointerCentering = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    const [placement, setPlacement] = useState<Position>(\"top\")\n    const [size, setSize] = useState(50)\n\n    return (\n      <>\n        {Object.keys(POSITION).map((placement) => {\n          return (\n            <Button\n              key={placement}\n              mr={1}\n              mb={1}\n              variant=\"secondaryBlack\"\n              size=\"small\"\n              onMouseOver={() => {\n                setPlacement(placement as Position)\n              }}\n            >\n              {placement}\n            </Button>\n          )\n        })}\n\n        <Input\n          type=\"range\"\n          min={0}\n          max={200}\n          value={size}\n          onChange={(e) => {\n            setSize(parseInt(e.target.value))\n          }}\n        />\n\n        <Spacer y={12} />\n\n        <Tooltip\n          content={CONTENT}\n          pointer\n          visible\n          variant=\"defaultDark\"\n          placement={placement}\n        >\n          <Box\n            bg=\"mono10\"\n            width={size}\n            height={size}\n            mx=\"auto\"\n            position=\"relative\"\n          >\n            <Box\n              height=\"1px\"\n              bg=\"red100\"\n              width=\"100%\"\n              position=\"absolute\"\n              top=\"50%\"\n              mt=\"-0.5px\"\n            />\n\n            <Box\n              height=\"100%\"\n              width=\"1px\"\n              bg=\"red100\"\n              position=\"absolute\"\n              left=\"50%\"\n              ml=\"-0.5px\"\n            />\n          </Box>\n        </Tooltip>\n      </>\n    )\n  },\n}\n\nexport const StressTest = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <Stack gap={1}>\n        {Array.from({ length: 3000 }).map((_, i) => {\n          return (\n            <Tooltip\n              key={i}\n              content={CONTENT}\n              pointer\n              variant=\"defaultDark\"\n              placement=\"right\"\n            >\n              <Text\n                variant=\"xs\"\n                textAlign=\"center\"\n                width={40}\n                height={40}\n                mx=\"auto\"\n                bg=\"mono10\"\n                display=\"flex\"\n                alignItems=\"center\"\n                justifyContent=\"center\"\n              >\n                {i}\n              </Text>\n            </Tooltip>\n          )\n        })}\n      </Stack>\n    )\n  },\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const PositioningBug = {\n  tags: [\"!autodocs\"],\n  render: () => {\n    return (\n      <GridColumns>\n        <Column span={9}>Example left-column content</Column>\n        <Column span={3} display=\"flex\" flexDirection=\"column\" gap={2}>\n          <Tooltip content=\"Example content\">\n            <Button size=\"small\">Example tooltip trigger</Button>\n          </Tooltip>\n\n          <Text variant=\"xs\">There should not be a horizontal scrollbar</Text>\n        </Column>\n      </GridColumns>\n    )\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/VisuallyHidden/VisuallyHidden.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 
 /**
  * Visually the hide element, but present in DOM so that it is accessible

package/dist/esm/elements/VisuallyHidden/VisuallyHidden.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.js","names":["styled","css","Box","visuallyHiddenMixin","visuallyUnhiddenMixin","VisuallyHidden","withConfig","displayName","componentId","_ref","show"],"sources":["../../../../src/elements/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/**\n * Visually the hide element, but present in DOM so that it is accessible\n * for screen readers.\n * See:\n * https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/\n * https://webaim.org/techniques/css/invisiblecontent/\n * https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html\n */\nexport const visuallyHiddenMixin = css`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`\n\n/** Reset to `inherit` all properties that cause visually-hidden */\nexport const visuallyUnhiddenMixin = css`\n  clip: inherit;\n  clip-path: inherit;\n  height: inherit;\n  overflow: inherit;\n  position: inherit;\n  white-space: inherit;\n  width: inherit;\n`\n\nexport interface VisuallyHiddenProps extends BoxProps {\n  show?: boolean\n}\n\n/**\n * Visually the hide element, but present in DOM so that it is accessible\n * for screen readers.\n * See:\n * https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/\n * https://webaim.org/techniques/css/invisiblecontent/\n * https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html\n */\nexport const VisuallyHidden = styled(Box)<VisuallyHiddenProps>`\n  ${visuallyHiddenMixin}\n  ${({ show }) => show && visuallyUnhiddenMixin}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,GAAG;;AAEZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,mBAAmB,GAAGF,GAAG,wHAQrC;;AAED;AACA,OAAO,IAAMG,qBAAqB,GAAGH,GAAG,wHAQvC;AAMD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMI,cAAc,GAAGL,MAAM,CAACE,GAAG,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kBACrCL,mBAAmB,EACnB,UAAAM,IAAA;EAAA,IAAGC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EAAA,OAAOA,IAAI,IAAIN,qBAAqB;AAAA,EAC9C"}
+{"version":3,"file":"VisuallyHidden.js","names":["styled","css","Box","BoxProps","visuallyHiddenMixin","visuallyUnhiddenMixin","VisuallyHidden","withConfig","displayName","componentId","_ref","show"],"sources":["../../../../src/elements/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/**\n * Visually the hide element, but present in DOM so that it is accessible\n * for screen readers.\n * See:\n * https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/\n * https://webaim.org/techniques/css/invisiblecontent/\n * https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html\n */\nexport const visuallyHiddenMixin = css`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`\n\n/** Reset to `inherit` all properties that cause visually-hidden */\nexport const visuallyUnhiddenMixin = css`\n  clip: inherit;\n  clip-path: inherit;\n  height: inherit;\n  overflow: inherit;\n  position: inherit;\n  white-space: inherit;\n  width: inherit;\n`\n\nexport interface VisuallyHiddenProps extends BoxProps {\n  show?: boolean\n}\n\n/**\n * Visually the hide element, but present in DOM so that it is accessible\n * for screen readers.\n * See:\n * https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/\n * https://webaim.org/techniques/css/invisiblecontent/\n * https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html\n */\nexport const VisuallyHidden = styled(Box)<VisuallyHiddenProps>`\n  ${visuallyHiddenMixin}\n  ${({ show }) => show && visuallyUnhiddenMixin}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,GAAG,EAAEC,QAAQ;;AAEtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,mBAAmB,GAAGH,GAAG,wHAQrC;;AAED;AACA,OAAO,IAAMI,qBAAqB,GAAGJ,GAAG,wHAQvC;AAMD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMK,cAAc,GAAGN,MAAM,CAACE,GAAG,CAAC,CAAAK,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kBACrCL,mBAAmB,EACnB,UAAAM,IAAA;EAAA,IAAGC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EAAA,OAAOA,IAAI,IAAIN,qBAAqB;AAAA,EAC9C"}

package/dist/esm/helpers/color.js

@@ -1,4 +1,4 @@
-import { THEME } from "../Theme";
+import { Color, THEME } from "../Theme";
 
 /**
  * A helper to easily access colors when not in a styled-components or

package/dist/esm/helpers/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","names":["THEME","color","colorKey","_THEME$colors$colorKe","colors"],"sources":["../../../src/helpers/color.ts"],"sourcesContent":["import { Color, THEME } from \"../Theme\"\n\n/**\n * A helper to easily access colors when not in a styled-components or\n * styled-systems context.\n *\n * @deprecated use component `color` or `borderColor` props, or `themeGet('colors.colorName')`\n */\nexport const color = (colorKey: Color | \"currentColor\") =>\n  THEME.colors[colorKey] ?? colorKey\n"],"mappings":"AAAA,SAAgBA,KAAK;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAKA,CAAIC,QAAgC;EAAA,IAAAC,qBAAA;EAAA,QAAAA,qBAAA,GACpDH,KAAK,CAACI,MAAM,CAACF,QAAQ,CAAC,cAAAC,qBAAA,cAAAA,qBAAA,GAAID,QAAQ;AAAA"}
+{"version":3,"file":"color.js","names":["Color","THEME","color","colorKey","_THEME$colors$colorKe","colors"],"sources":["../../../src/helpers/color.ts"],"sourcesContent":["import { Color, THEME } from \"../Theme\"\n\n/**\n * A helper to easily access colors when not in a styled-components or\n * styled-systems context.\n *\n * @deprecated use component `color` or `borderColor` props, or `themeGet('colors.colorName')`\n */\nexport const color = (colorKey: Color | \"currentColor\") =>\n  THEME.colors[colorKey] ?? colorKey\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,KAAK;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAKA,CAAIC,QAAgC;EAAA,IAAAC,qBAAA;EAAA,QAAAA,qBAAA,GACpDH,KAAK,CAACI,MAAM,CAACF,QAAQ,CAAC,cAAAC,qBAAA,cAAAA,qBAAA,GAAID,QAAQ;AAAA"}

package/dist/esm/helpers/injectGlobalStyles.js

@@ -1,5 +1,5 @@
 import { themeGet } from "@styled-system/theme-get";
-import { createGlobalStyle } from "styled-components";
+import { createGlobalStyle, css } from "styled-components";
 
 /**
  * Injects globally relevant styles, including helper classes for our Typography.

package/dist/esm/helpers/injectGlobalStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"injectGlobalStyles.js","names":["themeGet","createGlobalStyle","injectGlobalStyles","additionalStyles","GlobalStyles","displayName"],"sources":["../../../src/helpers/injectGlobalStyles.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { createGlobalStyle, css } from \"styled-components\"\n\n/**\n * Injects globally relevant styles, including helper classes for our Typography.\n * Apps that use palette should mount this component at the root of their tree.\n */\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport function injectGlobalStyles<P extends object>(\n  additionalStyles?: string | ReturnType<typeof css>\n) {\n  const GlobalStyles = createGlobalStyle<P>`\n    html {\n      box-sizing: border-box;\n    }\n\n    *,\n    *::before,\n    *::after {\n      box-sizing: inherit;\n    }\n\n    &:focus {\n      outline: 0;\n    }\n\n    &:focus-visible {\n      outline: 1px solid ${themeGet(\"colors.blue100\")};\n    }\n\n    ::selection {\n      background-color: ${themeGet(\"colors.blue15\")};\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    html,\n    body,\n    #root {\n      -webkit-tap-highlight-color: transparent;\n      height: 100%;\n    }\n\n    body {\n      margin: 0;\n      padding: 0;\n    }\n\n    html, body {\n      font-family: ${themeGet(\"fonts.sans\")};\n      font-size: ${themeGet(\"textVariants.sm.fontSize\")};\n      line-height: ${themeGet(\"textVariants.sm.lineHeight\")};\n      background-color: ${themeGet(\"colors.mono0\")};\n      color: ${themeGet(\"colors.mono100\")};\n      -webkit-font-smoothing: antialiased;\n      -moz-osx-font-smoothing: grayscale;\n      text-rendering: optimizeLegibility;\n    }\n\n    a {\n      cursor: pointer;\n      color: inherit;\n      transition: color 0.25s;\n      text-decoration: underline;\n\n      &:hover {\n        color: ${themeGet(\"colors.mono100\")};\n      }\n\n      &:active {\n        color: ${themeGet(\"colors.mono100\")};\n      }\n    }\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      font-style: inherit;\n      font-family: inherit;\n      font-weight: inherit;\n      font-size: inherit;\n      margin: 0;\n    }\n\n    dl,\n    dt,\n    dd {\n      margin: 0;\n    }\n\n    ol,\n    ul {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n    }\n\n    ${additionalStyles};\n  `\n\n  GlobalStyles.displayName = \"GlobalStyles\"\n\n  return {\n    GlobalStyles,\n  }\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,iBAAiB,QAAa,mBAAmB;;AAE1D;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAChCC,gBAAkD,EAClD;EACA,IAAMC,YAAY,GAAGH,iBAAiB,4vBAgBbD,QAAQ,CAAC,gBAAgB,CAAC,EAI3BA,QAAQ,CAAC,eAAe,CAAC,EACpCA,QAAQ,CAAC,gBAAgB,CAAC,EAgBpBA,QAAQ,CAAC,YAAY,CAAC,EACxBA,QAAQ,CAAC,0BAA0B,CAAC,EAClCA,QAAQ,CAAC,4BAA4B,CAAC,EACjCA,QAAQ,CAAC,cAAc,CAAC,EACnCA,QAAQ,CAAC,gBAAgB,CAAC,EAaxBA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,EA8BrCG,gBAAgB,CACnB;EAEDC,YAAY,CAACC,WAAW,GAAG,cAAc;EAEzC,OAAO;IACLD,YAAY,EAAZA;EACF,CAAC;AACH"}
+{"version":3,"file":"injectGlobalStyles.js","names":["themeGet","createGlobalStyle","css","injectGlobalStyles","additionalStyles","GlobalStyles","displayName"],"sources":["../../../src/helpers/injectGlobalStyles.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { createGlobalStyle, css } from \"styled-components\"\n\n/**\n * Injects globally relevant styles, including helper classes for our Typography.\n * Apps that use palette should mount this component at the root of their tree.\n */\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport function injectGlobalStyles<P extends object>(\n  additionalStyles?: string | ReturnType<typeof css>\n) {\n  const GlobalStyles = createGlobalStyle<P>`\n    html {\n      box-sizing: border-box;\n    }\n\n    *,\n    *::before,\n    *::after {\n      box-sizing: inherit;\n    }\n\n    &:focus {\n      outline: 0;\n    }\n\n    &:focus-visible {\n      outline: 1px solid ${themeGet(\"colors.blue100\")};\n    }\n\n    ::selection {\n      background-color: ${themeGet(\"colors.blue15\")};\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    html,\n    body,\n    #root {\n      -webkit-tap-highlight-color: transparent;\n      height: 100%;\n    }\n\n    body {\n      margin: 0;\n      padding: 0;\n    }\n\n    html, body {\n      font-family: ${themeGet(\"fonts.sans\")};\n      font-size: ${themeGet(\"textVariants.sm.fontSize\")};\n      line-height: ${themeGet(\"textVariants.sm.lineHeight\")};\n      background-color: ${themeGet(\"colors.mono0\")};\n      color: ${themeGet(\"colors.mono100\")};\n      -webkit-font-smoothing: antialiased;\n      -moz-osx-font-smoothing: grayscale;\n      text-rendering: optimizeLegibility;\n    }\n\n    a {\n      cursor: pointer;\n      color: inherit;\n      transition: color 0.25s;\n      text-decoration: underline;\n\n      &:hover {\n        color: ${themeGet(\"colors.mono100\")};\n      }\n\n      &:active {\n        color: ${themeGet(\"colors.mono100\")};\n      }\n    }\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      font-style: inherit;\n      font-family: inherit;\n      font-weight: inherit;\n      font-size: inherit;\n      margin: 0;\n    }\n\n    dl,\n    dt,\n    dd {\n      margin: 0;\n    }\n\n    ol,\n    ul {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n    }\n\n    ${additionalStyles};\n  `\n\n  GlobalStyles.displayName = \"GlobalStyles\"\n\n  return {\n    GlobalStyles,\n  }\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,iBAAiB,EAAEC,GAAG,QAAQ,mBAAmB;;AAE1D;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAChCC,gBAAkD,EAClD;EACA,IAAMC,YAAY,GAAGJ,iBAAiB,4vBAgBbD,QAAQ,CAAC,gBAAgB,CAAC,EAI3BA,QAAQ,CAAC,eAAe,CAAC,EACpCA,QAAQ,CAAC,gBAAgB,CAAC,EAgBpBA,QAAQ,CAAC,YAAY,CAAC,EACxBA,QAAQ,CAAC,0BAA0B,CAAC,EAClCA,QAAQ,CAAC,4BAA4B,CAAC,EACjCA,QAAQ,CAAC,cAAc,CAAC,EACnCA,QAAQ,CAAC,gBAAgB,CAAC,EAaxBA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,EA8BrCI,gBAAgB,CACnB;EAEDC,YAAY,CAACC,WAAW,GAAG,cAAc;EAEzC,OAAO;IACLD,YAAY,EAAZA;EACF,CAAC;AACH"}

package/dist/esm/helpers/isText.js

@@ -1,5 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-import React from "react";
+import React, { ReactNode } from "react";
 var REACT_FRAGMENT_TYPE = /*#__PURE__*/React.createElement(React.Fragment, null).type;
 
 /**

package/dist/esm/helpers/isText.js.map

@@ -1 +1 @@
-{"version":3,"file":"isText.js","names":["React","REACT_FRAGMENT_TYPE","createElement","Fragment","type","isText","children","_typeof","props","Array","isArray","every","_isText"],"sources":["../../../src/helpers/isText.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\"\n\nconst REACT_FRAGMENT_TYPE = (<></>).type\n\n/**\n * Check whether a `children` prop is text — e.g. just a string (or interpolated string)\n */\nexport const isText = (children: ReactNode) => {\n  // If children is an object, it may be simple, just wrapped in a fragment(s)\n  // `><>Example</><`\n  if (\n    !!children &&\n    typeof children === \"object\" &&\n    \"type\" in children &&\n    children.type === REACT_FRAGMENT_TYPE\n  ) {\n    return isText(children.props.children)\n  }\n\n  // Non-fragment interpolated children is an array:\n  // `>Exmaple ({2 + 2})<` => [\"Example (\", 4, \")\"]\n  if (Array.isArray(children)) {\n    return children.every(isText)\n  }\n\n  return typeof children === \"string\" || typeof children === \"number\"\n}\n"],"mappings":";AAAA,OAAOA,KAAK,MAAqB,OAAO;AAExC,IAAMC,mBAAmB,GAAG,aAACD,KAAA,CAAAE,aAAA,CAAAF,KAAA,CAAAG,QAAA,OAAK,CAAEC,IAAI;;AAExC;AACA;AACA;AACO,IAAMC,OAAM,GAAG,SAATA,MAAMA,CAAIC,QAAmB,EAAK;EAC7C;EACA;EACA,IACE,CAAC,CAACA,QAAQ,IACVC,OAAA,CAAOD,QAAQ,MAAK,QAAQ,IAC5B,MAAM,IAAIA,QAAQ,IAClBA,QAAQ,CAACF,IAAI,KAAKH,mBAAmB,EACrC;IACA,OAAOI,OAAM,CAACC,QAAQ,CAACE,KAAK,CAACF,QAAQ,CAAC;EACxC;;EAEA;EACA;EACA,IAAIG,KAAK,CAACC,OAAO,CAACJ,QAAQ,CAAC,EAAE;IAC3B,OAAOA,QAAQ,CAACK,KAAK,CAACN,OAAM,CAAC;EAC/B;EAEA,OAAO,OAAOC,QAAQ,KAAK,QAAQ,IAAI,OAAOA,QAAQ,KAAK,QAAQ;AACrE,CAAC;AAAA,SAAAM,OAAA,IAAAP,MAAA"}
+{"version":3,"file":"isText.js","names":["React","ReactNode","REACT_FRAGMENT_TYPE","createElement","Fragment","type","isText","children","_typeof","props","Array","isArray","every","_isText"],"sources":["../../../src/helpers/isText.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\"\n\nconst REACT_FRAGMENT_TYPE = (<></>).type\n\n/**\n * Check whether a `children` prop is text — e.g. just a string (or interpolated string)\n */\nexport const isText = (children: ReactNode) => {\n  // If children is an object, it may be simple, just wrapped in a fragment(s)\n  // `><>Example</><`\n  if (\n    !!children &&\n    typeof children === \"object\" &&\n    \"type\" in children &&\n    children.type === REACT_FRAGMENT_TYPE\n  ) {\n    return isText(children.props.children)\n  }\n\n  // Non-fragment interpolated children is an array:\n  // `>Exmaple ({2 + 2})<` => [\"Example (\", 4, \")\"]\n  if (Array.isArray(children)) {\n    return children.every(isText)\n  }\n\n  return typeof children === \"string\" || typeof children === \"number\"\n}\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AAExC,IAAMC,mBAAmB,GAAG,aAACF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,OAAK,CAAEC,IAAI;;AAExC;AACA;AACA;AACO,IAAMC,OAAM,GAAG,SAATA,MAAMA,CAAIC,QAAmB,EAAK;EAC7C;EACA;EACA,IACE,CAAC,CAACA,QAAQ,IACVC,OAAA,CAAOD,QAAQ,MAAK,QAAQ,IAC5B,MAAM,IAAIA,QAAQ,IAClBA,QAAQ,CAACF,IAAI,KAAKH,mBAAmB,EACrC;IACA,OAAOI,OAAM,CAACC,QAAQ,CAACE,KAAK,CAACF,QAAQ,CAAC;EACxC;;EAEA;EACA;EACA,IAAIG,KAAK,CAACC,OAAO,CAACJ,QAAQ,CAAC,EAAE;IAC3B,OAAOA,QAAQ,CAACK,KAAK,CAACN,OAAM,CAAC;EAC/B;EAEA,OAAO,OAAOC,QAAQ,KAAK,QAAQ,IAAI,OAAOA,QAAQ,KAAK,QAAQ;AACrE,CAAC;AAAA,SAAAM,OAAA,IAAAP,MAAA"}

package/dist/esm/helpers/space.js

@@ -1,4 +1,4 @@
-import { THEME } from "../Theme";
+import { SpacingUnit, THEME } from "../Theme";
 
 /**
  * A helper to easily access space values when not in a styled-components or

package/dist/esm/helpers/space.js.map

@@ -1 +1 @@
-{"version":3,"file":"space.js","names":["THEME","space","spaceKey","parseInt"],"sources":["../../../src/helpers/space.ts"],"sourcesContent":["import { SpacingUnit, THEME } from \"../Theme\"\n\n/**\n * A helper to easily access space values when not in a styled-components or\n * styled-systems context.\n *\n * @deprecated use component spacing props, or `themeGet('space.n')`\n */\nexport const space = (spaceKey: SpacingUnit): number => {\n  return parseInt(THEME.space[spaceKey], 10)\n}\n"],"mappings":"AAAA,SAAsBA,KAAK;;AAE3B;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAKA,CAAIC,QAAqB,EAAa;EACtD,OAAOC,QAAQ,CAACH,KAAK,CAACC,KAAK,CAACC,QAAQ,CAAC,EAAE,EAAE,CAAC;AAC5C,CAAC"}
+{"version":3,"file":"space.js","names":["SpacingUnit","THEME","space","spaceKey","parseInt"],"sources":["../../../src/helpers/space.ts"],"sourcesContent":["import { SpacingUnit, THEME } from \"../Theme\"\n\n/**\n * A helper to easily access space values when not in a styled-components or\n * styled-systems context.\n *\n * @deprecated use component spacing props, or `themeGet('space.n')`\n */\nexport const space = (spaceKey: SpacingUnit): number => {\n  return parseInt(THEME.space[spaceKey], 10)\n}\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,KAAK;;AAE3B;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAKA,CAAIC,QAAqB,EAAa;EACtD,OAAOC,QAAQ,CAACH,KAAK,CAACC,KAAK,CAACC,QAAQ,CAAC,EAAE,EAAE,CAAC;AAC5C,CAAC"}

package/dist/esm/shared/RequiredField.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
-import { Text } from "../elements";
+import { Text, TextProps } from "../elements";
 export var RequiredField = function RequiredField(props) {
   return /*#__PURE__*/React.createElement(Text, _extends({
     variant: "xs",

package/dist/esm/shared/RequiredField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RequiredField.js","names":["React","Text","RequiredField","props","createElement","_extends","variant","color","disabled","textAlign","displayName"],"sources":["../../../src/shared/RequiredField.tsx"],"sourcesContent":["import React from \"react\"\nimport { Text, TextProps } from \"../elements\"\n\nexport const RequiredField: React.FC<\n  React.PropsWithChildren<TextProps & { disabled?: boolean }>\n> = (props) => {\n  return (\n    <Text\n      variant=\"xs\"\n      color={props.disabled ? \"mono30\" : \"mono60\"}\n      textAlign=\"left\"\n      {...props}\n    >\n      *Required\n    </Text>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AAEb,OAAO,IAAMC,aAEZ,GAAG,SAFSA,aAEZA,CAAIC,KAAK,EAAK;EACb,oBACEH,KAAA,CAAAI,aAAA,CAACH,IAAI,EAAAI,QAAA;IACHC,OAAO,EAAC,IAAI;IACZC,KAAK,EAAEJ,KAAK,CAACK,QAAQ,GAAG,QAAQ,GAAG,QAAS;IAC5CC,SAAS,EAAC;EAAM,GACZN,KAAK,GACV,WAED,CAAO;AAEX,CAAC;AAbYD,aAEZ,CAAAQ,WAAA"}
+{"version":3,"file":"RequiredField.js","names":["React","Text","TextProps","RequiredField","props","createElement","_extends","variant","color","disabled","textAlign","displayName"],"sources":["../../../src/shared/RequiredField.tsx"],"sourcesContent":["import React from \"react\"\nimport { Text, TextProps } from \"../elements\"\n\nexport const RequiredField: React.FC<\n  React.PropsWithChildren<TextProps & { disabled?: boolean }>\n> = (props) => {\n  return (\n    <Text\n      variant=\"xs\"\n      color={props.disabled ? \"mono30\" : \"mono60\"}\n      textAlign=\"left\"\n      {...props}\n    >\n      *Required\n    </Text>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,SAAS;AAExB,OAAO,IAAMC,aAEZ,GAAG,SAFSA,aAEZA,CAAIC,KAAK,EAAK;EACb,oBACEJ,KAAA,CAAAK,aAAA,CAACJ,IAAI,EAAAK,QAAA;IACHC,OAAO,EAAC,IAAI;IACZC,KAAK,EAAEJ,KAAK,CAACK,QAAQ,GAAG,QAAQ,GAAG,QAAS;IAC5CC,SAAS,EAAC;EAAM,GACZN,KAAK,GACV,WAED,CAAO;AAEX,CAAC;AAbYD,aAEZ,CAAAQ,WAAA"}

package/dist/esm/themes/Themes.story.js

@@ -4,9 +4,10 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useMemo, useState } from "react";
+import React, { FC, useMemo, useState } from "react";
 import { Banner, Box, Breadcrumbs, Button, BUTTON_VARIANT_NAMES, Clickable, Column, GridColumns, Input, Join, Message, Pill, PILL_VARIANT_NAMES, Select, Separator, Spacer, Stack, Step, Stepper, Tab, Tabs, Text } from "../elements";
 import { THEME, useTheme } from "../Theme";
+import { TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
 import { THEME_DARK } from "@artsy/palette-tokens/dist/themes/v3Dark";
 import CheckmarkFillIcon from "@artsy/icons/CheckmarkFillIcon";
 import CloseFillIcon from "@artsy/icons/CloseFillIcon";