@procore/core-react 12.53.0 → 12.53.2

package/dist/ToggleButton/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","names":["React","StyledToggleButton","ToggleButton","forwardRef","_ref","ref","children","_ref$selected","selected","icon","size","props","_objectWithoutProperties","_excluded","createElement","_extends","$selected","variant","displayName"],"sources":["../../src/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import React from 'react'\nimport { StyledToggleButton } from './ToggleButton.styles'\nimport type { ToggleButtonProps } from './ToggleButton.types'\n\n/**\n\n A toggle button can be used when an element needs to remain active or open\n for extended periods of time. The affects of a toggle button should visibly\n change content on the page.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-togglebutton--demo)\n\n @see [Design Guidelines](https://design.procore.com/toggle-button)\n\n @a11y  @a11y Important: it is critical the label on a toggle does not change when its `selected` prop changes. Alternatively, if the design were to call for the button label to change from \"Mute\" to \"Unmute,\" the `aria-pressed` prop should be set to `undefined`.\n\n @see https://www.w3.org/WAI/ARIA/apg/patterns/button/\n\n */\nexport const ToggleButton = React.forwardRef<\n  HTMLButtonElement,\n  ToggleButtonProps\n>(function ToggleButton(\n  { children, selected = false, icon, size, ...props },\n  ref\n) {\n  return (\n    <StyledToggleButton\n      aria-pressed={selected}\n      {...props}\n      $selected={selected}\n      icon={icon}\n      size={size}\n      variant=\"tertiary\"\n      ref={ref}\n    >\n      {children || null}\n    </StyledToggleButton>\n  )\n})\n\nToggleButton.displayName = 'ToggleButton'\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,kBAAkB,QAAQ,uBAAuB;AAG1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,YAAY,gBAAGF,KAAK,CAACG,UAAU,CAG1C,SAASD,YAAYA,CAAAE,IAAA,EAErBC,GAAG,EACH;EAAA,IAFEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,aAAA,GAAAH,IAAA,CAAEI,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAEE,IAAI,GAAAL,IAAA,CAAJK,IAAI;IAAEC,IAAI,GAAAN,IAAA,CAAJM,IAAI;IAAKC,KAAK,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAGlD,oBACEb,KAAA,CAAAc,aAAA,CAACb,kBAAkB,EAAAc,QAAA;IACjB,gBAAcP;EAAS,GACnBG,KAAK;IACTK,SAAS,EAAER,QAAS;IACpBC,IAAI,EAAEA,IAAK;IACXC,IAAI,EAAEA,IAAK;IACXO,OAAO,EAAC,UAAU;IAClBZ,GAAG,EAAEA;EAAI,IAERC,QAAQ,IAAI,IACK,CAAC;AAEzB,CAAC,CAAC;AAEFJ,YAAY,CAACgB,WAAW,GAAG,cAAc"}
+{"version":3,"file":"ToggleButton.js","names":["React","StyledToggleButton","ToggleButton","forwardRef","_ref","ref","children","_ref$selected","selected","icon","size","props","_objectWithoutProperties","_excluded","createElement","_extends","$selected","variant","displayName"],"sources":["../../src/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import React from 'react'\nimport { StyledToggleButton } from './ToggleButton.styles'\nimport type { ToggleButtonProps } from './ToggleButton.types'\n\n/**\n\n A toggle button can be used when an element needs to remain active or open\n for extended periods of time. The affects of a toggle button should visibly\n change content on the page.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-togglebutton--demo)\n\n @see [Design Guidelines](https://design.procore.com/toggle-button)\n\n @a11y  @a11y Important: it is critical the label on a toggle does not change when its `selected` prop changes. Alternatively, if the design were to call for the button label to change from \"Mute\" to \"Unmute,\" the `aria-pressed` prop should be set to `undefined`.\n\n @see https://www.w3.org/WAI/ARIA/apg/patterns/button/\n\n */\nexport const ToggleButton = React.forwardRef<\n  HTMLButtonElement,\n  ToggleButtonProps\n>(function ToggleButton(\n  { children, selected = false, icon, size, ...props },\n  ref\n) {\n  return (\n    <StyledToggleButton\n      aria-pressed={selected}\n      {...props}\n      $selected={selected}\n      icon={icon}\n      size={size}\n      variant=\"tertiary\"\n      ref={ref}\n    >\n      {children || null}\n    </StyledToggleButton>\n  )\n})\n\nToggleButton.displayName = 'ToggleButton'\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,kBAAkB,QAAQ,uBAAuB;AAG1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,YAAY,gBAAGF,KAAK,CAACG,UAAU,CAG1C,SAASD,YAAYA,CAAAE,IAAA,EAErBC,GAAG,EACH;EAAA,IAFEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,aAAA,GAAAH,IAAA,CAAEI,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAEE,IAAI,GAAAL,IAAA,CAAJK,IAAI;IAAEC,IAAI,GAAAN,IAAA,CAAJM,IAAI;IAAKC,KAAK,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAGlD,oBACEb,KAAA,CAAAc,aAAA,CAACb,kBAAkB,EAAAc,QAAA;IACjB,gBAAcP;EAAS,GACnBG,KAAK;IACTK,SAAS,EAAER,QAAS;IACpBC,IAAI,EAAEA,IAAK;IACXC,IAAI,EAAEA,IAAK;IACXO,OAAO,EAAC,UAAU;IAClBZ,GAAG,EAAEA;EAAI,IAERC,QAAQ,IAAI,IACK,CAAC;AAEzB,CAAC,CAAC;AAEFJ,YAAY,CAACgB,WAAW,GAAG,cAAc","ignoreList":[]}

package/dist/ToggleButton/ToggleButton.styles.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
-export declare const StyledToggleButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+export declare const StyledToggleButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<Omit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
     $selected: boolean;
-    loading?: boolean | undefined;
+    loading?: boolean;
 }>> & string & Omit<import("react").ForwardRefExoticComponent<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/ToggleButton/ToggleButton.styles.js

@@ -5,7 +5,7 @@ import { focusBlue } from '../_styles/mixins';
 var selectedStyles = /*#__PURE__*/css(["background-color:", ";color:", ";box-shadow:0 0 0 2px ", ";[data-icon-prop='true']{color:", ";}&.hover,&:hover{background-color:", ";color:", ";}&.focus,&:focus{background-color:", ";color:", ";box-shadow:0 0 0 2px ", ";}&:disabled{background-color:", ";color:", ";box-shadow:0 0 0 2px ", ";[data-icon-prop='true']{color:", ";}circle{stroke:", ";}}"], colors.blue96, colors.blue45, colors.blue50, colors.blue50, colors.blue90, colors.blue45, colors.blue96, colors.blue45, colors.blue50, colors.blue96, colors.blue70, colors.blue70, colors.blue70, colors.blue50);
 export var StyledToggleButton = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledToggleButton",
-  componentId: "core-12_53_0__sc-1x59fxi-0"
+  componentId: "core-12_53_2__sc-1x59fxi-0"
 })(["&.focus,&:focus{box-shadow:none;outline:2px solid ", ";outline-offset:4px;}&.selected{", "}", ""], focusBlue, selectedStyles, function (_ref) {
   var $selected = _ref.$selected;
   return $selected && selectedStyles;

package/dist/ToggleButton/ToggleButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.styles.js","names":["styled","css","Button","colors","focusBlue","selectedStyles","blue96","blue45","blue50","blue90","blue70","StyledToggleButton","withConfig","displayName","componentId","_ref","$selected"],"sources":["../../src/ToggleButton/ToggleButton.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Button } from '../Button/Button'\nimport { colors } from '../_styles/colors'\nimport { focusBlue } from '../_styles/mixins'\n\nconst selectedStyles = css`\n  background-color: ${colors.blue96};\n  color: ${colors.blue45};\n  box-shadow: 0 0 0 2px ${colors.blue50};\n\n  [data-icon-prop='true'] {\n    color: ${colors.blue50};\n  }\n\n  &.hover,\n  &:hover {\n    background-color: ${colors.blue90};\n    color: ${colors.blue45};\n  }\n\n  &.focus,\n  &:focus {\n    background-color: ${colors.blue96};\n    color: ${colors.blue45};\n    box-shadow: 0 0 0 2px ${colors.blue50};\n  }\n\n  &:disabled {\n    background-color: ${colors.blue96};\n    color: ${colors.blue70};\n    box-shadow: 0 0 0 2px ${colors.blue70};\n\n    [data-icon-prop='true'] {\n      color: ${colors.blue70};\n    }\n\n    circle {\n      stroke: ${colors.blue50};\n    }\n  }\n`\n\nexport const StyledToggleButton = styled(Button)<{\n  $selected: boolean\n  loading?: boolean\n}>`\n  &.focus,\n  &:focus {\n    box-shadow: none;\n    outline: 2px solid ${focusBlue};\n    outline-offset: 4px;\n  }\n\n  &.selected {\n    ${selectedStyles}\n  }\n\n  ${({ $selected }) => $selected && selectedStyles}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,mBAAmB;AAE7C,IAAMC,cAAc,gBAAGJ,GAAG,mWACJE,MAAM,CAACG,MAAM,EACxBH,MAAM,CAACI,MAAM,EACEJ,MAAM,CAACK,MAAM,EAG1BL,MAAM,CAACK,MAAM,EAKFL,MAAM,CAACM,MAAM,EACxBN,MAAM,CAACI,MAAM,EAKFJ,MAAM,CAACG,MAAM,EACxBH,MAAM,CAACI,MAAM,EACEJ,MAAM,CAACK,MAAM,EAIjBL,MAAM,CAACG,MAAM,EACxBH,MAAM,CAACO,MAAM,EACEP,MAAM,CAACO,MAAM,EAG1BP,MAAM,CAACO,MAAM,EAIZP,MAAM,CAACK,MAAM,CAG5B;AAED,OAAO,IAAMG,kBAAkB,gBAAGX,MAAM,CAACE,MAAM,CAAC,CAAAU,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wGAOvBV,SAAS,EAK5BC,cAAc,EAGhB,UAAAU,IAAA;EAAA,IAAGC,SAAS,GAAAD,IAAA,CAATC,SAAS;EAAA,OAAOA,SAAS,IAAIX,cAAc;AAAA,EACjD"}
+{"version":3,"file":"ToggleButton.styles.js","names":["styled","css","Button","colors","focusBlue","selectedStyles","blue96","blue45","blue50","blue90","blue70","StyledToggleButton","withConfig","displayName","componentId","_ref","$selected"],"sources":["../../src/ToggleButton/ToggleButton.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Button } from '../Button/Button'\nimport { colors } from '../_styles/colors'\nimport { focusBlue } from '../_styles/mixins'\n\nconst selectedStyles = css`\n  background-color: ${colors.blue96};\n  color: ${colors.blue45};\n  box-shadow: 0 0 0 2px ${colors.blue50};\n\n  [data-icon-prop='true'] {\n    color: ${colors.blue50};\n  }\n\n  &.hover,\n  &:hover {\n    background-color: ${colors.blue90};\n    color: ${colors.blue45};\n  }\n\n  &.focus,\n  &:focus {\n    background-color: ${colors.blue96};\n    color: ${colors.blue45};\n    box-shadow: 0 0 0 2px ${colors.blue50};\n  }\n\n  &:disabled {\n    background-color: ${colors.blue96};\n    color: ${colors.blue70};\n    box-shadow: 0 0 0 2px ${colors.blue70};\n\n    [data-icon-prop='true'] {\n      color: ${colors.blue70};\n    }\n\n    circle {\n      stroke: ${colors.blue50};\n    }\n  }\n`\n\nexport const StyledToggleButton = styled(Button)<{\n  $selected: boolean\n  loading?: boolean\n}>`\n  &.focus,\n  &:focus {\n    box-shadow: none;\n    outline: 2px solid ${focusBlue};\n    outline-offset: 4px;\n  }\n\n  &.selected {\n    ${selectedStyles}\n  }\n\n  ${({ $selected }) => $selected && selectedStyles}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,mBAAmB;AAE7C,IAAMC,cAAc,gBAAGJ,GAAG,mWACJE,MAAM,CAACG,MAAM,EACxBH,MAAM,CAACI,MAAM,EACEJ,MAAM,CAACK,MAAM,EAG1BL,MAAM,CAACK,MAAM,EAKFL,MAAM,CAACM,MAAM,EACxBN,MAAM,CAACI,MAAM,EAKFJ,MAAM,CAACG,MAAM,EACxBH,MAAM,CAACI,MAAM,EACEJ,MAAM,CAACK,MAAM,EAIjBL,MAAM,CAACG,MAAM,EACxBH,MAAM,CAACO,MAAM,EACEP,MAAM,CAACO,MAAM,EAG1BP,MAAM,CAACO,MAAM,EAIZP,MAAM,CAACK,MAAM,CAG5B;AAED,OAAO,IAAMG,kBAAkB,gBAAGX,MAAM,CAACE,MAAM,CAAC,CAAAU,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wGAOvBV,SAAS,EAK5BC,cAAc,EAGhB,UAAAU,IAAA;EAAA,IAAGC,SAAS,GAAAD,IAAA,CAATC,SAAS;EAAA,OAAOA,SAAS,IAAIX,cAAc;AAAA,EACjD","ignoreList":[]}

package/dist/ToggleButton/ToggleButton.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ButtonSizes } from '../Button/Button.types';
 export interface ToggleButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**

package/dist/ToggleButton/ToggleButton.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.types.js","names":[],"sources":["../../src/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { ButtonSizes } from '../Button/Button.types'\n\nexport interface ToggleButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Set the current value of the toggle button\n   * @default false\n   * @since 10.19.0\n   */\n  selected?: boolean\n\n  /**\n   * The icon to display on the left side of the label. This should be an\n   * icon from `@procore/core-icons`.\n   * @since 10.19.0\n   */\n  icon?: React.ReactNode\n\n  /**\n   * Shows the toggle button spinner\n   * @since 12.13.0\n   */\n  loading?: boolean\n\n  /**\n   * The toggle button size\n   * @since 10.19.0\n   */\n  size?: ButtonSizes\n}\n"],"mappings":""}
+{"version":3,"file":"ToggleButton.types.js","names":[],"sources":["../../src/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { ButtonSizes } from '../Button/Button.types'\n\nexport interface ToggleButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Set the current value of the toggle button\n   * @default false\n   * @since 10.19.0\n   */\n  selected?: boolean\n\n  /**\n   * The icon to display on the left side of the label. This should be an\n   * icon from `@procore/core-icons`.\n   * @since 10.19.0\n   */\n  icon?: React.ReactNode\n\n  /**\n   * Shows the toggle button spinner\n   * @since 12.13.0\n   */\n  loading?: boolean\n\n  /**\n   * The toggle button size\n   * @since 10.19.0\n   */\n  size?: ButtonSizes\n}\n"],"mappings":"","ignoreList":[]}

package/dist/ToggleButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ToggleButton"],"sources":["../../src/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton'\nexport type { ToggleButtonProps } from './ToggleButton.types'\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB"}
+{"version":3,"file":"index.js","names":["ToggleButton"],"sources":["../../src/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton'\nexport type { ToggleButtonProps } from './ToggleButton.types'\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB","ignoreList":[]}

package/dist/Token/Token.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.js","names":["Clear","Error","ErrorIcon","useId","React","Tooltip","useI18nContext","addSubcomponents","StyledErrorButton","StyledErrorIcon","StyledLabel","StyledRemove","StyledToken","TokenContext","createContext","labelId","removeId","isDisabled","Parent","forwardRef","Token","_ref","ref","children","_ref$disabled","disabled","_ref$focused","focused","_ref$error","error","variant","props","_objectWithoutProperties","_excluded","i18n","isFocused","hasError","Boolean","errorMessage","undefined","createElement","Provider","value","_extends","tabIndex","$disabled","$focused","$error","overlay","t","type","size","role","Remove","TokenRemove","_React$useContext","useContext","concat","id","icon","Label","_ref2","_excluded2","_React$useContext2","displayName"],"sources":["../../src/Token/Token.tsx"],"sourcesContent":["import { Clear, Error as ErrorIcon } from '@procore/core-icons'\nimport { useId } from '@react-aria/utils'\nimport React from 'react'\nimport type { ButtonProps } from '../Button'\nimport { Tooltip } from '../Tooltip'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport type { Props } from '../_utils/types'\nimport {\n  StyledErrorButton,\n  StyledErrorIcon,\n  StyledLabel,\n  StyledRemove,\n  StyledToken,\n} from './Token.styles'\nimport type { TokenContextApi, TokenProps } from './Token.types'\n\nconst TokenContext = React.createContext<TokenContextApi>({\n  labelId: '',\n  removeId: '',\n  isDisabled: false,\n})\n\nconst Parent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & TokenProps\n>(function Token(\n  {\n    children,\n    disabled = false,\n    focused = false,\n    error = false,\n    variant,\n    ...props\n  },\n  ref\n) {\n  const i18n = useI18nContext()\n  const labelId = useId()\n  const removeId = useId()\n  const isDisabled = disabled || variant === 'disabled'\n  const isFocused = focused || variant === 'focused'\n  const hasError = Boolean(error)\n  const errorMessage = typeof error === 'string' ? error : undefined\n\n  return (\n    <TokenContext.Provider value={{ labelId, removeId, isDisabled }}>\n      <StyledToken\n        ref={ref}\n        tabIndex={-1}\n        {...props}\n        $disabled={isDisabled}\n        $focused={isFocused}\n        $error={hasError}\n      >\n        {hasError &&\n          (errorMessage ? (\n            <Tooltip overlay={errorMessage}>\n              <StyledErrorButton\n                aria-label={i18n.t('core.token.error')}\n                type=\"button\"\n              >\n                <ErrorIcon size=\"sm\" />\n              </StyledErrorButton>\n            </Tooltip>\n          ) : (\n            <StyledErrorIcon aria-label={i18n.t('core.token.error')} role=\"img\">\n              <ErrorIcon size=\"sm\" />\n            </StyledErrorIcon>\n          ))}\n        {children}\n      </StyledToken>\n    </TokenContext.Provider>\n  )\n})\n\nconst Remove = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function TokenRemove(props, ref) {\n    const i18n = useI18nContext()\n    const { labelId, removeId, isDisabled } = React.useContext(TokenContext)\n\n    return (\n      <StyledRemove\n        ref={ref}\n        aria-hidden=\"false\"\n        aria-label={i18n.t('core.token.remove')}\n        aria-labelledby={`${removeId} ${labelId}`}\n        id={removeId}\n        disabled={isDisabled}\n        {...props}\n        icon={<Clear role=\"img\" />}\n        size=\"sm\"\n        variant=\"tertiary\"\n      />\n    )\n  }\n)\n\nconst Label = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement> & Props\n>(function Label({ children, ...props }, ref) {\n  const { labelId } = React.useContext(TokenContext)\n\n  return (\n    <StyledLabel id={labelId} ref={ref} {...props}>\n      {children}\n    </StyledLabel>\n  )\n})\n\nParent.displayName = 'Token'\nRemove.displayName = 'Token.Remove'\nLabel.displayName = 'Token.Label'\n\n/**\n\n We use tokens in our multi select dropdowns and file attachers to indicate what\n has been selected or attached. Tokens in these components are removable.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-token--demo)\n\n @see [Design Guidelines](https://design.procore.com/tokens)\n\n */\nexport const Token = addSubcomponents(\n  {\n    Label,\n    Remove,\n  },\n  Parent\n)\n"],"mappings":"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"}
+{"version":3,"file":"Token.js","names":["Clear","Error","ErrorIcon","useId","React","Tooltip","useI18nContext","addSubcomponents","StyledErrorButton","StyledErrorIcon","StyledLabel","StyledRemove","StyledToken","TokenContext","createContext","labelId","removeId","isDisabled","Parent","forwardRef","Token","_ref","ref","children","_ref$disabled","disabled","_ref$focused","focused","_ref$error","error","variant","props","_objectWithoutProperties","_excluded","i18n","isFocused","hasError","Boolean","errorMessage","undefined","createElement","Provider","value","_extends","tabIndex","$disabled","$focused","$error","overlay","t","type","size","role","Remove","TokenRemove","_React$useContext","useContext","concat","id","icon","Label","_ref2","_excluded2","_React$useContext2","displayName"],"sources":["../../src/Token/Token.tsx"],"sourcesContent":["import { Clear, Error as ErrorIcon } from '@procore/core-icons'\nimport { useId } from '@react-aria/utils'\nimport React from 'react'\nimport type { ButtonProps } from '../Button'\nimport { Tooltip } from '../Tooltip'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport type { Props } from '../_utils/types'\nimport {\n  StyledErrorButton,\n  StyledErrorIcon,\n  StyledLabel,\n  StyledRemove,\n  StyledToken,\n} from './Token.styles'\nimport type { TokenContextApi, TokenProps } from './Token.types'\n\nconst TokenContext = React.createContext<TokenContextApi>({\n  labelId: '',\n  removeId: '',\n  isDisabled: false,\n})\n\nconst Parent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & TokenProps\n>(function Token(\n  {\n    children,\n    disabled = false,\n    focused = false,\n    error = false,\n    variant,\n    ...props\n  },\n  ref\n) {\n  const i18n = useI18nContext()\n  const labelId = useId()\n  const removeId = useId()\n  const isDisabled = disabled || variant === 'disabled'\n  const isFocused = focused || variant === 'focused'\n  const hasError = Boolean(error)\n  const errorMessage = typeof error === 'string' ? error : undefined\n\n  return (\n    <TokenContext.Provider value={{ labelId, removeId, isDisabled }}>\n      <StyledToken\n        ref={ref}\n        tabIndex={-1}\n        {...props}\n        $disabled={isDisabled}\n        $focused={isFocused}\n        $error={hasError}\n      >\n        {hasError &&\n          (errorMessage ? (\n            <Tooltip overlay={errorMessage}>\n              <StyledErrorButton\n                aria-label={i18n.t('core.token.error')}\n                type=\"button\"\n              >\n                <ErrorIcon size=\"sm\" />\n              </StyledErrorButton>\n            </Tooltip>\n          ) : (\n            <StyledErrorIcon aria-label={i18n.t('core.token.error')} role=\"img\">\n              <ErrorIcon size=\"sm\" />\n            </StyledErrorIcon>\n          ))}\n        {children}\n      </StyledToken>\n    </TokenContext.Provider>\n  )\n})\n\nconst Remove = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function TokenRemove(props, ref) {\n    const i18n = useI18nContext()\n    const { labelId, removeId, isDisabled } = React.useContext(TokenContext)\n\n    return (\n      <StyledRemove\n        ref={ref}\n        aria-hidden=\"false\"\n        aria-label={i18n.t('core.token.remove')}\n        aria-labelledby={`${removeId} ${labelId}`}\n        id={removeId}\n        disabled={isDisabled}\n        {...props}\n        icon={<Clear role=\"img\" />}\n        size=\"sm\"\n        variant=\"tertiary\"\n      />\n    )\n  }\n)\n\nconst Label = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement> & Props\n>(function Label({ children, ...props }, ref) {\n  const { labelId } = React.useContext(TokenContext)\n\n  return (\n    <StyledLabel id={labelId} ref={ref} {...props}>\n      {children}\n    </StyledLabel>\n  )\n})\n\nParent.displayName = 'Token'\nRemove.displayName = 'Token.Remove'\nLabel.displayName = 'Token.Label'\n\n/**\n\n We use tokens in our multi select dropdowns and file attachers to indicate what\n has been selected or attached. Tokens in these components are removable.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-token--demo)\n\n @see [Design Guidelines](https://design.procore.com/tokens)\n\n */\nexport const Token = addSubcomponents(\n  {\n    Label,\n    Remove,\n  },\n  Parent\n)\n"],"mappings":";;;;;AAAA,SAASA,KAAK,EAAEC,KAAK,IAAIC,SAAS,QAAQ,qBAAqB;AAC/D,SAASC,KAAK,QAAQ,mBAAmB;AACzC,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SACEC,iBAAiB,EACjBC,eAAe,EACfC,WAAW,EACXC,YAAY,EACZC,WAAW,QACN,gBAAgB;AAGvB,IAAMC,YAAY,gBAAGT,KAAK,CAACU,aAAa,CAAkB;EACxDC,OAAO,EAAE,EAAE;EACXC,QAAQ,EAAE,EAAE;EACZC,UAAU,EAAE;AACd,CAAC,CAAC;AAEF,IAAMC,MAAM,gBAAGd,KAAK,CAACe,UAAU,CAG7B,SAASC,KAAKA,CAAAC,IAAA,EASdC,GAAG,EACH;EAAA,IAREC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,aAAA,GAAAH,IAAA,CACRI,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,YAAA,GAAAL,IAAA,CAChBM,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IAAAE,UAAA,GAAAP,IAAA,CACfQ,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,KAAK,GAAAA,UAAA;IACbE,OAAO,GAAAT,IAAA,CAAPS,OAAO;IACJC,KAAK,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAIV,IAAMC,IAAI,GAAG5B,cAAc,CAAC,CAAC;EAC7B,IAAMS,OAAO,GAAGZ,KAAK,CAAC,CAAC;EACvB,IAAMa,QAAQ,GAAGb,KAAK,CAAC,CAAC;EACxB,IAAMc,UAAU,GAAGQ,QAAQ,IAAIK,OAAO,KAAK,UAAU;EACrD,IAAMK,SAAS,GAAGR,OAAO,IAAIG,OAAO,KAAK,SAAS;EAClD,IAAMM,QAAQ,GAAGC,OAAO,CAACR,KAAK,CAAC;EAC/B,IAAMS,YAAY,GAAG,OAAOT,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGU,SAAS;EAElE,oBACEnC,KAAA,CAAAoC,aAAA,CAAC3B,YAAY,CAAC4B,QAAQ;IAACC,KAAK,EAAE;MAAE3B,OAAO,EAAPA,OAAO;MAAEC,QAAQ,EAARA,QAAQ;MAAEC,UAAU,EAAVA;IAAW;EAAE,gBAC9Db,KAAA,CAAAoC,aAAA,CAAC5B,WAAW,EAAA+B,QAAA;IACVrB,GAAG,EAAEA,GAAI;IACTsB,QAAQ,EAAE,CAAC;EAAE,GACTb,KAAK;IACTc,SAAS,EAAE5B,UAAW;IACtB6B,QAAQ,EAAEX,SAAU;IACpBY,MAAM,EAAEX;EAAS,IAEhBA,QAAQ,KACNE,YAAY,gBACXlC,KAAA,CAAAoC,aAAA,CAACnC,OAAO;IAAC2C,OAAO,EAAEV;EAAa,gBAC7BlC,KAAA,CAAAoC,aAAA,CAAChC,iBAAiB;IAChB,cAAY0B,IAAI,CAACe,CAAC,CAAC,kBAAkB,CAAE;IACvCC,IAAI,EAAC;EAAQ,gBAEb9C,KAAA,CAAAoC,aAAA,CAACtC,SAAS;IAACiD,IAAI,EAAC;EAAI,CAAE,CACL,CACZ,CAAC,gBAEV/C,KAAA,CAAAoC,aAAA,CAAC/B,eAAe;IAAC,cAAYyB,IAAI,CAACe,CAAC,CAAC,kBAAkB,CAAE;IAACG,IAAI,EAAC;EAAK,gBACjEhD,KAAA,CAAAoC,aAAA,CAACtC,SAAS;IAACiD,IAAI,EAAC;EAAI,CAAE,CACP,CAClB,CAAC,EACH5B,QACU,CACQ,CAAC;AAE5B,CAAC,CAAC;AAEF,IAAM8B,MAAM,gBAAGjD,KAAK,CAACe,UAAU,CAC7B,SAASmC,WAAWA,CAACvB,KAAK,EAAET,GAAG,EAAE;EAC/B,IAAMY,IAAI,GAAG5B,cAAc,CAAC,CAAC;EAC7B,IAAAiD,iBAAA,GAA0CnD,KAAK,CAACoD,UAAU,CAAC3C,YAAY,CAAC;IAAhEE,OAAO,GAAAwC,iBAAA,CAAPxC,OAAO;IAAEC,QAAQ,GAAAuC,iBAAA,CAARvC,QAAQ;IAAEC,UAAU,GAAAsC,iBAAA,CAAVtC,UAAU;EAErC,oBACEb,KAAA,CAAAoC,aAAA,CAAC7B,YAAY,EAAAgC,QAAA;IACXrB,GAAG,EAAEA,GAAI;IACT,eAAY,OAAO;IACnB,cAAYY,IAAI,CAACe,CAAC,CAAC,mBAAmB,CAAE;IACxC,sBAAAQ,MAAA,CAAoBzC,QAAQ,OAAAyC,MAAA,CAAI1C,OAAO,CAAG;IAC1C2C,EAAE,EAAE1C,QAAS;IACbS,QAAQ,EAAER;EAAW,GACjBc,KAAK;IACT4B,IAAI,eAAEvD,KAAA,CAAAoC,aAAA,CAACxC,KAAK;MAACoD,IAAI,EAAC;IAAK,CAAE,CAAE;IAC3BD,IAAI,EAAC,IAAI;IACTrB,OAAO,EAAC;EAAU,EACnB,CAAC;AAEN,CACF,CAAC;AAED,IAAM8B,KAAK,gBAAGxD,KAAK,CAACe,UAAU,CAG5B,SAASyC,KAAKA,CAAAC,KAAA,EAAyBvC,GAAG,EAAE;EAAA,IAA3BC,QAAQ,GAAAsC,KAAA,CAARtC,QAAQ;IAAKQ,KAAK,GAAAC,wBAAA,CAAA6B,KAAA,EAAAC,UAAA;EACnC,IAAAC,kBAAA,GAAoB3D,KAAK,CAACoD,UAAU,CAAC3C,YAAY,CAAC;IAA1CE,OAAO,GAAAgD,kBAAA,CAAPhD,OAAO;EAEf,oBACEX,KAAA,CAAAoC,aAAA,CAAC9B,WAAW,EAAAiC,QAAA;IAACe,EAAE,EAAE3C,OAAQ;IAACO,GAAG,EAAEA;EAAI,GAAKS,KAAK,GAC1CR,QACU,CAAC;AAElB,CAAC,CAAC;AAEFL,MAAM,CAAC8C,WAAW,GAAG,OAAO;AAC5BX,MAAM,CAACW,WAAW,GAAG,cAAc;AACnCJ,KAAK,CAACI,WAAW,GAAG,aAAa;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAM5C,KAAK,GAAGb,gBAAgB,CACnC;EACEqD,KAAK,EAALA,KAAK;EACLP,MAAM,EAANA;AACF,CAAC,EACDnC,MACF,CAAC","ignoreList":[]}

package/dist/Token/Token.styles.d.ts

@@ -1,11 +1,20 @@
-/// <reference types="react" />
-export declare const StyledErrorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StyledErrorButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StyledRemove: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const StyledToken: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledErrorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledErrorButton: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledRemove: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string & Omit<import("react").ForwardRefExoticComponent<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledToken: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $disabled: boolean;
     $focused: boolean;
     $error: boolean;

package/dist/Token/Token.styles.js

@@ -7,23 +7,23 @@ import { getEllipsis, getFocus, getGapOutlineFocus } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledErrorIcon = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledErrorIcon",
-  componentId: "core-12_53_0__sc-zqi94b-0"
+  componentId: "core-12_53_2__sc-zqi94b-0"
 })(["align-items:center;color:", ";display:inline-flex;flex:0 0 auto;margin-right:", "px;"], colors.white, spacing.xs);
 export var StyledErrorButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledErrorButton",
-  componentId: "core-12_53_0__sc-zqi94b-1"
+  componentId: "core-12_53_2__sc-zqi94b-1"
 })(["", " align-items:center;border-radius:50%;color:", ";display:inline-flex;flex:0 0 auto;margin-right:", "px;&:focus-visible{", "}"], getUnstyledButton, colors.white, spacing.xs, getGapOutlineFocus('ontop'));
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_53_0__sc-zqi94b-2"
+  componentId: "core-12_53_2__sc-zqi94b-2"
 })(["", " ", " flex:0 1 auto;"], getTypographyIntent('body'), getEllipsis);
 export var StyledRemove = /*#__PURE__*/styled(Button).withConfig({
   displayName: "StyledRemove",
-  componentId: "core-12_53_0__sc-zqi94b-3"
+  componentId: "core-12_53_2__sc-zqi94b-3"
 })(["border-radius:100%;color:", ";flex:0 0 auto;height:16px;margin:0 -", "px 0 ", "px;padding:0;width:16px;&:hover{background:", ";color:", ";}&:disabled,&[aria-disabled='true']{color:", ";}"], colors.white, spacing.sm, spacing.sm, colors.white, colors.blue40, colors.white);
 export var StyledToken = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToken",
-  componentId: "core-12_53_0__sc-zqi94b-4"
+  componentId: "core-12_53_2__sc-zqi94b-4"
 })(["align-items:center;background-color:", ";border-radius:200px;border:1px solid transparent;color:", ";cursor:default;display:inline-flex;height:24px;line-height:1;max-width:360px;min-width:48px;padding:", "px ", "px;&:hover,&.hover{background-color:", ";}", " ", " ", ""], colors.blue50, colors.white, spacing.xs, spacing.md, colors.blue45, function (_ref) {
   var _ref$$focused = _ref.$focused,
     $focused = _ref$$focused === void 0 ? false : _ref$$focused,

package/dist/Token/Token.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.styles.js","names":["styled","css","Button","getUnstyledButton","getTypographyIntent","colors","getEllipsis","getFocus","getGapOutlineFocus","spacing","StyledErrorIcon","span","withConfig","displayName","componentId","white","xs","StyledErrorButton","button","StyledLabel","StyledRemove","sm","blue40","StyledToken","div","blue50","md","blue45","_ref","_ref$$focused","$focused","_ref$$disabled","$disabled","_ref2","_ref2$$disabled","gray70","_ref3","_ref3$$error","$error","red50"],"sources":["../../src/Token/Token.styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Button } from '../Button'\nimport { getUnstyledButton } from '../Semantic/Semantic.styles'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { getEllipsis, getFocus, getGapOutlineFocus } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledErrorIcon = styled.span`\n  align-items: center;\n  color: ${colors.white};\n  display: inline-flex;\n  flex: 0 0 auto;\n  margin-right: ${spacing.xs}px;\n`\n\nexport const StyledErrorButton = styled.button`\n  ${getUnstyledButton}\n  align-items: center;\n  border-radius: 50%;\n  color: ${colors.white};\n  display: inline-flex;\n  flex: 0 0 auto;\n  margin-right: ${spacing.xs}px;\n\n  &:focus-visible {\n    ${getGapOutlineFocus('ontop')}\n  }\n`\n\nexport const StyledLabel = styled.span`\n  ${getTypographyIntent('body')}\n\n  ${getEllipsis}\n\n  flex: 0 1 auto;\n`\n\nexport const StyledRemove = styled(Button)`\n  border-radius: 100%;\n  color: ${colors.white};\n  flex: 0 0 auto;\n  height: 16px;\n  margin: 0 -${spacing.sm}px 0 ${spacing.sm}px;\n  padding: 0;\n  width: 16px;\n\n  &:hover {\n    background: ${colors.white};\n    color: ${colors.blue40};\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: ${colors.white};\n  }\n`\n\nexport const StyledToken = styled.div<{\n  $disabled: boolean\n  $focused: boolean\n  $error: boolean\n}>`\n  align-items: center;\n  background-color: ${colors.blue50};\n  border-radius: 200px; // TODO investigate this magic number\n  border: 1px solid transparent;\n  color: ${colors.white};\n  cursor: default;\n  display: inline-flex;\n  height: 24px;\n  line-height: 1; // TODO investigate this magic number\n  max-width: 360px; // TODO investigate this magic number\n  min-width: 48px; // TODO investigate this magic number\n  padding: ${spacing.xs}px ${spacing.md}px;\n\n  &:hover,\n  &.hover {\n    background-color: ${colors.blue45};\n  }\n\n  ${({ $focused = false, $disabled = false }) =>\n    $focused &&\n    css`\n      ${getFocus()}\n\n      background-color: ${colors.blue45};\n\n      ${!$disabled &&\n      css`\n        ${StyledRemove} {\n          background-color: ${colors.white};\n          color: ${colors.blue45};\n        }\n      `}\n    `}\n\n  ${({ $disabled = false }) =>\n    $disabled &&\n    css`\n      background-color: ${colors.gray70};\n      border-color: transparent;\n      box-shadow: none;\n      pointer-events: none;\n    `}\n\n  ${({ $error = false }) =>\n    $error &&\n    css`\n      padding-left: ${spacing.xs}px;\n\n      &,\n      &:hover {\n        background-color: ${colors.red50};\n      }\n    `}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,WAAW,EAAEC,QAAQ,EAAEC,kBAAkB,QAAQ,mBAAmB;AAC7E,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,eAAe,gBAAGV,MAAM,CAACW,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6FAE/BT,MAAM,CAACU,KAAK,EAGLN,OAAO,CAACO,EAAE,CAC3B;AAED,OAAO,IAAMC,iBAAiB,gBAAGjB,MAAM,CAACkB,MAAM,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yIAC1CX,iBAAiB,EAGVE,MAAM,CAACU,KAAK,EAGLN,OAAO,CAACO,EAAE,EAGtBR,kBAAkB,CAAC,OAAO,CAAC,CAEhC;AAED,OAAO,IAAMW,WAAW,gBAAGnB,MAAM,CAACW,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iCAClCV,mBAAmB,CAAC,MAAM,CAAC,EAE3BE,WAAW,CAGd;AAED,OAAO,IAAMc,YAAY,gBAAGpB,MAAM,CAACE,MAAM,CAAC,CAAAU,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mMAE/BT,MAAM,CAACU,KAAK,EAGRN,OAAO,CAACY,EAAE,EAAQZ,OAAO,CAACY,EAAE,EAKzBhB,MAAM,CAACU,KAAK,EACjBV,MAAM,CAACiB,MAAM,EAKbjB,MAAM,CAACU,KAAK,CAExB;AAED,OAAO,IAAMQ,WAAW,gBAAGvB,MAAM,CAACwB,GAAG,CAAAZ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qRAMfT,MAAM,CAACoB,MAAM,EAGxBpB,MAAM,CAACU,KAAK,EAOVN,OAAO,CAACO,EAAE,EAAMP,OAAO,CAACiB,EAAE,EAIfrB,MAAM,CAACsB,MAAM,EAGjC,UAAAC,IAAA;EAAA,IAAAC,aAAA,GAAAD,IAAA,CAAGE,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,cAAA,GAAAH,IAAA,CAAEI,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;EAAA,OACtCD,QAAQ,IACR7B,GAAG,sCACCM,QAAQ,CAAC,CAAC,EAEQF,MAAM,CAACsB,MAAM,EAE/B,CAACK,SAAS,IACZ/B,GAAG,8CACCmB,YAAY,EACQf,MAAM,CAACU,KAAK,EACvBV,MAAM,CAACsB,MAAM,CAEzB,CACF;AAAA,GAED,UAAAM,KAAA;EAAA,IAAAC,eAAA,GAAAD,KAAA,CAAGD,SAAS;IAATA,SAAS,GAAAE,eAAA,cAAG,KAAK,GAAAA,eAAA;EAAA,OACpBF,SAAS,IACT/B,GAAG,0FACmBI,MAAM,CAAC8B,MAAM,CAIlC;AAAA,GAED,UAAAC,KAAA;EAAA,IAAAC,YAAA,GAAAD,KAAA,CAAGE,MAAM;IAANA,MAAM,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;EAAA,OACjBC,MAAM,IACNrC,GAAG,4DACeQ,OAAO,CAACO,EAAE,EAIJX,MAAM,CAACkC,KAAK,CAEnC;AAAA,EACJ"}
+{"version":3,"file":"Token.styles.js","names":["styled","css","Button","getUnstyledButton","getTypographyIntent","colors","getEllipsis","getFocus","getGapOutlineFocus","spacing","StyledErrorIcon","span","withConfig","displayName","componentId","white","xs","StyledErrorButton","button","StyledLabel","StyledRemove","sm","blue40","StyledToken","div","blue50","md","blue45","_ref","_ref$$focused","$focused","_ref$$disabled","$disabled","_ref2","_ref2$$disabled","gray70","_ref3","_ref3$$error","$error","red50"],"sources":["../../src/Token/Token.styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Button } from '../Button'\nimport { getUnstyledButton } from '../Semantic/Semantic.styles'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { getEllipsis, getFocus, getGapOutlineFocus } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledErrorIcon = styled.span`\n  align-items: center;\n  color: ${colors.white};\n  display: inline-flex;\n  flex: 0 0 auto;\n  margin-right: ${spacing.xs}px;\n`\n\nexport const StyledErrorButton = styled.button`\n  ${getUnstyledButton}\n  align-items: center;\n  border-radius: 50%;\n  color: ${colors.white};\n  display: inline-flex;\n  flex: 0 0 auto;\n  margin-right: ${spacing.xs}px;\n\n  &:focus-visible {\n    ${getGapOutlineFocus('ontop')}\n  }\n`\n\nexport const StyledLabel = styled.span`\n  ${getTypographyIntent('body')}\n\n  ${getEllipsis}\n\n  flex: 0 1 auto;\n`\n\nexport const StyledRemove = styled(Button)`\n  border-radius: 100%;\n  color: ${colors.white};\n  flex: 0 0 auto;\n  height: 16px;\n  margin: 0 -${spacing.sm}px 0 ${spacing.sm}px;\n  padding: 0;\n  width: 16px;\n\n  &:hover {\n    background: ${colors.white};\n    color: ${colors.blue40};\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: ${colors.white};\n  }\n`\n\nexport const StyledToken = styled.div<{\n  $disabled: boolean\n  $focused: boolean\n  $error: boolean\n}>`\n  align-items: center;\n  background-color: ${colors.blue50};\n  border-radius: 200px; // TODO investigate this magic number\n  border: 1px solid transparent;\n  color: ${colors.white};\n  cursor: default;\n  display: inline-flex;\n  height: 24px;\n  line-height: 1; // TODO investigate this magic number\n  max-width: 360px; // TODO investigate this magic number\n  min-width: 48px; // TODO investigate this magic number\n  padding: ${spacing.xs}px ${spacing.md}px;\n\n  &:hover,\n  &.hover {\n    background-color: ${colors.blue45};\n  }\n\n  ${({ $focused = false, $disabled = false }) =>\n    $focused &&\n    css`\n      ${getFocus()}\n\n      background-color: ${colors.blue45};\n\n      ${!$disabled &&\n      css`\n        ${StyledRemove} {\n          background-color: ${colors.white};\n          color: ${colors.blue45};\n        }\n      `}\n    `}\n\n  ${({ $disabled = false }) =>\n    $disabled &&\n    css`\n      background-color: ${colors.gray70};\n      border-color: transparent;\n      box-shadow: none;\n      pointer-events: none;\n    `}\n\n  ${({ $error = false }) =>\n    $error &&\n    css`\n      padding-left: ${spacing.xs}px;\n\n      &,\n      &:hover {\n        background-color: ${colors.red50};\n      }\n    `}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,WAAW,EAAEC,QAAQ,EAAEC,kBAAkB,QAAQ,mBAAmB;AAC7E,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,eAAe,gBAAGV,MAAM,CAACW,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6FAE/BT,MAAM,CAACU,KAAK,EAGLN,OAAO,CAACO,EAAE,CAC3B;AAED,OAAO,IAAMC,iBAAiB,gBAAGjB,MAAM,CAACkB,MAAM,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yIAC1CX,iBAAiB,EAGVE,MAAM,CAACU,KAAK,EAGLN,OAAO,CAACO,EAAE,EAGtBR,kBAAkB,CAAC,OAAO,CAAC,CAEhC;AAED,OAAO,IAAMW,WAAW,gBAAGnB,MAAM,CAACW,IAAI,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iCAClCV,mBAAmB,CAAC,MAAM,CAAC,EAE3BE,WAAW,CAGd;AAED,OAAO,IAAMc,YAAY,gBAAGpB,MAAM,CAACE,MAAM,CAAC,CAAAU,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mMAE/BT,MAAM,CAACU,KAAK,EAGRN,OAAO,CAACY,EAAE,EAAQZ,OAAO,CAACY,EAAE,EAKzBhB,MAAM,CAACU,KAAK,EACjBV,MAAM,CAACiB,MAAM,EAKbjB,MAAM,CAACU,KAAK,CAExB;AAED,OAAO,IAAMQ,WAAW,gBAAGvB,MAAM,CAACwB,GAAG,CAAAZ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qRAMfT,MAAM,CAACoB,MAAM,EAGxBpB,MAAM,CAACU,KAAK,EAOVN,OAAO,CAACO,EAAE,EAAMP,OAAO,CAACiB,EAAE,EAIfrB,MAAM,CAACsB,MAAM,EAGjC,UAAAC,IAAA;EAAA,IAAAC,aAAA,GAAAD,IAAA,CAAGE,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,cAAA,GAAAH,IAAA,CAAEI,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;EAAA,OACtCD,QAAQ,IACR7B,GAAG,sCACCM,QAAQ,CAAC,CAAC,EAEQF,MAAM,CAACsB,MAAM,EAE/B,CAACK,SAAS,IACZ/B,GAAG,8CACCmB,YAAY,EACQf,MAAM,CAACU,KAAK,EACvBV,MAAM,CAACsB,MAAM,CAEzB,CACF;AAAA,GAED,UAAAM,KAAA;EAAA,IAAAC,eAAA,GAAAD,KAAA,CAAGD,SAAS;IAATA,SAAS,GAAAE,eAAA,cAAG,KAAK,GAAAA,eAAA;EAAA,OACpBF,SAAS,IACT/B,GAAG,0FACmBI,MAAM,CAAC8B,MAAM,CAIlC;AAAA,GAED,UAAAC,KAAA;EAAA,IAAAC,YAAA,GAAAD,KAAA,CAAGE,MAAM;IAANA,MAAM,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;EAAA,OACjBC,MAAM,IACNrC,GAAG,4DACeQ,OAAO,CAACO,EAAE,EAIJX,MAAM,CAACkC,KAAK,CAEnC;AAAA,EACJ","ignoreList":[]}

package/dist/Token/Token.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.types.js","names":[],"sources":["../../src/Token/Token.types.ts"],"sourcesContent":["export interface TokenProps {\n  /**\n   * Disables the token\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  focused?: boolean\n  /**\n   * When `true`, displays an error icon.\n   * When a `string`, displays an error icon with a tooltip containing the error message.\n   * @since 10.19.0\n   */\n  error?: boolean | string\n  /**\n   * @deprecated\n   *\n   * All variants have been deprecated and will be removed in a future version.\n   * Please use `Token.Remove` component or `disabled` boolean prop instead.\n   *\n   * **Before**\n   *\n   * `<Token variant='icon'>\n   *    <Token.Icon icon=\"x\" />\n   * </Token>`\n   *\n   * **After**\n   *\n   * `<Token>\n   *    <Token.Remove />\n   * </Token>`\n   *\n   * @deprecatedSince 10.27.0\n   */\n  variant?: 'disabled' | 'focused' | 'icon' | 'standard'\n}\n\nexport interface TokenContextApi {\n  labelId: string\n  removeId: string\n  isDisabled: boolean\n}\n"],"mappings":""}
+{"version":3,"file":"Token.types.js","names":[],"sources":["../../src/Token/Token.types.ts"],"sourcesContent":["export interface TokenProps {\n  /**\n   * Disables the token\n   * @since 10.19.0\n   */\n  disabled?: boolean\n  /**\n   * @since 10.19.0\n   */\n  focused?: boolean\n  /**\n   * When `true`, displays an error icon.\n   * When a `string`, displays an error icon with a tooltip containing the error message.\n   * @since 10.19.0\n   */\n  error?: boolean | string\n  /**\n   * @deprecated\n   *\n   * All variants have been deprecated and will be removed in a future version.\n   * Please use `Token.Remove` component or `disabled` boolean prop instead.\n   *\n   * **Before**\n   *\n   * `<Token variant='icon'>\n   *    <Token.Icon icon=\"x\" />\n   * </Token>`\n   *\n   * **After**\n   *\n   * `<Token>\n   *    <Token.Remove />\n   * </Token>`\n   *\n   * @deprecatedSince 10.27.0\n   */\n  variant?: 'disabled' | 'focused' | 'icon' | 'standard'\n}\n\nexport interface TokenContextApi {\n  labelId: string\n  removeId: string\n  isDisabled: boolean\n}\n"],"mappings":"","ignoreList":[]}

package/dist/Token/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Token"],"sources":["../../src/Token/index.ts"],"sourcesContent":["export { Token } from './Token'\nexport type { TokenProps } from './Token.types'\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,SAAS"}
+{"version":3,"file":"index.js","names":["Token"],"sources":["../../src/Token/index.ts"],"sourcesContent":["export { Token } from './Token'\nexport type { TokenProps } from './Token.types'\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,SAAS","ignoreList":[]}

package/dist/ToolHeader/ActionIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIcon.js","names":["React","StyledAnchor","StyledUnstyledButton","Tooltip","ActionIconLink","forwardRef","_ref","ref","label","href","children","props","_objectWithoutProperties","_excluded","createElement","overlay","trigger","_extends","ActionIconButton","_ref2","_excluded2","ActionIconInner","role","ActionIcon"],"sources":["../../src/ToolHeader/ActionIcon.tsx"],"sourcesContent":["import React from 'react'\nimport { StyledAnchor, StyledUnstyledButton } from '../Semantic/Semantic.styles'\nimport { Tooltip } from '../Tooltip/Tooltip'\nimport type {\n  ActionIconPolyType,\n  ActionIconProps,\n  ActionIconRef,\n} from './ActionIcon.types'\n\nconst ActionIconLink = React.forwardRef(function (\n  { 'aria-label': label, href, children, ...props }: ActionIconProps<'link'>,\n  ref: ActionIconRef<'link'>\n) {\n  return (\n    <Tooltip overlay={label} trigger={['hover', 'focus']}>\n      <StyledAnchor aria-label={label} href={href} {...props} ref={ref}>\n        {children}\n      </StyledAnchor>\n    </Tooltip>\n  )\n})\n\nconst ActionIconButton = React.forwardRef(function (\n  { 'aria-label': label, children, ...props }: ActionIconProps<'button'>,\n  ref: ActionIconRef<'button'>\n) {\n  return (\n    <Tooltip overlay={label} trigger={['hover', 'focus']}>\n      <StyledUnstyledButton aria-label={label} {...props} ref={ref}>\n        {children}\n      </StyledUnstyledButton>\n    </Tooltip>\n  )\n})\n\nfunction ActionIconInner<T extends ActionIconPolyType>(\n  props: ActionIconProps<T>,\n  ref: ActionIconRef<T>\n) {\n  if (props.role === 'link' || (props as any as ActionIconProps<'link'>).href) {\n    return (\n      <ActionIconLink\n        {...(props as any as ActionIconProps<'link'>)}\n        ref={ref as ActionIconRef<'link'>}\n      />\n    )\n  }\n\n  if (props.role === 'button') {\n    return (\n      <ActionIconButton\n        {...(props as ActionIconProps<'button'>)}\n        ref={ref as ActionIconRef<'button'>}\n      />\n    )\n  }\n  return (\n    <ActionIconButton\n      {...(props as ActionIconProps<'button'>)}\n      ref={ref as ActionIconRef<'button'>}\n    />\n  )\n}\n\nexport const ActionIcon = React.forwardRef(ActionIconInner) as <\n  Role extends ActionIconPolyType\n>(\n  props: ActionIconProps<Role>\n) => ReturnType<typeof ActionIconInner>\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,oBAAoB,QAAQ,6BAA6B;AAChF,SAASC,OAAO,QAAQ,oBAAoB;AAO5C,IAAMC,cAAc,gBAAGJ,KAAK,CAACK,UAAU,CAAC,UAAAC,IAAA,EAEtCC,GAA0B,EAC1B;EAAA,IAFgBC,KAAK,GAAAF,IAAA,CAAnB,YAAY;IAASG,IAAI,GAAAH,IAAA,CAAJG,IAAI;IAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IAAKC,KAAK,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EAG/C,oBACEb,KAAA,CAAAc,aAAA,CAACX,OAAO;IAACY,OAAO,EAAEP,KAAM;IAACQ,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO;EAAE,gBACnDhB,KAAA,CAAAc,aAAA,CAACb,YAAY,EAAAgB,QAAA;IAAC,cAAYT,KAAM;IAACC,IAAI,EAAEA;EAAK,GAAKE,KAAK;IAAEJ,GAAG,EAAEA;EAAI,IAC9DG,QACW,CACP,CAAC;AAEd,CAAC,CAAC;AAEF,IAAMQ,gBAAgB,gBAAGlB,KAAK,CAACK,UAAU,CAAC,UAAAc,KAAA,EAExCZ,GAA4B,EAC5B;EAAA,IAFgBC,KAAK,GAAAW,KAAA,CAAnB,YAAY;IAAST,QAAQ,GAAAS,KAAA,CAART,QAAQ;IAAKC,KAAK,GAAAC,wBAAA,CAAAO,KAAA,EAAAC,UAAA;EAGzC,oBACEpB,KAAA,CAAAc,aAAA,CAACX,OAAO;IAACY,OAAO,EAAEP,KAAM;IAACQ,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO;EAAE,gBACnDhB,KAAA,CAAAc,aAAA,CAACZ,oBAAoB,EAAAe,QAAA;IAAC,cAAYT;EAAM,GAAKG,KAAK;IAAEJ,GAAG,EAAEA;EAAI,IAC1DG,QACmB,CACf,CAAC;AAEd,CAAC,CAAC;AAEF,SAASW,eAAeA,CACtBV,KAAyB,EACzBJ,GAAqB,EACrB;EACA,IAAII,KAAK,CAACW,IAAI,KAAK,MAAM,IAAKX,KAAK,CAAoCF,IAAI,EAAE;IAC3E,oBACET,KAAA,CAAAc,aAAA,CAACV,cAAc,EAAAa,QAAA,KACRN,KAAK;MACVJ,GAAG,EAAEA;IAA6B,EACnC,CAAC;EAEN;EAEA,IAAII,KAAK,CAACW,IAAI,KAAK,QAAQ,EAAE;IAC3B,oBACEtB,KAAA,CAAAc,aAAA,CAACI,gBAAgB,EAAAD,QAAA,KACVN,KAAK;MACVJ,GAAG,EAAEA;IAA+B,EACrC,CAAC;EAEN;EACA,oBACEP,KAAA,CAAAc,aAAA,CAACI,gBAAgB,EAAAD,QAAA,KACVN,KAAK;IACVJ,GAAG,EAAEA;EAA+B,EACrC,CAAC;AAEN;AAEA,OAAO,IAAMgB,UAAU,gBAAGvB,KAAK,CAACK,UAAU,CAACgB,eAAe,CAInB"}
+{"version":3,"file":"ActionIcon.js","names":["React","StyledAnchor","StyledUnstyledButton","Tooltip","ActionIconLink","forwardRef","_ref","ref","label","href","children","props","_objectWithoutProperties","_excluded","createElement","overlay","trigger","_extends","ActionIconButton","_ref2","_excluded2","ActionIconInner","role","ActionIcon"],"sources":["../../src/ToolHeader/ActionIcon.tsx"],"sourcesContent":["import React from 'react'\nimport { StyledAnchor, StyledUnstyledButton } from '../Semantic/Semantic.styles'\nimport { Tooltip } from '../Tooltip/Tooltip'\nimport type {\n  ActionIconPolyType,\n  ActionIconProps,\n  ActionIconRef,\n} from './ActionIcon.types'\n\nconst ActionIconLink = React.forwardRef(function (\n  { 'aria-label': label, href, children, ...props }: ActionIconProps<'link'>,\n  ref: ActionIconRef<'link'>\n) {\n  return (\n    <Tooltip overlay={label} trigger={['hover', 'focus']}>\n      <StyledAnchor aria-label={label} href={href} {...props} ref={ref}>\n        {children}\n      </StyledAnchor>\n    </Tooltip>\n  )\n})\n\nconst ActionIconButton = React.forwardRef(function (\n  { 'aria-label': label, children, ...props }: ActionIconProps<'button'>,\n  ref: ActionIconRef<'button'>\n) {\n  return (\n    <Tooltip overlay={label} trigger={['hover', 'focus']}>\n      <StyledUnstyledButton aria-label={label} {...props} ref={ref}>\n        {children}\n      </StyledUnstyledButton>\n    </Tooltip>\n  )\n})\n\nfunction ActionIconInner<T extends ActionIconPolyType>(\n  props: ActionIconProps<T>,\n  ref: ActionIconRef<T>\n) {\n  if (props.role === 'link' || (props as any as ActionIconProps<'link'>).href) {\n    return (\n      <ActionIconLink\n        {...(props as any as ActionIconProps<'link'>)}\n        ref={ref as ActionIconRef<'link'>}\n      />\n    )\n  }\n\n  if (props.role === 'button') {\n    return (\n      <ActionIconButton\n        {...(props as ActionIconProps<'button'>)}\n        ref={ref as ActionIconRef<'button'>}\n      />\n    )\n  }\n  return (\n    <ActionIconButton\n      {...(props as ActionIconProps<'button'>)}\n      ref={ref as ActionIconRef<'button'>}\n    />\n  )\n}\n\nexport const ActionIcon = React.forwardRef(ActionIconInner) as <\n  Role extends ActionIconPolyType\n>(\n  props: ActionIconProps<Role>\n) => ReturnType<typeof ActionIconInner>\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,oBAAoB,QAAQ,6BAA6B;AAChF,SAASC,OAAO,QAAQ,oBAAoB;AAO5C,IAAMC,cAAc,gBAAGJ,KAAK,CAACK,UAAU,CAAC,UAAAC,IAAA,EAEtCC,GAA0B,EAC1B;EAAA,IAFgBC,KAAK,GAAAF,IAAA,CAAnB,YAAY;IAASG,IAAI,GAAAH,IAAA,CAAJG,IAAI;IAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IAAKC,KAAK,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EAG/C,oBACEb,KAAA,CAAAc,aAAA,CAACX,OAAO;IAACY,OAAO,EAAEP,KAAM;IAACQ,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO;EAAE,gBACnDhB,KAAA,CAAAc,aAAA,CAACb,YAAY,EAAAgB,QAAA;IAAC,cAAYT,KAAM;IAACC,IAAI,EAAEA;EAAK,GAAKE,KAAK;IAAEJ,GAAG,EAAEA;EAAI,IAC9DG,QACW,CACP,CAAC;AAEd,CAAC,CAAC;AAEF,IAAMQ,gBAAgB,gBAAGlB,KAAK,CAACK,UAAU,CAAC,UAAAc,KAAA,EAExCZ,GAA4B,EAC5B;EAAA,IAFgBC,KAAK,GAAAW,KAAA,CAAnB,YAAY;IAAST,QAAQ,GAAAS,KAAA,CAART,QAAQ;IAAKC,KAAK,GAAAC,wBAAA,CAAAO,KAAA,EAAAC,UAAA;EAGzC,oBACEpB,KAAA,CAAAc,aAAA,CAACX,OAAO;IAACY,OAAO,EAAEP,KAAM;IAACQ,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO;EAAE,gBACnDhB,KAAA,CAAAc,aAAA,CAACZ,oBAAoB,EAAAe,QAAA;IAAC,cAAYT;EAAM,GAAKG,KAAK;IAAEJ,GAAG,EAAEA;EAAI,IAC1DG,QACmB,CACf,CAAC;AAEd,CAAC,CAAC;AAEF,SAASW,eAAeA,CACtBV,KAAyB,EACzBJ,GAAqB,EACrB;EACA,IAAII,KAAK,CAACW,IAAI,KAAK,MAAM,IAAKX,KAAK,CAAoCF,IAAI,EAAE;IAC3E,oBACET,KAAA,CAAAc,aAAA,CAACV,cAAc,EAAAa,QAAA,KACRN,KAAK;MACVJ,GAAG,EAAEA;IAA6B,EACnC,CAAC;EAEN;EAEA,IAAII,KAAK,CAACW,IAAI,KAAK,QAAQ,EAAE;IAC3B,oBACEtB,KAAA,CAAAc,aAAA,CAACI,gBAAgB,EAAAD,QAAA,KACVN,KAAK;MACVJ,GAAG,EAAEA;IAA+B,EACrC,CAAC;EAEN;EACA,oBACEP,KAAA,CAAAc,aAAA,CAACI,gBAAgB,EAAAD,QAAA,KACVN,KAAK;IACVJ,GAAG,EAAEA;EAA+B,EACrC,CAAC;AAEN;AAEA,OAAO,IAAMgB,UAAU,gBAAGvB,KAAK,CAACK,UAAU,CAACgB,eAAe,CAInB","ignoreList":[]}

package/dist/ToolHeader/ActionIcon.types.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 import type { Polymorphic } from '../_utils/polymorphic';
 import type { AriaLabelled } from '../_utils/types';
-export declare type ActionIconPolyType = 'link' | 'button';
+export type ActionIconPolyType = 'link' | 'button';
 export interface ActionIconPolyTagMap extends Record<ActionIconPolyType, React.ElementType> {
     link: 'a';
     button: 'button';
 }
-export declare type ActionIconRef<Role extends ActionIconPolyType> = Polymorphic.Ref<ActionIconPolyTagMap, Role>;
-export declare type ActionIconProps<Role extends ActionIconPolyType> = Role extends 'link' ? Polymorphic.ComponentPropsWithRef<ActionIconPolyTagMap, 'link', 'href' | 'aria-label'> : Role extends 'button' ? AriaLabelled<Polymorphic.ComponentPropsWithRef<ActionIconPolyTagMap, 'button', 'onClick'>> : unknown;
+export type ActionIconRef<Role extends ActionIconPolyType> = Polymorphic.Ref<ActionIconPolyTagMap, Role>;
+export type ActionIconProps<Role extends ActionIconPolyType> = Role extends 'link' ? Polymorphic.ComponentPropsWithRef<ActionIconPolyTagMap, 'link', 'href' | 'aria-label'> : Role extends 'button' ? AriaLabelled<Polymorphic.ComponentPropsWithRef<ActionIconPolyTagMap, 'button', 'onClick'>> : unknown;

package/dist/ToolHeader/ActionIcon.types.example.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIcon.types.example.js","names":["React","ActionIcon","Custom","createElement","href","test","ExpectedToPass","aRef","useRef","buttonRef","Fragment","role","target","ref","onClick","console","log","as","p","expect","toBeDefined"],"sources":["../../src/ToolHeader/ActionIcon.types.example.tsx"],"sourcesContent":["import React from 'react'\nimport { ActionIcon } from './ActionIcon'\n\nfunction Custom() {\n  return <a href=\"/\">Hello</a>\n}\n\ntest('Passing type check', () => {\n  function ExpectedToPass() {\n    const aRef = React.useRef<HTMLAnchorElement>(null)\n    const buttonRef = React.useRef<HTMLButtonElement>(null)\n\n    return (\n      <>\n        {/* Pass */}\n        <ActionIcon role=\"link\" href=\"#\" aria-label=\"ok\" />\n        {/* // See type. Supports proper type as arg props, but TS only knows to require aria-label, not aria-labelledby */}\n        {/* <ActionIcon role=\"link\" href=\"#\" aria-labelledby=\"id\" /> */}\n        <ActionIcon\n          role=\"link\"\n          href=\"#\"\n          aria-label=\"ok\"\n          target=\"ok\"\n          ref={aRef}\n        />\n        <ActionIcon role=\"button\" onClick={console.log} aria-label=\"ok\" />\n        <ActionIcon role=\"button\" onClick={console.log} aria-labelledby=\"id\" />\n        <ActionIcon\n          role=\"button\"\n          onClick={console.log}\n          aria-label=\"id\"\n          // See type. Supports aria-label or aria-labelledby required. But as props are any type\n          as={(p: any) => <button />}\n        />\n        <ActionIcon\n          role=\"button\"\n          onClick={console.log}\n          aria-label=\"ok\"\n          ref={buttonRef}\n        />\n        <ActionIcon\n          as={Custom}\n          role=\"link\"\n          href=\"#\"\n          aria-label=\"ok\"\n          ref={aRef}\n        />\n        <ActionIcon\n          as={(p) => <a />}\n          role=\"link\"\n          href=\"#\"\n          aria-label=\"ok\"\n          ref={aRef}\n        />\n      </>\n    )\n  }\n  // This is a fake test, the real test is the file can be compiled/typechecked\n  expect(ExpectedToPass).toBeDefined()\n})\n\n/* When working with types, uncomment in development to confirm all fail typecheck */\n// function ExpectedToFail() {\n//   const divRef = React.useRef<HTMLDivElement>(null)\n\n//   return (\n//     <>\n//       <ActionIcon />\n//       <ActionIcon role=\"link\" />\n//       <ActionIcon role=\"button\" aria-label=\"wrong\" />\n//       <ActionIcon role=\"link\" aria-label=\"wrong\" href=\"#\" ref={divRef} />\n//       <ActionIcon\n//         ref={divRef}\n//         role=\"button\"\n//         onClick={console.log}\n//         aria-label=\"wrong\"\n//       />\n//     </>\n//   )\n// }\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,cAAc;AAEzC,SAASC,MAAMA,CAAA,EAAG;EAChB,oBAAOF,KAAA,CAAAG,aAAA;IAAGC,IAAI,EAAC;EAAG,GAAC,OAAQ,CAAC;AAC9B;AAEAC,IAAI,CAAC,oBAAoB,EAAE,YAAM;EAC/B,SAASC,cAAcA,CAAA,EAAG;IACxB,IAAMC,IAAI,GAAGP,KAAK,CAACQ,MAAM,CAAoB,IAAI,CAAC;IAClD,IAAMC,SAAS,GAAGT,KAAK,CAACQ,MAAM,CAAoB,IAAI,CAAC;IAEvD,oBACER,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAU,QAAA,qBAEEV,KAAA,CAAAG,aAAA,CAACF,UAAU;MAACU,IAAI,EAAC,MAAM;MAACP,IAAI,EAAC,GAAG;MAAC,cAAW;IAAI,CAAE,CAAC,eAGnDJ,KAAA,CAAAG,aAAA,CAACF,UAAU;MACTU,IAAI,EAAC,MAAM;MACXP,IAAI,EAAC,GAAG;MACR,cAAW,IAAI;MACfQ,MAAM,EAAC,IAAI;MACXC,GAAG,EAAEN;IAAK,CACX,CAAC,eACFP,KAAA,CAAAG,aAAA,CAACF,UAAU;MAACU,IAAI,EAAC,QAAQ;MAACG,OAAO,EAAEC,OAAO,CAACC,GAAI;MAAC,cAAW;IAAI,CAAE,CAAC,eAClEhB,KAAA,CAAAG,aAAA,CAACF,UAAU;MAACU,IAAI,EAAC,QAAQ;MAACG,OAAO,EAAEC,OAAO,CAACC,GAAI;MAAC,mBAAgB;IAAI,CAAE,CAAC,eACvEhB,KAAA,CAAAG,aAAA,CAACF,UAAU;MACTU,IAAI,EAAC,QAAQ;MACbG,OAAO,EAAEC,OAAO,CAACC,GAAI;MACrB,cAAW;MACX;MAAA;MACAC,EAAE,EAAE,SAAJA,EAAEA,CAAGC,CAAM;QAAA,oBAAKlB,KAAA,CAAAG,aAAA,eAAS,CAAC;MAAA;IAAC,CAC5B,CAAC,eACFH,KAAA,CAAAG,aAAA,CAACF,UAAU;MACTU,IAAI,EAAC,QAAQ;MACbG,OAAO,EAAEC,OAAO,CAACC,GAAI;MACrB,cAAW,IAAI;MACfH,GAAG,EAAEJ;IAAU,CAChB,CAAC,eACFT,KAAA,CAAAG,aAAA,CAACF,UAAU;MACTgB,EAAE,EAAEf,MAAO;MACXS,IAAI,EAAC,MAAM;MACXP,IAAI,EAAC,GAAG;MACR,cAAW,IAAI;MACfS,GAAG,EAAEN;IAAK,CACX,CAAC,eACFP,KAAA,CAAAG,aAAA,CAACF,UAAU;MACTgB,EAAE,EAAE,SAAJA,EAAEA,CAAGC,CAAC;QAAA,oBAAKlB,KAAA,CAAAG,aAAA,UAAI,CAAC;MAAA,CAAC;MACjBQ,IAAI,EAAC,MAAM;MACXP,IAAI,EAAC,GAAG;MACR,cAAW,IAAI;MACfS,GAAG,EAAEN;IAAK,CACX,CACD,CAAC;EAEP;EACA;EACAY,MAAM,CAACb,cAAc,CAAC,CAACc,WAAW,CAAC,CAAC;AACtC,CAAC,CAAC;;AAEF;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"file":"ActionIcon.types.example.js","names":["React","ActionIcon","Custom","createElement","href","test","ExpectedToPass","aRef","useRef","buttonRef","Fragment","role","target","ref","onClick","console","log","as","p","expect","toBeDefined"],"sources":["../../src/ToolHeader/ActionIcon.types.example.tsx"],"sourcesContent":["import React from 'react'\nimport { ActionIcon } from './ActionIcon'\n\nfunction Custom() {\n  return <a href=\"/\">Hello</a>\n}\n\ntest('Passing type check', () => {\n  function ExpectedToPass() {\n    const aRef = React.useRef<HTMLAnchorElement>(null)\n    const buttonRef = React.useRef<HTMLButtonElement>(null)\n\n    return (\n      <>\n        {/* Pass */}\n        <ActionIcon role=\"link\" href=\"#\" aria-label=\"ok\" />\n        {/* // See type. Supports proper type as arg props, but TS only knows to require aria-label, not aria-labelledby */}\n        {/* <ActionIcon role=\"link\" href=\"#\" aria-labelledby=\"id\" /> */}\n        <ActionIcon\n          role=\"link\"\n          href=\"#\"\n          aria-label=\"ok\"\n          target=\"ok\"\n          ref={aRef}\n        />\n        <ActionIcon role=\"button\" onClick={console.log} aria-label=\"ok\" />\n        <ActionIcon role=\"button\" onClick={console.log} aria-labelledby=\"id\" />\n        <ActionIcon\n          role=\"button\"\n          onClick={console.log}\n          aria-label=\"id\"\n          // See type. Supports aria-label or aria-labelledby required. But as props are any type\n          as={(p: any) => <button />}\n        />\n        <ActionIcon\n          role=\"button\"\n          onClick={console.log}\n          aria-label=\"ok\"\n          ref={buttonRef}\n        />\n        <ActionIcon\n          as={Custom}\n          role=\"link\"\n          href=\"#\"\n          aria-label=\"ok\"\n          ref={aRef}\n        />\n        <ActionIcon\n          as={(p) => <a />}\n          role=\"link\"\n          href=\"#\"\n          aria-label=\"ok\"\n          ref={aRef}\n        />\n      </>\n    )\n  }\n  // This is a fake test, the real test is the file can be compiled/typechecked\n  expect(ExpectedToPass).toBeDefined()\n})\n\n/* When working with types, uncomment in development to confirm all fail typecheck */\n// function ExpectedToFail() {\n//   const divRef = React.useRef<HTMLDivElement>(null)\n\n//   return (\n//     <>\n//       <ActionIcon />\n//       <ActionIcon role=\"link\" />\n//       <ActionIcon role=\"button\" aria-label=\"wrong\" />\n//       <ActionIcon role=\"link\" aria-label=\"wrong\" href=\"#\" ref={divRef} />\n//       <ActionIcon\n//         ref={divRef}\n//         role=\"button\"\n//         onClick={console.log}\n//         aria-label=\"wrong\"\n//       />\n//     </>\n//   )\n// }\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,cAAc;AAEzC,SAASC,MAAMA,CAAA,EAAG;EAChB,oBAAOF,KAAA,CAAAG,aAAA;IAAGC,IAAI,EAAC;EAAG,GAAC,OAAQ,CAAC;AAC9B;AAEAC,IAAI,CAAC,oBAAoB,EAAE,YAAM;EAC/B,SAASC,cAAcA,CAAA,EAAG;IACxB,IAAMC,IAAI,GAAGP,KAAK,CAACQ,MAAM,CAAoB,IAAI,CAAC;IAClD,IAAMC,SAAS,GAAGT,KAAK,CAACQ,MAAM,CAAoB,IAAI,CAAC;IAEvD,oBACER,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAU,QAAA,qBAEEV,KAAA,CAAAG,aAAA,CAACF,UAAU;MAACU,IAAI,EAAC,MAAM;MAACP,IAAI,EAAC,GAAG;MAAC,cAAW;IAAI,CAAE,CAAC,eAGnDJ,KAAA,CAAAG,aAAA,CAACF,UAAU;MACTU,IAAI,EAAC,MAAM;MACXP,IAAI,EAAC,GAAG;MACR,cAAW,IAAI;MACfQ,MAAM,EAAC,IAAI;MACXC,GAAG,EAAEN;IAAK,CACX,CAAC,eACFP,KAAA,CAAAG,aAAA,CAACF,UAAU;MAACU,IAAI,EAAC,QAAQ;MAACG,OAAO,EAAEC,OAAO,CAACC,GAAI;MAAC,cAAW;IAAI,CAAE,CAAC,eAClEhB,KAAA,CAAAG,aAAA,CAACF,UAAU;MAACU,IAAI,EAAC,QAAQ;MAACG,OAAO,EAAEC,OAAO,CAACC,GAAI;MAAC,mBAAgB;IAAI,CAAE,CAAC,eACvEhB,KAAA,CAAAG,aAAA,CAACF,UAAU;MACTU,IAAI,EAAC,QAAQ;MACbG,OAAO,EAAEC,OAAO,CAACC,GAAI;MACrB,cAAW;MACX;MAAA;MACAC,EAAE,EAAE,SAAJA,EAAEA,CAAGC,CAAM;QAAA,oBAAKlB,KAAA,CAAAG,aAAA,eAAS,CAAC;MAAA;IAAC,CAC5B,CAAC,eACFH,KAAA,CAAAG,aAAA,CAACF,UAAU;MACTU,IAAI,EAAC,QAAQ;MACbG,OAAO,EAAEC,OAAO,CAACC,GAAI;MACrB,cAAW,IAAI;MACfH,GAAG,EAAEJ;IAAU,CAChB,CAAC,eACFT,KAAA,CAAAG,aAAA,CAACF,UAAU;MACTgB,EAAE,EAAEf,MAAO;MACXS,IAAI,EAAC,MAAM;MACXP,IAAI,EAAC,GAAG;MACR,cAAW,IAAI;MACfS,GAAG,EAAEN;IAAK,CACX,CAAC,eACFP,KAAA,CAAAG,aAAA,CAACF,UAAU;MACTgB,EAAE,EAAE,SAAJA,EAAEA,CAAGC,CAAC;QAAA,oBAAKlB,KAAA,CAAAG,aAAA,UAAI,CAAC;MAAA,CAAC;MACjBQ,IAAI,EAAC,MAAM;MACXP,IAAI,EAAC,GAAG;MACR,cAAW,IAAI;MACfS,GAAG,EAAEN;IAAK,CACX,CACD,CAAC;EAEP;EACA;EACAY,MAAM,CAACb,cAAc,CAAC,CAACc,WAAW,CAAC,CAAC;AACtC,CAAC,CAAC;;AAEF;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/dist/ToolHeader/ActionIcon.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIcon.types.js","names":[],"sources":["../../src/ToolHeader/ActionIcon.types.ts"],"sourcesContent":["import type { Polymorphic } from '../_utils/polymorphic'\nimport type { AriaLabelled } from '../_utils/types'\n\nexport type ActionIconPolyType = 'link' | 'button'\n\n/* Mapping our name to the HTML tag */\nexport interface ActionIconPolyTagMap\n  extends Record<ActionIconPolyType, React.ElementType> {\n  link: 'a'\n  button: 'button'\n}\n\nexport type ActionIconRef<Role extends ActionIconPolyType> = Polymorphic.Ref<\n  ActionIconPolyTagMap,\n  Role\n>\n\n/*\nExample showing when link the as props for the component are properly typed,\nbut does not support aria-labelledby in TypeScript. When button, either aria-label\nor aria-labelledby is in TS, but the as props are typed as `any`. TODO rework how make labels required\n*/\nexport type ActionIconProps<Role extends ActionIconPolyType> =\n  Role extends 'link'\n    ? Polymorphic.ComponentPropsWithRef<\n        ActionIconPolyTagMap,\n        'link',\n        'href' | 'aria-label'\n      >\n    : Role extends 'button'\n    ? AriaLabelled<\n        Polymorphic.ComponentPropsWithRef<\n          ActionIconPolyTagMap,\n          'button',\n          'onClick'\n        >\n      >\n    : unknown\n"],"mappings":""}
+{"version":3,"file":"ActionIcon.types.js","names":[],"sources":["../../src/ToolHeader/ActionIcon.types.ts"],"sourcesContent":["import type { Polymorphic } from '../_utils/polymorphic'\nimport type { AriaLabelled } from '../_utils/types'\n\nexport type ActionIconPolyType = 'link' | 'button'\n\n/* Mapping our name to the HTML tag */\nexport interface ActionIconPolyTagMap\n  extends Record<ActionIconPolyType, React.ElementType> {\n  link: 'a'\n  button: 'button'\n}\n\nexport type ActionIconRef<Role extends ActionIconPolyType> = Polymorphic.Ref<\n  ActionIconPolyTagMap,\n  Role\n>\n\n/*\nExample showing when link the as props for the component are properly typed,\nbut does not support aria-labelledby in TypeScript. When button, either aria-label\nor aria-labelledby is in TS, but the as props are typed as `any`. TODO rework how make labels required\n*/\nexport type ActionIconProps<Role extends ActionIconPolyType> =\n  Role extends 'link'\n    ? Polymorphic.ComponentPropsWithRef<\n        ActionIconPolyTagMap,\n        'link',\n        'href' | 'aria-label'\n      >\n    : Role extends 'button'\n    ? AriaLabelled<\n        Polymorphic.ComponentPropsWithRef<\n          ActionIconPolyTagMap,\n          'button',\n          'onClick'\n        >\n      >\n    : unknown\n"],"mappings":"","ignoreList":[]}

package/dist/ToolHeader/ToolHeader.d.ts

@@ -2,11 +2,15 @@ import React from 'react';
 import type { ToolHeaderBadgeProps, ToolHeaderIconProps, ToolHeaderSettingsActionPolyType, ToolHeaderSettingsActionProps, ToolHeaderSettingsActionRef } from './ToolHeader.types';
 export declare const Icon: React.ForwardRefExoticComponent<React.SVGAttributes<SVGElement> & ToolHeaderIconProps & React.RefAttributes<HTMLDivElement>>;
 declare function SettingsActionInner<Role extends ToolHeaderSettingsActionPolyType>(props: ToolHeaderSettingsActionProps<Role>, ref: ToolHeaderSettingsActionRef<Role>): React.JSX.Element;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("../Semantic/Semantic.types").HeadingProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & {
-    ref?: ((instance: HTMLHeadingElement | null) => void) | React.RefObject<HTMLHeadingElement> | null | undefined;
-}, never>> & string & Omit<React.ForwardRefExoticComponent<import("../Semantic/Semantic.types").HeadingProps & React.RefAttributes<HTMLHeadingElement>>, keyof React.Component<any, {}, any>>;
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("../Semantic/Semantic.types").HeadingProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLHeadingElement> | null | undefined;
+}, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string & Omit<React.ForwardRefExoticComponent<import("../Semantic/Semantic.types").HeadingProps & React.RefAttributes<HTMLHeadingElement>>, keyof React.Component<any, {}, any>>;
 export declare const Tabs: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const Actions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Actions: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
 /**
  * @deprecated Header-adjacent counts and labels should use inline `Pill` instead of `ToolHeader.Badge`.
  *
@@ -57,11 +61,15 @@ export declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes
  */
 export declare const ToolHeader: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Icon: React.ForwardRefExoticComponent<React.SVGAttributes<SVGElement> & ToolHeaderIconProps & React.RefAttributes<HTMLDivElement>>;
-    Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("../Semantic/Semantic.types").HeadingProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & {
-        ref?: ((instance: HTMLHeadingElement | null) => void) | React.RefObject<HTMLHeadingElement> | null | undefined;
-    }, never>> & string & Omit<React.ForwardRefExoticComponent<import("../Semantic/Semantic.types").HeadingProps & React.RefAttributes<HTMLHeadingElement>>, keyof React.Component<any, {}, any>>;
+    Title: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("../Semantic/Semantic.types").HeadingProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & {
+        ref?: ((instance: HTMLHeadingElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLHeadingElement> | null | undefined;
+    }, "style"> & {
+        style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+    }> & string & Omit<React.ForwardRefExoticComponent<import("../Semantic/Semantic.types").HeadingProps & React.RefAttributes<HTMLHeadingElement>>, keyof React.Component<any, {}, any>>;
     Tabs: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-    Actions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    Actions: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+        style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+    }> & string;
     Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & ToolHeaderBadgeProps & React.RefAttributes<HTMLDivElement>>;
     SettingsAction: <Role extends ToolHeaderSettingsActionPolyType>(props: ToolHeaderSettingsActionProps<Role>) => ReturnType<typeof SettingsActionInner>;
 };

package/dist/ToolHeader/ToolHeader.js

@@ -26,9 +26,9 @@ export var Icon = /*#__PURE__*/React.forwardRef(function Icon(_ref, ref) {
   var className = _ref.className,
     icon_ = _ref.icon,
     props = _objectWithoutProperties(_ref, _excluded);
-  var icon = icon_ ? /*#__PURE__*/React.cloneElement(icon_, _objectSpread(_objectSpread({}, props), {}, {
+  var icon = icon_ ? (/*#__PURE__*/React.cloneElement(icon_, _objectSpread(_objectSpread({}, props), {}, {
     size: 'sm'
-  })) : /*#__PURE__*/React.createElement(Cog, _extends({}, props, {
+  }))) : /*#__PURE__*/React.createElement(Cog, _extends({}, props, {
     size: "sm"
   }));
   return /*#__PURE__*/React.createElement(StyledToolHeaderIconContainer, {

package/dist/ToolHeader/ToolHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolHeader.js","names":["Cog","React","Tabs","TabsBase","useI18nContext","addSubcomponents","ActionIcon","StyledHeaderActions","StyledHeaderBadge","StyledHeaderTabs","StyledToolHeader","StyledToolHeaderIconContainer","StyledToolHeaderTitle","ToolHeader_","forwardRef","props","ref","createElement","_extends","Icon","_ref","className","icon_","icon","_objectWithoutProperties","_excluded","cloneElement","_objectSpread","size","SettingsActionInner","i18n","Comp","t","ToolHeader","SettingsAction","Title","_ref2","children","_excluded2","role","Actions","Badge","_ref3","variant","_excluded3","$variant","displayName"],"sources":["../../src/ToolHeader/ToolHeader.tsx"],"sourcesContent":["import { Cog } from '@procore/core-icons'\nimport React from 'react'\nimport { Tabs as TabsBase } from '../Tabs/Tabs'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { ActionIcon } from './ActionIcon'\nimport {\n  StyledHeaderActions,\n  StyledHeaderBadge,\n  StyledHeaderTabs,\n  StyledToolHeader,\n  StyledToolHeaderIconContainer,\n  StyledToolHeaderTitle,\n} from './ToolHeader.styles'\nimport type {\n  ToolHeaderBadgeProps,\n  ToolHeaderIconProps,\n  ToolHeaderSettingsActionPolyType,\n  ToolHeaderSettingsActionProps,\n  ToolHeaderSettingsActionRef,\n} from './ToolHeader.types'\n\nconst ToolHeader_ = React.forwardRef<HTMLDivElement, any>((props, ref) => {\n  return <StyledToolHeader ref={ref} {...props} />\n})\n\nexport const Icon = React.forwardRef<\n  HTMLDivElement,\n  React.SVGAttributes<SVGElement> & ToolHeaderIconProps\n>(function Icon({ className, icon: icon_, ...props }, ref) {\n  const icon = icon_ ? (\n    React.cloneElement(icon_ as React.ReactElement, { ...props, size: 'sm' })\n  ) : (\n    <Cog {...props} size=\"sm\" />\n  )\n  return (\n    <StyledToolHeaderIconContainer className={className} ref={ref}>\n      {icon}\n    </StyledToolHeaderIconContainer>\n  )\n})\n\nfunction SettingsActionInner<Role extends ToolHeaderSettingsActionPolyType>(\n  props: ToolHeaderSettingsActionProps<Role>,\n  ref: ToolHeaderSettingsActionRef<Role>\n) {\n  const i18n = useI18nContext()\n\n  const Comp = ActionIcon as any\n\n  return (\n    <Comp\n      aria-label={i18n.t('core.toolHeader.settingsAction')}\n      ref={ref}\n      {...props}\n    >\n      <ToolHeader.Icon />\n    </Comp>\n  )\n}\n\nconst SettingsAction = React.forwardRef(SettingsActionInner) as <\n  Role extends ToolHeaderSettingsActionPolyType\n>(\n  props: ToolHeaderSettingsActionProps<Role>\n) => ReturnType<typeof SettingsActionInner>\n\nexport const Title = StyledToolHeaderTitle\n\nexport const Tabs = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(function Tabs({ children, className, ...props }, ref) {\n  return (\n    <StyledHeaderTabs className={className} ref={ref}>\n      <TabsBase {...props} role={props.role as 'navigation'}>\n        {children}\n      </TabsBase>\n    </StyledHeaderTabs>\n  )\n})\n\nexport const Actions = StyledHeaderActions\n\n/**\n * @deprecated Header-adjacent counts and labels should use inline `Pill` instead of `ToolHeader.Badge`.\n *\n * BEFORE\n * ```tsx\n * <ToolHeader.Badge variant=\"new\">New</ToolHeader.Badge>\n * ```\n *\n * AFTER\n * ```tsx\n * <Pill color=\"magenta\">New</Pill>\n * ```\n *\n * @deprecatedSince 10.20.0\n *\n * @see https://core.procore.com/latest/web/components/pill/react/\n */\nexport const Badge = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & ToolHeaderBadgeProps\n>(function Badge({ children, variant, ...props }, ref) {\n  return (\n    <StyledHeaderBadge {...props} $variant={variant} ref={ref}>\n      {children}\n    </StyledHeaderBadge>\n  )\n})\n\nToolHeader_.displayName = 'ToolHeader'\n\nIcon.displayName = 'ToolHeader.Icon'\n\nTitle.displayName = 'ToolHeader.Title'\n\nTabs.displayName = 'ToolHeader.Tabs'\n\nActions.displayName = 'ToolHeader.Actions'\n\nBadge.displayName = 'ToolHeader.Badge'\n\n/**\n * @deprecated Use `ToolLandingPage` (with `ToolLandingPage.Title`, `ToolLandingPage.Tabs`, and related slots) for tool headers; use `DetailPage` when the screen is a record detail layout.\n *\n * BEFORE\n * ```tsx\n * <ToolHeader>\n *   <ToolHeader.Icon />\n *   <ToolHeader.Title>Tools</ToolHeader.Title>\n *   <ToolHeader.Tabs>...</ToolHeader.Tabs>\n *   <ToolHeader.Actions>...</ToolHeader.Actions>\n * </ToolHeader>\n * ```\n *\n * AFTER\n * ```tsx\n * <ToolLandingPage>\n *   <ToolLandingPage.Main>\n *     <ToolLandingPage.Header>\n *       <ToolLandingPage.Title>...</ToolLandingPage.Title>\n *       <ToolLandingPage.Tabs>...</ToolLandingPage.Tabs>\n *     </ToolLandingPage.Header>\n *     <ToolLandingPage.Body>...</ToolLandingPage.Body>\n *   </ToolLandingPage.Main>\n * </ToolLandingPage>\n * ```\n *\n * @deprecatedSince 12.9.0\n *\n * @see https://stories.core.procore.com/?path=/story/core-react_demos-toollandingpage--demo\n */\nexport const ToolHeader = addSubcomponents(\n  {\n    Icon,\n    Title,\n    Tabs,\n    Actions,\n    Badge,\n    SettingsAction,\n  },\n  ToolHeader_\n)\n"],"mappings":"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"}
+{"version":3,"file":"ToolHeader.js","names":["Cog","React","Tabs","TabsBase","useI18nContext","addSubcomponents","ActionIcon","StyledHeaderActions","StyledHeaderBadge","StyledHeaderTabs","StyledToolHeader","StyledToolHeaderIconContainer","StyledToolHeaderTitle","ToolHeader_","forwardRef","props","ref","createElement","_extends","Icon","_ref","className","icon_","icon","_objectWithoutProperties","_excluded","cloneElement","_objectSpread","size","SettingsActionInner","i18n","Comp","t","ToolHeader","SettingsAction","Title","_ref2","children","_excluded2","role","Actions","Badge","_ref3","variant","_excluded3","$variant","displayName"],"sources":["../../src/ToolHeader/ToolHeader.tsx"],"sourcesContent":["import { Cog } from '@procore/core-icons'\nimport React from 'react'\nimport { Tabs as TabsBase } from '../Tabs/Tabs'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { ActionIcon } from './ActionIcon'\nimport {\n  StyledHeaderActions,\n  StyledHeaderBadge,\n  StyledHeaderTabs,\n  StyledToolHeader,\n  StyledToolHeaderIconContainer,\n  StyledToolHeaderTitle,\n} from './ToolHeader.styles'\nimport type {\n  ToolHeaderBadgeProps,\n  ToolHeaderIconProps,\n  ToolHeaderSettingsActionPolyType,\n  ToolHeaderSettingsActionProps,\n  ToolHeaderSettingsActionRef,\n} from './ToolHeader.types'\n\nconst ToolHeader_ = React.forwardRef<HTMLDivElement, any>((props, ref) => {\n  return <StyledToolHeader ref={ref} {...props} />\n})\n\nexport const Icon = React.forwardRef<\n  HTMLDivElement,\n  React.SVGAttributes<SVGElement> & ToolHeaderIconProps\n>(function Icon({ className, icon: icon_, ...props }, ref) {\n  const icon = icon_ ? (\n    React.cloneElement(icon_ as React.ReactElement, { ...props, size: 'sm' })\n  ) : (\n    <Cog {...props} size=\"sm\" />\n  )\n  return (\n    <StyledToolHeaderIconContainer className={className} ref={ref}>\n      {icon}\n    </StyledToolHeaderIconContainer>\n  )\n})\n\nfunction SettingsActionInner<Role extends ToolHeaderSettingsActionPolyType>(\n  props: ToolHeaderSettingsActionProps<Role>,\n  ref: ToolHeaderSettingsActionRef<Role>\n) {\n  const i18n = useI18nContext()\n\n  const Comp = ActionIcon as any\n\n  return (\n    <Comp\n      aria-label={i18n.t('core.toolHeader.settingsAction')}\n      ref={ref}\n      {...props}\n    >\n      <ToolHeader.Icon />\n    </Comp>\n  )\n}\n\nconst SettingsAction = React.forwardRef(SettingsActionInner) as <\n  Role extends ToolHeaderSettingsActionPolyType\n>(\n  props: ToolHeaderSettingsActionProps<Role>\n) => ReturnType<typeof SettingsActionInner>\n\nexport const Title = StyledToolHeaderTitle\n\nexport const Tabs = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(function Tabs({ children, className, ...props }, ref) {\n  return (\n    <StyledHeaderTabs className={className} ref={ref}>\n      <TabsBase {...props} role={props.role as 'navigation'}>\n        {children}\n      </TabsBase>\n    </StyledHeaderTabs>\n  )\n})\n\nexport const Actions = StyledHeaderActions\n\n/**\n * @deprecated Header-adjacent counts and labels should use inline `Pill` instead of `ToolHeader.Badge`.\n *\n * BEFORE\n * ```tsx\n * <ToolHeader.Badge variant=\"new\">New</ToolHeader.Badge>\n * ```\n *\n * AFTER\n * ```tsx\n * <Pill color=\"magenta\">New</Pill>\n * ```\n *\n * @deprecatedSince 10.20.0\n *\n * @see https://core.procore.com/latest/web/components/pill/react/\n */\nexport const Badge = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & ToolHeaderBadgeProps\n>(function Badge({ children, variant, ...props }, ref) {\n  return (\n    <StyledHeaderBadge {...props} $variant={variant} ref={ref}>\n      {children}\n    </StyledHeaderBadge>\n  )\n})\n\nToolHeader_.displayName = 'ToolHeader'\n\nIcon.displayName = 'ToolHeader.Icon'\n\nTitle.displayName = 'ToolHeader.Title'\n\nTabs.displayName = 'ToolHeader.Tabs'\n\nActions.displayName = 'ToolHeader.Actions'\n\nBadge.displayName = 'ToolHeader.Badge'\n\n/**\n * @deprecated Use `ToolLandingPage` (with `ToolLandingPage.Title`, `ToolLandingPage.Tabs`, and related slots) for tool headers; use `DetailPage` when the screen is a record detail layout.\n *\n * BEFORE\n * ```tsx\n * <ToolHeader>\n *   <ToolHeader.Icon />\n *   <ToolHeader.Title>Tools</ToolHeader.Title>\n *   <ToolHeader.Tabs>...</ToolHeader.Tabs>\n *   <ToolHeader.Actions>...</ToolHeader.Actions>\n * </ToolHeader>\n * ```\n *\n * AFTER\n * ```tsx\n * <ToolLandingPage>\n *   <ToolLandingPage.Main>\n *     <ToolLandingPage.Header>\n *       <ToolLandingPage.Title>...</ToolLandingPage.Title>\n *       <ToolLandingPage.Tabs>...</ToolLandingPage.Tabs>\n *     </ToolLandingPage.Header>\n *     <ToolLandingPage.Body>...</ToolLandingPage.Body>\n *   </ToolLandingPage.Main>\n * </ToolLandingPage>\n * ```\n *\n * @deprecatedSince 12.9.0\n *\n * @see https://stories.core.procore.com/?path=/story/core-react_demos-toollandingpage--demo\n */\nexport const ToolHeader = addSubcomponents(\n  {\n    Icon,\n    Title,\n    Tabs,\n    Actions,\n    Badge,\n    SettingsAction,\n  },\n  ToolHeader_\n)\n"],"mappings":"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","ignoreList":[]}

package/dist/ToolHeader/ToolHeader.styles.d.ts

@@ -1,12 +1,23 @@
-/// <reference types="react" />
 import type { ToolHeaderBadgeVariant } from './ToolHeader.types';
-export declare const StyledHeaderBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledHeaderBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $variant: ToolHeaderBadgeVariant;
 }>> & string;
-export declare const StyledToolHeaderIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledHeaderTabs: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledHeaderActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledToolHeaderTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("../Semantic/Semantic.types").HeadingProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & {
-    ref?: ((instance: HTMLHeadingElement | null) => void) | import("react").RefObject<HTMLHeadingElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("../Semantic/Semantic.types").HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const StyledToolHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledToolHeaderIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledHeaderTabs: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledHeaderActions: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledToolHeaderTitle: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("../Semantic/Semantic.types").HeadingProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement> | null | undefined;
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string & Omit<import("react").ForwardRefExoticComponent<import("../Semantic/Semantic.types").HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledToolHeader: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;

package/dist/ToolHeader/ToolHeader.styles.js

@@ -5,7 +5,7 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledHeaderBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderBadge",
-  componentId: "core-12_53_0__sc-1jpjx47-0"
+  componentId: "core-12_53_2__sc-1jpjx47-0"
 })(["", " border-radius:10px;border-style:solid;border-width:1px;display:inline-block;margin-bottom:", "px;padding:1px ", "px;", ""], getTypographyIntent('small'), spacing.sm, spacing.sm, function (_ref) {
   var $variant = _ref.$variant;
   if ($variant) {
@@ -18,22 +18,22 @@ export var StyledHeaderBadge = /*#__PURE__*/styled.div.withConfig({
 // TODO in v12 remove cursor: pointer;
 export var StyledToolHeaderIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolHeaderIconContainer",
-  componentId: "core-12_53_0__sc-1jpjx47-1"
+  componentId: "core-12_53_2__sc-1jpjx47-1"
 })(["color:", ";cursor:pointer;display:inline-flex;flex:0 0 auto;"], colors.orange50);
 export var StyledHeaderTabs = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderTabs",
-  componentId: "core-12_53_0__sc-1jpjx47-2"
+  componentId: "core-12_53_2__sc-1jpjx47-2"
 })(["align-self:flex-end;flex:1 1 auto;min-width:100px;overflow:hidden;"]);
 export var StyledHeaderActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledHeaderActions",
-  componentId: "core-12_53_0__sc-1jpjx47-3"
+  componentId: "core-12_53_2__sc-1jpjx47-3"
 })(["flex:0 0 auto;margin-left:auto;padding-left:", "px;"], spacing.lg);
 export var StyledToolHeaderTitle = /*#__PURE__*/styled(H1).withConfig({
   displayName: "StyledToolHeaderTitle",
-  componentId: "core-12_53_0__sc-1jpjx47-4"
+  componentId: "core-12_53_2__sc-1jpjx47-4"
 })(["margin-right:", "px;white-space:nowrap;"], spacing.xl);
 export var StyledToolHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolHeader",
-  componentId: "core-12_53_0__sc-1jpjx47-5"
+  componentId: "core-12_53_2__sc-1jpjx47-5"
 })(["align-items:center;display:flex;min-height:36px;width:100%;", " + ", ",a + ", ",button + ", "{margin-left:", "px;}"], StyledToolHeaderIconContainer, StyledToolHeaderTitle, StyledToolHeaderTitle, StyledToolHeaderTitle, spacing.lg);
 //# sourceMappingURL=ToolHeader.styles.js.map

package/dist/ToolHeader/ToolHeader.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolHeader.styles.js","names":["styled","css","H1","getTypographyIntent","colors","spacing","StyledHeaderBadge","div","withConfig","displayName","componentId","sm","_ref","$variant","purple50","white","StyledToolHeaderIconContainer","orange50","StyledHeaderTabs","StyledHeaderActions","lg","StyledToolHeaderTitle","xl","StyledToolHeader"],"sources":["../../src/ToolHeader/ToolHeader.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { H1 } from '../Semantic'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\nimport type { ToolHeaderBadgeVariant } from './ToolHeader.types'\n\nexport const StyledHeaderBadge = styled.div<{\n  $variant: ToolHeaderBadgeVariant\n}>`\n  ${getTypographyIntent('small')}\n  border-radius: 10px;\n  border-style: solid;\n  border-width: 1px;\n  display: inline-block;\n  margin-bottom: ${spacing.sm}px;\n  padding: 1px ${spacing.sm}px;\n\n  ${({ $variant }) => {\n    if ($variant) {\n      if ($variant === 'trial') {\n        return css`\n          background-color: ${colors.purple50};\n          border-color: ${colors.purple50};\n          color: ${colors.white};\n        `\n      }\n    }\n  }}\n`\n\n// TODO in v12 remove cursor: pointer;\nexport const StyledToolHeaderIconContainer = styled.div`\n  color: ${colors.orange50};\n  cursor: pointer;\n  display: inline-flex;\n  flex: 0 0 auto;\n`\n\nexport const StyledHeaderTabs = styled.div`\n  align-self: flex-end;\n  flex: 1 1 auto;\n  min-width: 100px;\n  overflow: hidden;\n`\n\nexport const StyledHeaderActions = styled.div`\n  flex: 0 0 auto;\n  margin-left: auto;\n  padding-left: ${spacing.lg}px;\n`\n\nexport const StyledToolHeaderTitle = styled(H1)`\n  margin-right: ${spacing.xl}px;\n  white-space: nowrap;\n`\n\nexport const StyledToolHeader = styled.div`\n  align-items: center;\n  display: flex;\n  min-height: 36px;\n  width: 100%;\n\n  ${StyledToolHeaderIconContainer} + ${StyledToolHeaderTitle},\n  a + ${StyledToolHeaderTitle}, button + ${StyledToolHeaderTitle} {\n    margin-left: ${spacing.lg}px;\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,EAAE,QAAQ,aAAa;AAChC,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,OAAO,IAAMC,iBAAiB,gBAAGN,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sIAGvCP,mBAAmB,CAAC,OAAO,CAAC,EAKbE,OAAO,CAACM,EAAE,EACZN,OAAO,CAACM,EAAE,EAEvB,UAAAC,IAAA,EAAkB;EAAA,IAAfC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EACX,IAAIA,QAAQ,EAAE;IACZ,IAAIA,QAAQ,KAAK,OAAO,EAAE;MACxB,OAAOZ,GAAG,0DACYG,MAAM,CAACU,QAAQ,EACnBV,MAAM,CAACU,QAAQ,EACtBV,MAAM,CAACW,KAAK;IAEzB;EACF;AACF,CAAC,CACF;;AAED;AACA,OAAO,IAAMC,6BAA6B,gBAAGhB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qEAC5CN,MAAM,CAACa,QAAQ,CAIzB;AAED,OAAO,IAAMC,gBAAgB,gBAAGlB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0EAKzC;AAED,OAAO,IAAMS,mBAAmB,gBAAGnB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4DAG3BL,OAAO,CAACe,EAAE,CAC3B;AAED,OAAO,IAAMC,qBAAqB,gBAAGrB,MAAM,CAACE,EAAE,CAAC,CAAAM,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gDAC7BL,OAAO,CAACiB,EAAE,CAE3B;AAED,OAAO,IAAMC,gBAAgB,gBAAGvB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2HAMtCM,6BAA6B,EAAMK,qBAAqB,EACpDA,qBAAqB,EAAcA,qBAAqB,EAC7ChB,OAAO,CAACe,EAAE,CAE5B"}
+{"version":3,"file":"ToolHeader.styles.js","names":["styled","css","H1","getTypographyIntent","colors","spacing","StyledHeaderBadge","div","withConfig","displayName","componentId","sm","_ref","$variant","purple50","white","StyledToolHeaderIconContainer","orange50","StyledHeaderTabs","StyledHeaderActions","lg","StyledToolHeaderTitle","xl","StyledToolHeader"],"sources":["../../src/ToolHeader/ToolHeader.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { H1 } from '../Semantic'\nimport { getTypographyIntent } from '../Typography'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\nimport type { ToolHeaderBadgeVariant } from './ToolHeader.types'\n\nexport const StyledHeaderBadge = styled.div<{\n  $variant: ToolHeaderBadgeVariant\n}>`\n  ${getTypographyIntent('small')}\n  border-radius: 10px;\n  border-style: solid;\n  border-width: 1px;\n  display: inline-block;\n  margin-bottom: ${spacing.sm}px;\n  padding: 1px ${spacing.sm}px;\n\n  ${({ $variant }) => {\n    if ($variant) {\n      if ($variant === 'trial') {\n        return css`\n          background-color: ${colors.purple50};\n          border-color: ${colors.purple50};\n          color: ${colors.white};\n        `\n      }\n    }\n  }}\n`\n\n// TODO in v12 remove cursor: pointer;\nexport const StyledToolHeaderIconContainer = styled.div`\n  color: ${colors.orange50};\n  cursor: pointer;\n  display: inline-flex;\n  flex: 0 0 auto;\n`\n\nexport const StyledHeaderTabs = styled.div`\n  align-self: flex-end;\n  flex: 1 1 auto;\n  min-width: 100px;\n  overflow: hidden;\n`\n\nexport const StyledHeaderActions = styled.div`\n  flex: 0 0 auto;\n  margin-left: auto;\n  padding-left: ${spacing.lg}px;\n`\n\nexport const StyledToolHeaderTitle = styled(H1)`\n  margin-right: ${spacing.xl}px;\n  white-space: nowrap;\n`\n\nexport const StyledToolHeader = styled.div`\n  align-items: center;\n  display: flex;\n  min-height: 36px;\n  width: 100%;\n\n  ${StyledToolHeaderIconContainer} + ${StyledToolHeaderTitle},\n  a + ${StyledToolHeaderTitle}, button + ${StyledToolHeaderTitle} {\n    margin-left: ${spacing.lg}px;\n  }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,EAAE,QAAQ,aAAa;AAChC,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAG5C,OAAO,IAAMC,iBAAiB,gBAAGN,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sIAGvCP,mBAAmB,CAAC,OAAO,CAAC,EAKbE,OAAO,CAACM,EAAE,EACZN,OAAO,CAACM,EAAE,EAEvB,UAAAC,IAAA,EAAkB;EAAA,IAAfC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EACX,IAAIA,QAAQ,EAAE;IACZ,IAAIA,QAAQ,KAAK,OAAO,EAAE;MACxB,OAAOZ,GAAG,0DACYG,MAAM,CAACU,QAAQ,EACnBV,MAAM,CAACU,QAAQ,EACtBV,MAAM,CAACW,KAAK;IAEzB;EACF;AACF,CAAC,CACF;;AAED;AACA,OAAO,IAAMC,6BAA6B,gBAAGhB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qEAC5CN,MAAM,CAACa,QAAQ,CAIzB;AAED,OAAO,IAAMC,gBAAgB,gBAAGlB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0EAKzC;AAED,OAAO,IAAMS,mBAAmB,gBAAGnB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4DAG3BL,OAAO,CAACe,EAAE,CAC3B;AAED,OAAO,IAAMC,qBAAqB,gBAAGrB,MAAM,CAACE,EAAE,CAAC,CAAAM,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gDAC7BL,OAAO,CAACiB,EAAE,CAE3B;AAED,OAAO,IAAMC,gBAAgB,gBAAGvB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2HAMtCM,6BAA6B,EAAMK,qBAAqB,EACpDA,qBAAqB,EAAcA,qBAAqB,EAC7ChB,OAAO,CAACe,EAAE,CAE5B","ignoreList":[]}

package/dist/ToolHeader/ToolHeader.types.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import type { Polymorphic } from '../_utils/polymorphic';
 import type { Props } from '../_utils/types';
-export declare type ToolHeaderBadgeVariant = 'beta' | 'new' | 'trial';
+export type ToolHeaderBadgeVariant = 'beta' | 'new' | 'trial';
 export interface ToolHeaderBadgeProps extends Props {
     /**
      * Controls the background/border/text colors of the Badge's pill
@@ -15,13 +14,13 @@ export interface ToolHeaderIconProps extends Props {
      */
     icon?: React.ReactNode;
 }
-export declare type ToolHeaderSettingsActionPolyType = 'link' | 'button';
+export type ToolHeaderSettingsActionPolyType = 'link' | 'button';
 export interface ToolHeaderSettingsActionPolyTagMap extends Record<ToolHeaderSettingsActionPolyType, React.ElementType> {
     link: 'a';
     button: 'button';
 }
-export declare type ToolHeaderSettingsActionRef<Role extends ToolHeaderSettingsActionPolyType> = Polymorphic.Ref<ToolHeaderSettingsActionPolyTagMap, Role>;
-export declare type ToolHeaderSettingsActionProps<Role extends ToolHeaderSettingsActionPolyType> = Role extends 'link' ? Polymorphic.ComponentPropsWithRef<ToolHeaderSettingsActionPolyTagMap, 'link', 'href', {
+export type ToolHeaderSettingsActionRef<Role extends ToolHeaderSettingsActionPolyType> = Polymorphic.Ref<ToolHeaderSettingsActionPolyTagMap, Role>;
+export type ToolHeaderSettingsActionProps<Role extends ToolHeaderSettingsActionPolyType> = Role extends 'link' ? Polymorphic.ComponentPropsWithRef<ToolHeaderSettingsActionPolyTagMap, 'link', 'href', {
     'aria-label'?: string;
 }> : Role extends 'button' ? Polymorphic.ComponentPropsWithRef<ToolHeaderSettingsActionPolyTagMap, 'button', 'onClick', {
     'aria-label'?: string;

package/dist/ToolHeader/ToolHeader.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolHeader.types.js","names":[],"sources":["../../src/ToolHeader/ToolHeader.types.ts"],"sourcesContent":["import type { Polymorphic } from '../_utils/polymorphic'\nimport type { Props } from '../_utils/types'\n\nexport type ToolHeaderBadgeVariant = 'beta' | 'new' | 'trial'\n\nexport interface ToolHeaderBadgeProps extends Props {\n  /**\n   * Controls the background/border/text colors of the Badge's pill\n   * @since 10.19.0\n   */\n  variant: ToolHeaderBadgeVariant\n}\n\nexport interface ToolHeaderIconProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  icon?: React.ReactNode\n}\n\nexport type ToolHeaderSettingsActionPolyType = 'link' | 'button'\n\n/* Mapping our name to the HTML tag */\nexport interface ToolHeaderSettingsActionPolyTagMap\n  extends Record<ToolHeaderSettingsActionPolyType, React.ElementType> {\n  link: 'a'\n  button: 'button'\n}\n\nexport type ToolHeaderSettingsActionRef<\n  Role extends ToolHeaderSettingsActionPolyType\n> = Polymorphic.Ref<ToolHeaderSettingsActionPolyTagMap, Role>\n\nexport type ToolHeaderSettingsActionProps<\n  Role extends ToolHeaderSettingsActionPolyType\n> = Role extends 'link'\n  ? Polymorphic.ComponentPropsWithRef<\n      ToolHeaderSettingsActionPolyTagMap,\n      'link',\n      'href',\n      { 'aria-label'?: string }\n    >\n  : Role extends 'button'\n  ? Polymorphic.ComponentPropsWithRef<\n      ToolHeaderSettingsActionPolyTagMap,\n      'button',\n      'onClick',\n      { 'aria-label'?: string }\n    >\n  : unknown\n"],"mappings":""}
+{"version":3,"file":"ToolHeader.types.js","names":[],"sources":["../../src/ToolHeader/ToolHeader.types.ts"],"sourcesContent":["import type { Polymorphic } from '../_utils/polymorphic'\nimport type { Props } from '../_utils/types'\n\nexport type ToolHeaderBadgeVariant = 'beta' | 'new' | 'trial'\n\nexport interface ToolHeaderBadgeProps extends Props {\n  /**\n   * Controls the background/border/text colors of the Badge's pill\n   * @since 10.19.0\n   */\n  variant: ToolHeaderBadgeVariant\n}\n\nexport interface ToolHeaderIconProps extends Props {\n  /**\n   * @since 10.19.0\n   */\n  icon?: React.ReactNode\n}\n\nexport type ToolHeaderSettingsActionPolyType = 'link' | 'button'\n\n/* Mapping our name to the HTML tag */\nexport interface ToolHeaderSettingsActionPolyTagMap\n  extends Record<ToolHeaderSettingsActionPolyType, React.ElementType> {\n  link: 'a'\n  button: 'button'\n}\n\nexport type ToolHeaderSettingsActionRef<\n  Role extends ToolHeaderSettingsActionPolyType\n> = Polymorphic.Ref<ToolHeaderSettingsActionPolyTagMap, Role>\n\nexport type ToolHeaderSettingsActionProps<\n  Role extends ToolHeaderSettingsActionPolyType\n> = Role extends 'link'\n  ? Polymorphic.ComponentPropsWithRef<\n      ToolHeaderSettingsActionPolyTagMap,\n      'link',\n      'href',\n      { 'aria-label'?: string }\n    >\n  : Role extends 'button'\n  ? Polymorphic.ComponentPropsWithRef<\n      ToolHeaderSettingsActionPolyTagMap,\n      'button',\n      'onClick',\n      { 'aria-label'?: string }\n    >\n  : unknown\n"],"mappings":"","ignoreList":[]}

package/dist/ToolHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ToolHeader"],"sources":["../../src/ToolHeader/index.ts"],"sourcesContent":["export { ToolHeader } from './ToolHeader'\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc"}
+{"version":3,"file":"index.js","names":["ToolHeader"],"sources":["../../src/ToolHeader/index.ts"],"sourcesContent":["export { ToolHeader } from './ToolHeader'\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc","ignoreList":[]}