@hitachivantara/uikit-react-core 5.41.1 → 5.42.1

package/dist/esm/Table/renderers/SwitchColumnCell/SwitchColumnCell.styles.mjs

@@ -0,0 +1,22 @@
+import { createClasses } from "../../../utils/classes.mjs";
+const switchStyle = {
+  cursor: "pointer",
+  display: "inline-flex",
+  marginLeft: "10px"
+};
+const { staticClasses, useClasses } = createClasses(
+  "HvTable-SwitchColumnCell",
+  {
+    switchNo: {
+      ...switchStyle
+    },
+    switchYes: {
+      ...switchStyle
+    }
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=SwitchColumnCell.styles.mjs.map

package/dist/esm/Table/renderers/SwitchColumnCell/SwitchColumnCell.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchColumnCell.styles.mjs","sources":["../../../../../src/Table/renderers/SwitchColumnCell/SwitchColumnCell.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../../utils/classes\";\n\nconst switchStyle = {\n  cursor: \"pointer\",\n  display: \"inline-flex\",\n  marginLeft: \"10px\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvTable-SwitchColumnCell\",\n  {\n    switchNo: {\n      ...switchStyle,\n    },\n    switchYes: {\n      ...switchStyle,\n    },\n  }\n);\n"],"names":[],"mappings":";AAEA,MAAM,cAAc;AAAA,EAClB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AACd;AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,EACF;AACF;"}

package/dist/esm/Table/renderers/renderers.mjs

@@ -0,0 +1,194 @@
+import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
+import { ClassNames } from "@emotion/react";
+import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
+import { setId } from "../../utils/setId.mjs";
+import { hvStringFallback, hvNumberFallback } from "../utils/fallbacks.mjs";
+import { HvDateColumnCell } from "./DateColumnCell/DateColumnCell.mjs";
+import { HvButton } from "../../Button/Button.mjs";
+import { HvTag } from "../../Tag/Tag.mjs";
+import { HvSwitchColumnCell } from "./SwitchColumnCell/SwitchColumnCell.mjs";
+import { HvDropdownColumnCell } from "./DropdownColumnCell/DropdownColumnCell.mjs";
+import { HvProgressColumnCell } from "./ProgressColumnCell/ProgressColumnCell.mjs";
+import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.mjs";
+import { HvTypography } from "../../Typography/Typography.mjs";
+function hvTextColumn(col, overflowTooltipProps = {}) {
+  return {
+    Cell: ({ value }) => /* @__PURE__ */ jsx(
+      HvOverflowTooltip,
+      {
+        data: hvStringFallback(value),
+        ...overflowTooltipProps
+      }
+    ),
+    sortType: "alphanumeric",
+    ...col
+  };
+}
+function hvNumberColumn(col) {
+  return {
+    Cell: ({ value }) => /* @__PURE__ */ jsx(Fragment, { children: hvNumberFallback(value) }),
+    align: "right",
+    sortType: "number",
+    ...col
+  };
+}
+function hvDateColumn(col, dateFormat) {
+  return {
+    Cell: ({ value }) => /* @__PURE__ */ jsx(HvDateColumnCell, { date: value, dateFormat }),
+    sortType: "alphanumeric",
+    sortDescFirst: true,
+    ...col
+  };
+}
+function hvExpandColumn(col, expandRowButtonAriaLabel, collapseRowButtonAriaLabel, getCanRowExpand, ExpandedIcon = /* @__PURE__ */ jsx(DropUpXS, {}), CollapsedIcon = /* @__PURE__ */ jsx(DropDownXS, {})) {
+  return {
+    Cell: (cellProps) => {
+      const { value, row } = cellProps;
+      const expandedProps = row.getToggleRowExpandedProps?.();
+      const hasContent = getCanRowExpand?.(row) ?? true;
+      return /* @__PURE__ */ jsx(ClassNames, { children: ({ css }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        hasContent && /* @__PURE__ */ jsx(
+          HvButton,
+          {
+            icon: true,
+            "aria-label": row.isExpanded ? collapseRowButtonAriaLabel : expandRowButtonAriaLabel,
+            "aria-expanded": row.isExpanded,
+            onClick: expandedProps?.onClick,
+            classes: {
+              root: css({
+                position: "absolute",
+                left: 0,
+                top: "50%",
+                transform: "translateY(-50%)"
+              })
+            },
+            children: row.isExpanded ? ExpandedIcon : CollapsedIcon
+          }
+        ),
+        /* @__PURE__ */ jsx(HvOverflowTooltip, { data: hvStringFallback(value) })
+      ] }) });
+    },
+    sortType: "alphanumeric",
+    cellStyle: {
+      position: "relative"
+    },
+    ...col
+  };
+}
+function hvTagColumn(col, valueDataKey, colorDataKey, textColorDataKey, fromRowData = false, tagProps) {
+  return {
+    Cell: (cellProps) => {
+      const { value, row } = cellProps;
+      if (!value) {
+        return /* @__PURE__ */ jsx(Fragment, { children: "—" });
+      }
+      const {
+        [valueDataKey]: name,
+        [colorDataKey]: color,
+        [textColorDataKey]: textColor
+      } = fromRowData ? row.original : value;
+      return /* @__PURE__ */ jsx(
+        HvTag,
+        {
+          label: /* @__PURE__ */ jsx(HvTypography, { variant: "body", children: name }),
+          type: "semantic",
+          color,
+          style: textColor != null ? { color: textColor } : {},
+          tabIndex: -1,
+          ...tagProps
+        }
+      );
+    },
+    cellStyle: {
+      paddingTop: 0,
+      paddingBottom: 0
+    },
+    ...col
+  };
+}
+function hvSwitchColumn(col, switchLabel, falseLabel, trueLabel, switchProps) {
+  return {
+    Cell: (cellProps) => {
+      const { value, row } = cellProps;
+      return /* @__PURE__ */ jsx(
+        HvSwitchColumnCell,
+        {
+          checked: value,
+          value: row.id,
+          switchLabel,
+          falseLabel,
+          trueLabel,
+          switchProps
+        }
+      );
+    },
+    cellStyle: {
+      paddingTop: 0,
+      paddingBottom: 0
+    },
+    ...col
+  };
+}
+function hvDropdownColumn(col, id, placeholder, disabledPlaceholder, onChange) {
+  return {
+    Cell: (cellProps) => {
+      const { value, row, column } = cellProps;
+      const dsbld = value.length < 1;
+      return /* @__PURE__ */ jsx(
+        HvDropdownColumnCell,
+        {
+          values: value,
+          placeholder: dsbld ? disabledPlaceholder : placeholder,
+          onChange: (val) => onChange?.(row.id, val),
+          disabled: dsbld,
+          dropdownProps: {
+            "aria-labelledby": setId(id, column.id) || column.id || id
+            // TODO - to be reviewed because it doesn't make much sense
+          }
+        }
+      );
+    },
+    cellStyle: {
+      paddingTop: 0,
+      paddingBottom: 0
+    },
+    ...col
+  };
+}
+function hvProgressColumn(col, getPartial, getTotal, color) {
+  return {
+    Cell: (cellProps) => {
+      const { row, column } = cellProps;
+      const partial = getPartial?.(row) || 0;
+      const total = getTotal?.(row);
+      if (total) {
+        return /* @__PURE__ */ jsx(
+          HvProgressColumnCell,
+          {
+            partial,
+            total,
+            color,
+            "aria-labelledby": column.id
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(Fragment, { children: "—" });
+    },
+    cellStyle: {
+      paddingTop: 0,
+      paddingBottom: 0
+    },
+    ...col
+  };
+}
+export {
+  hvDateColumn,
+  hvDropdownColumn,
+  hvExpandColumn,
+  hvNumberColumn,
+  hvProgressColumn,
+  hvSwitchColumn,
+  hvTagColumn,
+  hvTextColumn
+};
+//# sourceMappingURL=renderers.mjs.map

package/dist/esm/Table/renderers/renderers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderers.mjs","sources":["../../../../src/Table/renderers/renderers.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"../../utils/setId\";\nimport { HvTag, HvTagProps } from \"../../Tag\";\nimport { HvButton } from \"../../Button\";\nimport { HvTypography } from \"../../Typography\";\nimport {\n  HvOverflowTooltip,\n  HvOverflowTooltipProps,\n} from \"../../OverflowTooltip\";\nimport { HvBaseSwitchProps } from \"../../BaseSwitch\";\nimport { HvListValue } from \"../../List\";\n\nimport {\n  HvTableHeaderRenderer,\n  HvCellProps,\n  HvTableColumnConfig,\n  HvRowInstance,\n} from \"../hooks/useTable\";\nimport { HvDateColumnCell } from \"./DateColumnCell\";\nimport { HvSwitchColumnCell } from \"./SwitchColumnCell\";\nimport { HvProgressColumnCell } from \"./ProgressColumnCell\";\nimport { HvDropdownColumnCell } from \"./DropdownColumnCell\";\nimport { hvStringFallback, hvNumberFallback } from \"../utils\";\n\nexport function hvTextColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  overflowTooltipProps: Omit<HvOverflowTooltipProps, \"data\"> = {}\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: ({ value }: HvCellProps<D, H>) => (\n      <HvOverflowTooltip\n        data={hvStringFallback(value)}\n        {...overflowTooltipProps}\n      />\n    ),\n    sortType: \"alphanumeric\",\n    ...col,\n  };\n}\n\nexport function hvNumberColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(col: HvTableColumnConfig<D, H>): HvTableColumnConfig<D, H> {\n  return {\n    Cell: ({ value }: HvCellProps<D, H>) => <>{hvNumberFallback(value)}</>,\n    align: \"right\",\n    sortType: \"number\",\n    ...col,\n  };\n}\n\nexport function hvDateColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  dateFormat?: string\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: ({ value }: HvCellProps<D, H>) => (\n      <HvDateColumnCell date={value} dateFormat={dateFormat} />\n    ),\n    sortType: \"alphanumeric\",\n    sortDescFirst: true,\n    ...col,\n  };\n}\n\nexport function hvExpandColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  expandRowButtonAriaLabel: string,\n  collapseRowButtonAriaLabel: string,\n  getCanRowExpand?: (row: HvRowInstance<D, H>) => boolean,\n  ExpandedIcon: React.ReactNode = <DropUpXS />,\n  CollapsedIcon: React.ReactNode = <DropDownXS />\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row } = cellProps;\n      const expandedProps = row.getToggleRowExpandedProps?.();\n\n      const hasContent = getCanRowExpand?.(row) ?? true;\n\n      return (\n        <ClassNames>\n          {({ css }) => (\n            <>\n              {hasContent && (\n                <HvButton\n                  icon\n                  aria-label={\n                    row.isExpanded\n                      ? collapseRowButtonAriaLabel\n                      : expandRowButtonAriaLabel\n                  }\n                  aria-expanded={row.isExpanded}\n                  onClick={expandedProps?.onClick}\n                  classes={{\n                    root: css({\n                      position: \"absolute\",\n                      left: 0,\n                      top: \"50%\",\n                      transform: \"translateY(-50%)\",\n                    }),\n                  }}\n                >\n                  {row.isExpanded ? ExpandedIcon : CollapsedIcon}\n                </HvButton>\n              )}\n\n              <HvOverflowTooltip data={hvStringFallback(value)} />\n            </>\n          )}\n        </ClassNames>\n      );\n    },\n    sortType: \"alphanumeric\",\n    cellStyle: {\n      position: \"relative\",\n    },\n    ...col,\n  };\n}\n\nexport function hvTagColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer,\n  A extends object = Record<string, unknown>\n>(\n  col: HvTableColumnConfig<D, H>,\n  valueDataKey: keyof A,\n  colorDataKey: keyof A,\n  textColorDataKey: keyof A,\n  fromRowData: boolean = false,\n  tagProps?: HvTagProps\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row } = cellProps;\n      if (!value) {\n        return <>—</>;\n      }\n\n      const {\n        [valueDataKey]: name,\n        [colorDataKey]: color,\n        [textColorDataKey]: textColor,\n      } = fromRowData ? row.original : value;\n\n      return (\n        <HvTag\n          label={<HvTypography variant=\"body\">{name}</HvTypography>}\n          type=\"semantic\"\n          color={color}\n          style={textColor != null ? { color: textColor } : {}}\n          tabIndex={-1}\n          {...tagProps}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\n// TODO - Review accessibility on the next renderers because they all differ\n\nexport function hvSwitchColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  switchLabel: string,\n  falseLabel?: string,\n  trueLabel?: string,\n  switchProps?: HvBaseSwitchProps\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row } = cellProps;\n      return (\n        <HvSwitchColumnCell\n          checked={value}\n          value={row.id}\n          switchLabel={switchLabel}\n          falseLabel={falseLabel}\n          trueLabel={trueLabel}\n          switchProps={switchProps}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\nexport function hvDropdownColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  id: string | undefined,\n  placeholder: string,\n  disabledPlaceholder: string,\n  onChange?: (identifier: string, value: HvListValue) => void\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { value, row, column } = cellProps;\n      const dsbld = value.length < 1;\n      return (\n        <HvDropdownColumnCell\n          values={value}\n          placeholder={dsbld ? disabledPlaceholder : placeholder}\n          onChange={(val) => onChange?.(row.id, val)}\n          disabled={dsbld}\n          dropdownProps={{\n            \"aria-labelledby\": setId(id, column.id) || column.id || id, // TODO - to be reviewed because it doesn't make much sense\n          }}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\nexport function hvProgressColumn<\n  D extends object = Record<string, unknown>,\n  H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer\n>(\n  col: HvTableColumnConfig<D, H>,\n  getPartial?: (row: HvRowInstance<D, H>) => number,\n  getTotal?: (row: HvRowInstance<D, H>) => number,\n  color?: \"primary\" | \"secondary\"\n): HvTableColumnConfig<D, H> {\n  return {\n    Cell: (cellProps: HvCellProps<D, H>) => {\n      const { row, column } = cellProps;\n      const partial = getPartial?.(row) || 0;\n      const total = getTotal?.(row);\n\n      if (total) {\n        return (\n          <HvProgressColumnCell\n            partial={partial}\n            total={total}\n            color={color}\n            aria-labelledby={column.id}\n          />\n        );\n      }\n\n      return <>—</>;\n    },\n\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/Table/utils/fallbacks.mjs

@@ -0,0 +1,18 @@
+const LONG_DASH = "—";
+const hvStringFallback = (value) => {
+  return typeof value === "string" && value !== "" ? value : LONG_DASH;
+};
+const hvNumberFallback = (value) => {
+  return typeof value === "number" ? value : LONG_DASH;
+};
+const hvNodeFallback = (value) => {
+  if (!value)
+    return LONG_DASH;
+  return hvStringFallback(value?.toString()) === LONG_DASH ? LONG_DASH : value;
+};
+export {
+  hvNodeFallback,
+  hvNumberFallback,
+  hvStringFallback
+};
+//# sourceMappingURL=fallbacks.mjs.map

package/dist/esm/Table/utils/fallbacks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fallbacks.mjs","sources":["../../../../src/Table/utils/fallbacks.ts"],"sourcesContent":["const LONG_DASH = \"—\";\n\nexport const hvStringFallback = (value: any) => {\n  return typeof value === \"string\" && value !== \"\" ? value : LONG_DASH;\n};\n\nexport const hvNumberFallback = (value: any) => {\n  return typeof value === \"number\" ? value : LONG_DASH;\n};\n\nexport const hvNodeFallback = (value: any) => {\n  if (!value) return LONG_DASH;\n  return hvStringFallback(value?.toString()) === LONG_DASH ? LONG_DASH : value;\n};\n"],"names":[],"mappings":"AAAA,MAAM,YAAY;AAEL,MAAA,mBAAmB,CAAC,UAAe;AAC9C,SAAO,OAAO,UAAU,YAAY,UAAU,KAAK,QAAQ;AAC7D;AAEa,MAAA,mBAAmB,CAAC,UAAe;AACvC,SAAA,OAAO,UAAU,WAAW,QAAQ;AAC7C;AAEa,MAAA,iBAAiB,CAAC,UAAe;AAC5C,MAAI,CAAC;AAAc,WAAA;AACnB,SAAO,iBAAiB,OAAO,SAAA,CAAU,MAAM,YAAY,YAAY;AACzE;"}

package/dist/esm/Table/utils/utils.mjs

@@ -0,0 +1,20 @@
+const getBorderStyles = (color, rowBorderRadius) => {
+  return {
+    "& td": {
+      borderTop: `1px solid ${color}`,
+      borderBottom: `1px solid ${color}`
+    },
+    "& td:first-of-type": {
+      borderLeft: `1px solid ${color}`,
+      borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`
+    },
+    "& td:last-of-type": {
+      borderRight: `1px solid ${color}`,
+      borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`
+    }
+  };
+};
+export {
+  getBorderStyles
+};
+//# sourceMappingURL=utils.mjs.map

package/dist/esm/Table/utils/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","sources":["../../../../src/Table/utils/utils.ts"],"sourcesContent":["export const getBorderStyles = (color: string, rowBorderRadius: string) => {\n  return {\n    \"& td\": {\n      borderTop: `1px solid ${color}`,\n      borderBottom: `1px solid ${color}`,\n    },\n    \"& td:first-of-type\": {\n      borderLeft: `1px solid ${color}`,\n      borderRadius: `${rowBorderRadius} 0 0 ${rowBorderRadius}`,\n    },\n    \"& td:last-of-type\": {\n      borderRight: `1px solid ${color}`,\n      borderRadius: `0 ${rowBorderRadius} ${rowBorderRadius} 0`,\n    },\n  };\n};\n"],"names":[],"mappings":"AAAa,MAAA,kBAAkB,CAAC,OAAe,oBAA4B;AAClE,SAAA;AAAA,IACL,QAAQ;AAAA,MACN,WAAW,aAAa,KAAK;AAAA,MAC7B,cAAc,aAAa,KAAK;AAAA,IAClC;AAAA,IACA,sBAAsB;AAAA,MACpB,YAAY,aAAa,KAAK;AAAA,MAC9B,cAAc,GAAG,eAAe,QAAQ,eAAe;AAAA,IACzD;AAAA,IACA,qBAAqB;AAAA,MACnB,aAAa,aAAa,KAAK;AAAA,MAC/B,cAAc,KAAK,eAAe,IAAI,eAAe;AAAA,IACvD;AAAA,EAAA;AAEJ;"}

package/dist/esm/Tabs/Tabs.mjs

@@ -0,0 +1,27 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import Tabs from "@mui/material/Tabs";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useClasses } from "./Tabs.styles.mjs";
+import { staticClasses } from "./Tabs.styles.mjs";
+const HvTabs = (props) => {
+  const { classes: classesProp, ...others } = useDefaultProps("HvTabs", props);
+  const { classes } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      classes: {
+        root: classes.root,
+        flexContainer: classes.flexContainer,
+        indicator: classes.indicator,
+        scroller: classes.scroller
+      },
+      TabIndicatorProps: { children: /* @__PURE__ */ jsx("div", {}) },
+      ...others
+    }
+  );
+};
+export {
+  HvTabs,
+  staticClasses as tabsClasses
+};
+//# sourceMappingURL=Tabs.mjs.map

package/dist/esm/Tabs/Tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.mjs","sources":["../../../src/Tabs/Tabs.tsx"],"sourcesContent":["import Tabs, { TabsProps as MuiTabsProps } from \"@mui/material/Tabs\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Tabs.styles\";\n\nexport { staticClasses as tabsClasses };\n\nexport type HvTabsClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tabs props: https://mui.com/material-ui/api/tabs/#props\nexport interface HvTabsProps extends Omit<MuiTabsProps, \"onChange\"> {\n  /**\n   * The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n   */\n  value?: any;\n  /**\n   * Callback fired when the value changes.\n   */\n  onChange?: (event: React.SyntheticEvent, value: any) => void;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvTabsClasses;\n  /** @ignore */\n  ref?: MuiTabsProps[\"ref\"];\n  /** @ignore */\n  component?: MuiTabsProps[\"component\"];\n}\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nexport const HvTabs = (props: HvTabsProps) => {\n  const { classes: classesProp, ...others } = useDefaultProps(\"HvTabs\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tabs\n      classes={{\n        root: classes.root,\n        flexContainer: classes.flexContainer,\n        indicator: classes.indicator,\n        scroller: classes.scroller,\n      }}\n      TabIndicatorProps={{ children: <div /> }}\n      {...others}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAmCa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA,EAAE,SAAS,aAAa,GAAG,OAAW,IAAA,gBAAgB,UAAU,KAAK;AAE3E,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,eAAe,QAAQ;AAAA,QACvB,WAAW,QAAQ;AAAA,QACnB,UAAU,QAAQ;AAAA,MACpB;AAAA,MACA,mBAAmB,EAAE,UAAU,oBAAC,QAAI,CAAA,EAAG;AAAA,MACtC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/esm/Tabs/Tabs.styles.mjs

@@ -0,0 +1,31 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvTabs", {
+  root: {
+    minHeight: 0,
+    overflow: "visible"
+  },
+  indicator: {
+    display: "flex",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+    "& > div": {
+      width: "100%",
+      backgroundColor: `${theme.colors.secondary}`
+    },
+    height: 2
+  },
+  scroller: {
+    overflow: "visible !important"
+  },
+  flexContainer: {
+    "& button:first-of-type": {
+      marginLeft: "3px"
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Tabs.styles.mjs.map

package/dist/esm/Tabs/Tabs.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.styles.mjs","sources":["../../../src/Tabs/Tabs.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTabs\", {\n  root: {\n    minHeight: 0,\n    overflow: \"visible\",\n  },\n  indicator: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    backgroundColor: \"transparent\",\n    \"& > div\": {\n      width: \"100%\",\n      backgroundColor: `${theme.colors.secondary}`,\n    },\n    height: 2,\n  },\n  scroller: {\n    overflow: \"visible !important\",\n  },\n  flexContainer: {\n    \"& button:first-of-type\": {\n      marginLeft: \"3px\",\n    },\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,WAAW;AAAA,MACT,OAAO;AAAA,MACP,iBAAiB,GAAG,MAAM,OAAO,SAAS;AAAA,IAC5C;AAAA,IACA,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,IACb,0BAA0B;AAAA,MACxB,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/Tag/Tag.mjs

@@ -0,0 +1,104 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { getColor } from "@hitachivantara/uikit-styles";
+import Chip from "@mui/material/Chip";
+import { CloseXS, CheckboxCheck, Checkbox } from "@hitachivantara/uikit-react-icons";
+import { useTheme } from "../hooks/useTheme.mjs";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useControlled } from "../hooks/useControlled.mjs";
+import { useClasses } from "./Tag.styles.mjs";
+import { staticClasses } from "./Tag.styles.mjs";
+const getCategoricalColor = (customColor, colors) => {
+  return customColor && colors?.[customColor] || customColor || colors?.cat1;
+};
+const HvTag = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    style,
+    label,
+    disabled,
+    type = "semantic",
+    selectable,
+    selected,
+    defaultSelected = false,
+    color,
+    deleteIcon,
+    onDelete,
+    onClick,
+    // TODO: remove from API
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    deleteButtonArialLabel = "Delete tag",
+    deleteButtonProps = {},
+    ...others
+  } = useDefaultProps("HvTag", props);
+  const { colors } = useTheme();
+  const { classes, cx, css } = useClasses(classesProp);
+  const [isSelected, setIsSelected] = useControlled(
+    selected,
+    Boolean(defaultSelected)
+  );
+  const defaultDeleteIcon = /* @__PURE__ */ jsx(
+    CloseXS,
+    {
+      role: "none",
+      className: cx(classes.button, classes.tagButton),
+      iconSize: "XS",
+      ...deleteButtonProps
+    }
+  );
+  const categoricalBackgroundColor = type === "categorical" ? getCategoricalColor(color, colors) : void 0;
+  const backgroundColor = type === "semantic" && getColor(color, "neutral_20") || type === "categorical" && `${categoricalBackgroundColor}30` || void 0;
+  const isClickable = !!(onClick || onDelete) && !disabled;
+  const clickableClass = css({
+    "&:hover": {
+      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
+    }
+  });
+  const onClickHandler = (event) => {
+    if (disabled)
+      return;
+    if (selectable)
+      setIsSelected(!isSelected);
+    onClick?.(event, !isSelected);
+  };
+  const colorOverride = disabled && ["atmo3", "secondary_60"] || void 0;
+  const avatarIcon = isSelected ? /* @__PURE__ */ jsx(CheckboxCheck, { color: colorOverride, iconSize: "XS" }) : /* @__PURE__ */ jsx(Checkbox, { color: colorOverride, iconSize: "XS" });
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      label,
+      disabled,
+      className: cx({ [clickableClass]: isClickable }, className),
+      style: {
+        ...disabled ? null : { backgroundColor },
+        ...style
+      },
+      classes: {
+        root: cx(classes.root, classes.chipRoot, {
+          [classes.disabled]: disabled,
+          [classes.clickable]: isClickable,
+          [classes.categorical]: type === "categorical",
+          [classes.categoricalFocus]: type === "categorical" && !disabled,
+          [classes.categoricalDisabled]: type === "categorical" && disabled
+        }),
+        label: classes.label,
+        deleteIcon: cx(classes.deleteIcon, {
+          [classes.disabledDeleteIcon]: disabled
+        })
+      },
+      deleteIcon: deleteIcon || defaultDeleteIcon,
+      onDelete: disabled ? void 0 : onDelete,
+      onClick: onClickHandler,
+      "aria-pressed": isSelected,
+      ...selectable && type === "semantic" && {
+        avatar: avatarIcon
+      },
+      ...others
+    }
+  );
+};
+export {
+  HvTag,
+  staticClasses as tagClasses
+};
+//# sourceMappingURL=Tag.mjs.map

package/dist/esm/Tag/Tag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.mjs","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useControlled } from \"../hooks/useControlled\";\n\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor, colors) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected)\n  );\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      role=\"none\"\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  const onClickHandler = (event) => {\n    if (disabled) return;\n    if (selectable) setIsSelected(!isSelected);\n    onClick?.(event, !isSelected);\n  };\n\n  const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n  const avatarIcon = isSelected ? (\n    <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n  ) : (\n    <Checkbox color={colorOverride} iconSize=\"XS\" />\n  );\n\n  return (\n    <Chip\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={onClickHandler}\n      aria-pressed={isSelected}\n      {...(selectable &&\n        type === \"semantic\" && {\n          avatar: avatarIcon,\n        })}\n      {...others}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA6DA,MAAM,sBAAsB,CAAC,aAAa,WAAW;AACnD,SAAQ,eAAe,SAAS,WAAW,KAAM,eAAe,QAAQ;AAC1E;AAUa,MAAA,QAAQ,CAAC,UAAsB;AACpC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,yBAAyB;AAAA,IACzB,oBAAoB,CAAC;AAAA,IACrB,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAC5B,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAE7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGzB,QAAM,oBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,6BACJ,SAAS,gBAAgB,oBAAoB,OAAO,MAAM,IAAI;AAE1D,QAAA,kBACH,SAAS,cAAc,SAAS,OAAO,YAAY,KACnD,SAAS,iBAAiB,GAAG,0BAA0B,QACxD;AAEF,QAAM,cAAc,CAAC,EAAE,WAAW,aAAa,CAAC;AAEhD,QAAM,iBAAiB,IAAI;AAAA,IACzB,WAAW;AAAA,MACT,WAAW,aAAa,0BAA0B;AAAA,IACpD;AAAA,EAAA,CACD;AAEK,QAAA,iBAAiB,CAAC,UAAU;AAC5B,QAAA;AAAU;AACV,QAAA;AAAY,oBAAc,CAAC,UAAU;AAC/B,cAAA,OAAO,CAAC,UAAU;AAAA,EAAA;AAG9B,QAAM,gBAAiB,YAAY,CAAC,SAAS,cAAc,KAAM;AAEjE,QAAM,aAAa,aAChB,oBAAA,eAAA,EAAc,OAAO,eAAe,UAAS,KAAK,CAAA,IAElD,oBAAA,UAAA,EAAS,OAAO,eAAe,UAAS,KAAK,CAAA;AAI9C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,EAAE,CAAC,cAAc,GAAG,YAAA,GAAe,SAAS;AAAA,MAC1D,OAAO;AAAA,QACL,GAAI,WAAW,OAAO,EAAE,gBAAgB;AAAA,QACxC,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,UAAU;AAAA,UACvC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,SAAS,GAAG;AAAA,UACrB,CAAC,QAAQ,WAAW,GAAG,SAAS;AAAA,UAChC,CAAC,QAAQ,gBAAgB,GAAG,SAAS,iBAAiB,CAAC;AAAA,UACvD,CAAC,QAAQ,mBAAmB,GAAG,SAAS,iBAAiB;AAAA,QAAA,CAC1D;AAAA,QACD,OAAO,QAAQ;AAAA,QACf,YAAY,GAAG,QAAQ,YAAY;AAAA,UACjC,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAAA,CAC/B;AAAA,MACH;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,UAAU,WAAW,SAAY;AAAA,MACjC,SAAS;AAAA,MACT,gBAAc;AAAA,MACb,GAAI,cACH,SAAS,cAAc;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MACD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/esm/Tag/Tag.styles.mjs

@@ -0,0 +1,90 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { chipClasses } from "@mui/material/Chip";
+import { outlineStyles } from "../utils/focusUtils.mjs";
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvTag", {
+  root: {
+    color: theme.colors.base_dark,
+    [`& .${chipClasses.avatar}`]: {
+      width: 12,
+      height: 12,
+      marginLeft: 2,
+      marginRight: 0
+    }
+  },
+  chipRoot: {
+    [`&.${chipClasses.root}`]: {
+      height: 16,
+      borderRadius: 0,
+      maxWidth: 180,
+      fontFamily: theme.fontFamily.body,
+      "&:focus-visible": {
+        backgroundColor: theme.alpha("base_light", 0.3)
+      },
+      "&$categorical": {
+        borderRadius: 8,
+        "& $label": {
+          color: theme.colors.secondary
+        }
+      }
+    },
+    "&$disabled": {
+      opacity: 1,
+      backgroundColor: theme.colors.atmo3,
+      "& $label": {
+        color: theme.colors.secondary_60
+      }
+    },
+    [`& .${chipClasses.label}`]: {
+      paddingLeft: 4,
+      paddingRight: 4,
+      ...theme.typography.caption2,
+      color: "currentcolor"
+    },
+    [`& .${chipClasses.deleteIcon}`]: {
+      margin: 0,
+      width: 16,
+      height: 16,
+      padding: 0,
+      color: "currentColor",
+      "& svg .color0": {
+        fill: "currentcolor"
+      },
+      "&:hover": {
+        backgroundColor: theme.colors.containerBackgroundHover,
+        color: "unset"
+      },
+      "&:focus": {
+        ...outlineStyles,
+        borderRadius: 0
+      },
+      "&:focus:not(:focus-visible)": {
+        outline: "0 !important",
+        boxShadow: "none !important"
+      }
+    }
+  },
+  disabled: {},
+  clickable: {
+    cursor: "pointer",
+    "&:focus-visible": {
+      ...outlineStyles
+    }
+  },
+  categorical: {},
+  label: {},
+  deleteIcon: {},
+  // TODO: redundant - use deleteIcon. remove in v6
+  button: {},
+  tagButton: {},
+  // TODO: redundant - use $clickable or :not($disabled). remove in v6
+  focusVisible: {},
+  disabledDeleteIcon: {},
+  categoricalFocus: {},
+  categoricalDisabled: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Tag.styles.mjs.map

package/dist/esm/Tag/Tag.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.styles.mjs","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { chipClasses } from \"@mui/material/Chip\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n  root: {\n    color: theme.colors.base_dark,\n\n    [`& .${chipClasses.avatar}`]: {\n      width: 12,\n      height: 12,\n      marginLeft: 2,\n      marginRight: 0,\n    },\n  },\n\n  chipRoot: {\n    [`&.${chipClasses.root}`]: {\n      height: 16,\n      borderRadius: 0,\n      maxWidth: 180,\n      fontFamily: theme.fontFamily.body,\n      \"&:focus-visible\": {\n        backgroundColor: theme.alpha(\"base_light\", 0.3),\n      },\n\n      \"&$categorical\": {\n        borderRadius: 8,\n        \"& $label\": {\n          color: theme.colors.secondary,\n        },\n      },\n    },\n\n    \"&$disabled\": {\n      opacity: 1,\n      backgroundColor: theme.colors.atmo3,\n      \"& $label\": {\n        color: theme.colors.secondary_60,\n      },\n    },\n\n    [`& .${chipClasses.label}`]: {\n      paddingLeft: 4,\n      paddingRight: 4,\n      ...(theme.typography.caption2 as CSSProperties),\n      color: \"currentcolor\",\n    },\n\n    [`& .${chipClasses.deleteIcon}`]: {\n      margin: 0,\n      width: 16,\n      height: 16,\n      padding: 0,\n      color: \"currentColor\",\n      \"& svg .color0\": {\n        fill: \"currentcolor\",\n      },\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n        color: \"unset\",\n      },\n      \"&:focus\": {\n        ...outlineStyles,\n        borderRadius: 0,\n      },\n      \"&:focus:not(:focus-visible)\": {\n        outline: \"0 !important\",\n        boxShadow: \"none !important\",\n      },\n    },\n  },\n\n  disabled: {},\n\n  clickable: {\n    cursor: \"pointer\",\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n\n  categorical: {},\n\n  label: {},\n\n  deleteIcon: {},\n\n  // TODO: redundant - use deleteIcon. remove in v6\n  button: {},\n  tagButton: {},\n  // TODO: redundant - use $clickable or :not($disabled). remove in v6\n  focusVisible: {},\n  disabledDeleteIcon: {},\n  categoricalFocus: {},\n  categoricalDisabled: {},\n});\n"],"names":[],"mappings":";;;;AAUO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,OAAO,MAAM,OAAO;AAAA,IAEpB,CAAC,MAAM,YAAY,MAAM,EAAE,GAAG;AAAA,MAC5B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EAEA,UAAU;AAAA,IACR,CAAC,KAAK,YAAY,IAAI,EAAE,GAAG;AAAA,MACzB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAY,MAAM,WAAW;AAAA,MAC7B,mBAAmB;AAAA,QACjB,iBAAiB,MAAM,MAAM,cAAc,GAAG;AAAA,MAChD;AAAA,MAEA,iBAAiB;AAAA,QACf,cAAc;AAAA,QACd,YAAY;AAAA,UACV,OAAO,MAAM,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,YAAY;AAAA,QACV,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IAEA,CAAC,MAAM,YAAY,KAAK,EAAE,GAAG;AAAA,MAC3B,aAAa;AAAA,MACb,cAAc;AAAA,MACd,GAAI,MAAM,WAAW;AAAA,MACrB,OAAO;AAAA,IACT;AAAA,IAEA,CAAC,MAAM,YAAY,UAAU,EAAE,GAAG;AAAA,MAChC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,iBAAiB;AAAA,QACf,MAAM;AAAA,MACR;AAAA,MACA,WAAW;AAAA,QACT,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA,QACT,GAAG;AAAA,QACH,cAAc;AAAA,MAChB;AAAA,MACA,+BAA+B;AAAA,QAC7B,SAAS;AAAA,QACT,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEA,UAAU,CAAC;AAAA,EAEX,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EAEA,aAAa,CAAC;AAAA,EAEd,OAAO,CAAC;AAAA,EAER,YAAY,CAAC;AAAA;AAAA,EAGb,QAAQ,CAAC;AAAA,EACT,WAAW,CAAC;AAAA;AAAA,EAEZ,cAAc,CAAC;AAAA,EACf,oBAAoB,CAAC;AAAA,EACrB,kBAAkB,CAAC;AAAA,EACnB,qBAAqB,CAAC;AACxB,CAAC;"}