@salt-ds/lab 1.0.0-alpha.26 → 1.0.0-alpha.28

package/dist-cjs/pill/ClosablePill.js

@@ -1,61 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var React = require('react');
-var core = require('@salt-ds/core');
-var constants = require('./constants.js');
-var DeleteButton = require('./internal/DeleteButton.js');
-var PillBase = require('./PillBase.js');
-
-const deleteKeys = ["Enter", "Delete", "Backspace"];
-const noop = () => void 0;
-const withBaseName = core.makePrefixer(constants.pillBaseName);
-const ClosablePill = React.forwardRef(function ClosablePill2({
-  onDelete,
-  label,
-  disabled,
-  onClick = noop,
-  className,
-  deleteIcon,
-  ...rest
-}, ref) {
-  const [active, setActive] = React.useState(false);
-  const handleKeyDown = React.useCallback((event) => {
-    if (deleteKeys.includes(event.key)) {
-      setActive(true);
-    }
-  }, []);
-  const handleKeyUp = (event) => {
-    setActive(false);
-    if (!disabled && deleteKeys.includes(event.key)) {
-      onDelete == null ? void 0 : onDelete(event);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(PillBase.PillBase, {
-    "aria-roledescription": "Closable Pill",
-    className: clsx.clsx(
-      {
-        [withBaseName("active")]: active
-      },
-      className
-    ),
-    deletable: true,
-    deleteIcon: deleteIcon || /* @__PURE__ */ jsxRuntime.jsx(DeleteButton.DeleteButton, {
-      active,
-      disabled
-    }),
-    disabled,
-    label,
-    onDelete,
-    onKeyDown: handleKeyDown,
-    onKeyUp: handleKeyUp,
-    ...rest,
-    ref
-  });
-});
-
-exports.ClosablePill = ClosablePill;
-//# sourceMappingURL=ClosablePill.js.map

package/dist-cjs/pill/ClosablePill.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ClosablePill.js","sources":["../src/pill/ClosablePill.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  useCallback,\n  useState,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { pillBaseName } from \"./constants\";\nimport { DeleteButton } from \"./internal/DeleteButton\";\nimport { PillBase, PillBaseProps } from \"./PillBase\";\n\nconst deleteKeys = [\"Enter\", \"Delete\", \"Backspace\"];\nconst noop = () => undefined;\n\nexport interface ClosablePillProps extends Omit<PillBaseProps, \"clickable\"> {\n  /**\n   * Clickable Pill is not supported by Closable variant.\n   */\n  clickable?: false;\n}\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport const ClosablePill = forwardRef(function ClosablePill(\n  {\n    onDelete,\n    label,\n    disabled,\n    onClick = noop,\n    className,\n    deleteIcon,\n    ...rest\n  }: PillBaseProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const [active, setActive] = useState(false);\n\n  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n    if (deleteKeys.includes(event.key)) {\n      setActive(true);\n    }\n  }, []);\n\n  const handleKeyUp = (event: KeyboardEvent<HTMLDivElement>) => {\n    setActive(false);\n    if (!disabled && deleteKeys.includes(event.key)) {\n      onDelete?.(event);\n    }\n  };\n\n  return (\n    <PillBase\n      aria-roledescription=\"Closable Pill\"\n      className={clsx(\n        {\n          [withBaseName(\"active\")]: active,\n        },\n        className\n      )}\n      deletable\n      deleteIcon={\n        deleteIcon || <DeleteButton active={active} disabled={disabled} />\n      }\n      disabled={disabled}\n      label={label}\n      onDelete={onDelete}\n      onKeyDown={handleKeyDown}\n      onKeyUp={handleKeyUp}\n      {...rest}\n      ref={ref}\n    />\n  );\n});\n"],"names":["makePrefixer","pillBaseName","forwardRef","ClosablePill","useState","useCallback","jsx","PillBase","clsx","DeleteButton"],"mappings":";;;;;;;;;;;;AAaA,MAAM,UAAa,GAAA,CAAC,OAAS,EAAA,QAAA,EAAU,WAAW,CAAA,CAAA;AAClD,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AASnB,MAAM,YAAA,GAAeA,kBAAaC,sBAAY,CAAA,CAAA;AAEjC,MAAA,YAAA,GAAeC,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAU,GAAA,IAAA;AAAA,EACV,SAAA;AAAA,EACA,UAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAE1C,EAAM,MAAA,aAAA,GAAgBC,iBAAY,CAAA,CAAC,KAAyC,KAAA;AAC1E,IAAA,IAAI,UAAW,CAAA,QAAA,CAAS,KAAM,CAAA,GAAG,CAAG,EAAA;AAClC,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,KAChB;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAA,IAAI,CAAC,QAAY,IAAA,UAAA,CAAW,QAAS,CAAA,KAAA,CAAM,GAAG,CAAG,EAAA;AAC/C,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb;AAAA,GACF,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAAC,iBAAA,EAAA;AAAA,IACC,sBAAqB,EAAA,eAAA;AAAA,IACrB,SAAW,EAAAC,SAAA;AAAA,MACT;AAAA,QACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,SAAS,EAAA,IAAA;AAAA,IACT,UAAA,EACE,8BAAeF,cAAA,CAAAG,yBAAA,EAAA;AAAA,MAAa,MAAA;AAAA,MAAgB,QAAA;AAAA,KAAoB,CAAA;AAAA,IAElE,QAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,OAAS,EAAA,WAAA;AAAA,IACR,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/pill/Pill.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-actionable-primary-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-actionable-primary-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-actionable-primary-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-actionable-primary-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-actionable-primary-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-actionable-primary-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-actionable-primary-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-actionable-primary-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-actionable-primary-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-actionable-primary-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-actionable-primary-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-actionable-primary-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n  --saltButton-height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  --saltButton-background: var(--pill-background);\n  --saltButton-color: var(--pill-text-color);\n  --saltButton-fontSize: var(--pill-fontSize);\n  --saltButton-letterSpacing: var(--saltPill-letterSpacing, 0);\n  --saltButton-lineHeight: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  --saltButton-minWidth: var(--saltPill-minWidth, 40px);\n}\n\n.saltPill {\n  align-items: center;\n  border-radius: var(--saltPill-borderRadius, 0);\n  display: inline-flex;\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n  gap: 0;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, var(--salt-size-adornmentGap));\n  padding-right: var(--saltPill-label-paddingRight, var(--salt-size-adornmentGap));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-disabled);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: 12px; /* TODO: Replace with updated size */\n  margin-left: var(--salt-size-adornmentGap);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=Pill.css.js.map

package/dist-cjs/pill/Pill.css.js.map

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

package/dist-cjs/pill/Pill.js

@@ -1,49 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var ClosablePill = require('./ClosablePill.js');
-var PillBase = require('./PillBase.js');
-var SelectablePill = require('./SelectablePill.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
-var Pill$1 = require('./Pill.css.js');
-
-const getVariant = (deletable, variantProp) => {
-  if (variantProp) {
-    return variantProp;
-  } else {
-    return deletable !== void 0 ? "closable" : "basic";
-  }
-};
-const Pill = React.forwardRef(function Pill2({ variant: variantProp, ...restProps }, ref) {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-pill",
-    css: Pill$1,
-    window: targetWindow
-  });
-  const variant = getVariant(restProps.deletable, variantProp);
-  if (variant === "selectable") {
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectablePill.SelectablePill, {
-      ...restProps,
-      ref
-    });
-  } else if (variant === "closable") {
-    return /* @__PURE__ */ jsxRuntime.jsx(ClosablePill.ClosablePill, {
-      ...restProps,
-      ref
-    });
-  } else {
-    return /* @__PURE__ */ jsxRuntime.jsx(PillBase.PillBase, {
-      clickable: true,
-      ...restProps,
-      ref
-    });
-  }
-});
-
-exports.Pill = Pill;
-//# sourceMappingURL=Pill.js.map

package/dist-cjs/pill/Pill.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pill.js","sources":["../src/pill/Pill.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, ReactElement } from \"react\";\n\nimport { ClosablePill, ClosablePillProps } from \"./ClosablePill\";\nimport { PillBase, PillBaseProps } from \"./PillBase\";\nimport { SelectablePill, SelectablePillProps } from \"./SelectablePill\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport pillCss from \"./Pill.css\";\n\nexport type PillVariant = \"basic\" | \"closable\" | \"selectable\";\n\nexport interface PillVariantProps<T extends PillVariant = \"basic\"> {\n  /**\n   * Determines the variant of pill\n   */\n  variant?: T;\n}\n\n// Generic checks makes sure that incompatiable props like `onChange` can be inferred correctly when using different variants\nexport type PillProps<T extends PillVariant = \"basic\"> = T extends \"closable\"\n  ? ClosablePillProps & PillVariantProps<T>\n  : T extends \"basic\"\n  ? PillBaseProps & PillVariantProps<T>\n  : SelectablePillProps & PillVariantProps<T>;\n\nconst getVariant = (deletable?: boolean, variantProp?: PillVariant) => {\n  if (variantProp) {\n    return variantProp;\n  } else {\n    return deletable !== undefined ? \"closable\" : \"basic\";\n  }\n};\n\nexport const Pill = forwardRef(function Pill(\n  { variant: variantProp, ...restProps }: PillProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-pill\",\n    css: pillCss,\n    window: targetWindow,\n  });\n  const variant = getVariant(restProps.deletable, variantProp);\n  if (variant === \"selectable\") {\n    return <SelectablePill {...(restProps as SelectablePillProps)} ref={ref} />;\n  } else if (variant === \"closable\") {\n    return <ClosablePill {...restProps} ref={ref} />;\n  } else {\n    return <PillBase clickable {...restProps} ref={ref} />;\n  }\n}) as <T extends PillVariant = \"basic\">(\n  p: PillProps<T> & { ref?: ForwardedRef<HTMLDivElement> }\n) => ReactElement<PillProps<T>>;\n"],"names":["forwardRef","Pill","useWindow","useComponentCssInjection","pillCss","jsx","SelectablePill","ClosablePill","PillBase"],"mappings":";;;;;;;;;;;;;AA0BA,MAAM,UAAA,GAAa,CAAC,SAAA,EAAqB,WAA8B,KAAA;AACrE,EAAA,IAAI,WAAa,EAAA;AACf,IAAO,OAAA,WAAA,CAAA;AAAA,GACF,MAAA;AACL,IAAO,OAAA,SAAA,KAAc,SAAY,UAAa,GAAA,OAAA,CAAA;AAAA,GAChD;AACF,CAAA,CAAA;AAEa,MAAA,IAAA,GAAOA,iBAAW,SAASC,KAAAA,CACtC,EAAE,OAAS,EAAA,WAAA,EAAA,GAAgB,SAAU,EAAA,EACrC,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,MAAM,OAAU,GAAA,UAAA,CAAW,SAAU,CAAA,SAAA,EAAW,WAAW,CAAA,CAAA;AAC3D,EAAA,IAAI,YAAY,YAAc,EAAA;AAC5B,IAAA,uBAAQC,cAAA,CAAAC,6BAAA,EAAA;AAAA,MAAgB,GAAI,SAAA;AAAA,MAAmC,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GAC3E,MAAA,IAAW,YAAY,UAAY,EAAA;AACjC,IAAA,uBAAQD,cAAA,CAAAE,yBAAA,EAAA;AAAA,MAAc,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GACzC,MAAA;AACL,IAAA,uBAAQF,cAAA,CAAAG,iBAAA,EAAA;AAAA,MAAS,SAAS,EAAA,IAAA;AAAA,MAAE,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GACtD;AACF,CAAC;;;;"}

package/dist-cjs/pill/PillBase.js

@@ -1,133 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var React = require('react');
-var core = require('@salt-ds/core');
-var DeleteButton = require('./internal/DeleteButton.js');
-var DivButton = require('./internal/DivButton.js');
-var constants = require('./constants.js');
-var Pill = require('./Pill.css.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
-
-const useEllipsisIsActive = () => {
-  const labelRef = React.useRef(null);
-  const [showEllipsis, setShowEllipsis] = React.useState(false);
-  core.useIsomorphicLayoutEffect(() => {
-    if (labelRef.current) {
-      setShowEllipsis(
-        labelRef.current.offsetWidth < labelRef.current.scrollWidth
-      );
-    }
-  }, []);
-  return [labelRef, showEllipsis];
-};
-const noop = () => void 0;
-const withBaseName = core.makePrefixer(constants.pillBaseName);
-const PillBase = React.forwardRef(function PillBase2({
-  TooltipProps: TooltipProps2 = {},
-  "aria-roledescription": ariaRoledescription = "Pill",
-  label,
-  className,
-  clickable,
-  disabled,
-  deletable,
-  deleteIcon: deleteIconProp,
-  highlighted,
-  icon,
-  onClick = noop,
-  onDelete,
-  onKeyDown = noop,
-  onKeyUp = noop,
-  ...rest
-}, ref) {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-pill",
-    css: Pill,
-    window: targetWindow
-  });
-  const [active, setActive] = React.useState(false);
-  const [labelRef, ellipsis] = useEllipsisIsActive();
-  const clickKeys = ["Enter", " "];
-  const pillIcon = icon && React.isValidElement(icon) ? React.cloneElement(icon, {
-    ...icon.props,
-    className: clsx.clsx(withBaseName("icon"), icon.props.className)
-  }) : icon;
-  const handleKeyDown = (event) => {
-    onKeyDown(event);
-    if (!disabled && !deletable && clickKeys.indexOf(event.key) !== -1) {
-      setActive(true);
-    }
-  };
-  const handleKeyUp = (event) => {
-    onKeyUp(event);
-    setActive(false);
-  };
-  const handleClick = (event) => {
-    onClick(event);
-  };
-  const Component = deletable || clickable ? DivButton.DivButton : "div";
-  const renderDeleteIcon = () => {
-    if (deleteIconProp && React.isValidElement(deleteIconProp)) {
-      return React.cloneElement(deleteIconProp, {
-        className: clsx.clsx(
-          withBaseName(`deleteButton`),
-          deleteIconProp.props.className
-        ),
-        disabled,
-        onClick: onDelete
-      });
-    } else {
-      return /* @__PURE__ */ jsxRuntime.jsx(DeleteButton.DeleteButton, {
-        disabled,
-        onClick: onDelete
-      });
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, {
-    content: label,
-    disabled: !ellipsis && disabled,
-    ...TooltipProps2,
-    children: /* @__PURE__ */ jsxRuntime.jsxs(Component, {
-      "aria-disabled": disabled || void 0,
-      "aria-roledescription": ariaRoledescription,
-      className: clsx.clsx(
-        withBaseName(),
-        {
-          [withBaseName("clickable")]: clickable,
-          [withBaseName("deletable")]: deletable && !disabled,
-          [withBaseName("disabled")]: disabled,
-          [withBaseName("active")]: active
-        },
-        className
-      ),
-      "data-testid": "pill",
-      onKeyDown: disabled ? void 0 : handleKeyDown,
-      onKeyUp: disabled ? void 0 : handleKeyUp,
-      onClick: disabled ? void 0 : handleClick,
-      role: "button",
-      tabIndex: disabled ? -1 : 0,
-      ref,
-      ...rest,
-      children: [
-        pillIcon || null,
-        /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: withBaseName("label"),
-          ref: labelRef,
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", {
-            className: withBaseName("innerLabel"),
-            children: label
-          })
-        }),
-        deletable ? renderDeleteIcon() : null
-      ]
-    })
-  });
-});
-
-exports.PillBase = PillBase;
-//# sourceMappingURL=PillBase.js.map

package/dist-cjs/pill/PillBase.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PillBase.js","sources":["../src/pill/PillBase.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MutableRefObject,\n  ReactElement,\n  ReactEventHandler,\n  SyntheticEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  makePrefixer,\n  Tooltip,\n  TooltipProps,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\n\nimport { DeleteButton } from \"./internal/DeleteButton\";\nimport { DivButton } from \"./internal/DivButton\";\nimport { pillBaseName } from \"./constants\";\n\nimport pillCss from \"./Pill.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst useEllipsisIsActive = (): [\n  MutableRefObject<HTMLDivElement | null>,\n  boolean\n] => {\n  const labelRef = useRef<HTMLDivElement | null>(null);\n  const [showEllipsis, setShowEllipsis] = useState(false);\n\n  useIsomorphicLayoutEffect(() => {\n    if (labelRef.current) {\n      setShowEllipsis(\n        labelRef.current.offsetWidth < labelRef.current.scrollWidth\n      );\n    }\n  }, []);\n  return [labelRef, showEllipsis];\n};\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport interface PillBaseProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Props passed to the tooltip\n   */\n  TooltipProps?: Partial<TooltipProps>;\n  /**\n   * Defines a human-readable, author-localized description for the role of an element.\n   *\n   * This should be in favour of aria-label for `Pill`\n   **/\n  \"aria-roledescription\"?: string;\n  /**\n   * Clickable variation. Use 'onClick' for callback.\n   */\n  clickable?: boolean;\n  /**\n   * Shows delete icon. Use `onDelete` for callback.\n   */\n  deletable?: boolean;\n  /**\n   * Override the default delete icon element. Shown only if `deletable` is set.\n   */\n  // TODO: Should this be DeleteIcon (caps)?\n  deleteIcon?: ReactElement;\n  /**\n   * If `true`, the pill will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Whether the pill is been highlighted.\n   * If `true`, the pill will display Tooltip when text within is truncated.\n   */\n  highlighted?: boolean;\n  /**\n   * Icon element.\n   */\n  // TODO: Should this be Icon (caps)?\n  icon?: ReactElement;\n  /**\n   * The content of the label.\n   */\n  label?: string;\n  /**\n   * Callback function fired when pill is clicked.\n   */\n  onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Callback function fired when the delete icon is clicked. Used when `deletable` is true.\n   */\n  onDelete?: ReactEventHandler<HTMLElement>;\n}\n\nexport const PillBase = forwardRef(function PillBase(\n  {\n    TooltipProps = {},\n    \"aria-roledescription\": ariaRoledescription = \"Pill\",\n    label,\n    className,\n    // New API\n    clickable,\n    disabled,\n    // TODO: Should this be a prop as we have variant: 'closable'\n    // New API.\n    deletable,\n    deleteIcon: deleteIconProp,\n    // TODO: Not implemented. Consider to add `useImperativeHandle` like API to Tooltip?\n    highlighted,\n    icon,\n    onClick = noop,\n    onDelete,\n    onKeyDown = noop,\n    onKeyUp = noop,\n    ...rest\n  }: PillBaseProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-pill\",\n    css: pillCss,\n    window: targetWindow,\n  });\n\n  const [active, setActive] = useState(false);\n  const [labelRef, ellipsis] = useEllipsisIsActive();\n  const clickKeys = [\"Enter\", \" \"];\n\n  const pillIcon =\n    // FIXME: icon type\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    icon && isValidElement<any>(icon)\n      ? cloneElement(icon, {\n          ...icon.props,\n          // FIXME: icon.props is any\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n          className: clsx(withBaseName(\"icon\"), icon.props.className),\n        })\n      : icon;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown(event);\n    if (!disabled && !deletable && clickKeys.indexOf(event.key) !== -1) {\n      setActive(true);\n    }\n  };\n\n  const handleKeyUp = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyUp(event);\n    setActive(false);\n  };\n\n  const handleClick = (event: SyntheticEvent<HTMLDivElement, Event>) => {\n    onClick(event);\n  };\n\n  // FIXME: use polymorphic button as div for deletable and clickable cases.\n  const Component = deletable || clickable ? DivButton : \"div\";\n\n  const renderDeleteIcon = () => {\n    // FIXME: deleteIconProp type\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    if (deleteIconProp && isValidElement<any>(deleteIconProp)) {\n      return cloneElement(deleteIconProp, {\n        className: clsx(\n          withBaseName(`deleteButton`),\n          // FIXME: deleteIconProp.props is any\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n          deleteIconProp.props.className\n        ),\n        disabled,\n        onClick: onDelete,\n      });\n    } else {\n      return <DeleteButton disabled={disabled} onClick={onDelete} />;\n    }\n  };\n\n  return (\n    <Tooltip content={label} disabled={!ellipsis && disabled} {...TooltipProps}>\n      <Component\n        aria-disabled={disabled || undefined}\n        aria-roledescription={ariaRoledescription}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"clickable\")]: clickable,\n            [withBaseName(\"deletable\")]: deletable && !disabled,\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"active\")]: active,\n          },\n          className\n        )}\n        data-testid=\"pill\"\n        onKeyDown={disabled ? undefined : handleKeyDown}\n        onKeyUp={disabled ? undefined : handleKeyUp}\n        onClick={disabled ? undefined : handleClick}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        ref={ref}\n        {...rest}\n      >\n        {pillIcon || null}\n        <div className={withBaseName(\"label\")} ref={labelRef}>\n          <span className={withBaseName(\"innerLabel\")}>{label}</span>\n        </div>\n        {deletable ? renderDeleteIcon() : null}\n      </Component>\n    </Tooltip>\n  );\n});\n"],"names":["useRef","useState","useIsomorphicLayoutEffect","makePrefixer","pillBaseName","forwardRef","PillBase","TooltipProps","useWindow","useComponentCssInjection","pillCss","isValidElement","cloneElement","clsx","DivButton","jsx","DeleteButton","Tooltip","jsxs"],"mappings":"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"}

package/dist-cjs/pill/SelectablePill.js

@@ -1,55 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var React = require('react');
-var core = require('@salt-ds/core');
-var constants = require('./constants.js');
-var PillBase = require('./PillBase.js');
-var PillCheckbox = require('./internal/PillCheckbox.js');
-
-const noop = () => void 0;
-const withBaseName = core.makePrefixer(constants.pillBaseName);
-const SelectablePill = React.forwardRef(function SelectablePill2({
-  defaultChecked = false,
-  checked: checkedProp,
-  className,
-  onChange = noop,
-  disabled = false,
-  ...rest
-}, ref) {
-  const [checked, setChecked] = core.useControlled({
-    controlled: checkedProp,
-    default: defaultChecked,
-    name: "SelectablePill",
-    state: "checked"
-  });
-  const handleClick = React.useCallback(
-    (event) => {
-      setChecked(!checked);
-      onChange(event, !checked);
-    },
-    [checked, onChange, setChecked]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(PillBase.PillBase, {
-    "aria-checked": checked,
-    "aria-roledescription": "Selectable Pill",
-    clickable: true,
-    disabled,
-    className: clsx.clsx(withBaseName(`selectable`), className, {
-      [withBaseName(`checked`)]: checked
-    }),
-    icon: /* @__PURE__ */ jsxRuntime.jsx(PillCheckbox.PillCheckbox, {
-      checked
-    }),
-    role: "checkbox",
-    onClick: handleClick,
-    ...rest,
-    ref
-  });
-});
-
-exports.SelectablePill = SelectablePill;
-//# sourceMappingURL=SelectablePill.js.map

package/dist-cjs/pill/SelectablePill.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectablePill.js","sources":["../src/pill/SelectablePill.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ForwardedRef, forwardRef, useCallback, SyntheticEvent } from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { pillBaseName } from \"./constants\";\nimport { PillBase, PillBaseProps } from \"./PillBase\";\nimport { PillCheckbox } from \"./internal/PillCheckbox\";\n\nconst noop = () => undefined;\n\nexport interface SelectablePillProps extends Omit<PillBaseProps, \"onChange\"> {\n  /**\n   * Controls whether the selectable pill is checked\n   */\n  checked?: boolean;\n  /**\n   * Uncontrolled prop to determine initial state of selectable pill\n   */\n  defaultChecked?: boolean;\n  // TODO: API Alignment.\n  // - Reverted param order to keep event as first param\n  /**\n   * Callback when checked state is changed\n   */\n  onChange?: (event: SyntheticEvent, checked: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport const SelectablePill = forwardRef(function SelectablePill(\n  {\n    defaultChecked = false,\n    checked: checkedProp,\n    className,\n    onChange = noop,\n    disabled = false,\n    ...rest\n  }: SelectablePillProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const [checked, setChecked] = useControlled({\n    controlled: checkedProp,\n    default: defaultChecked,\n    name: \"SelectablePill\",\n    state: \"checked\",\n  });\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent<HTMLDivElement>) => {\n      setChecked(!checked);\n      onChange(event, !checked);\n    },\n    [checked, onChange, setChecked]\n  );\n\n  return (\n    <PillBase\n      aria-checked={checked}\n      aria-roledescription=\"Selectable Pill\"\n      clickable\n      disabled={disabled}\n      className={clsx(withBaseName(`selectable`), className, {\n        [withBaseName(`checked`)]: checked,\n      })}\n      icon={<PillCheckbox checked={checked} />}\n      role=\"checkbox\"\n      onClick={handleClick}\n      {...rest}\n      ref={ref}\n    />\n  );\n});\n"],"names":["makePrefixer","pillBaseName","forwardRef","SelectablePill","useControlled","useCallback","jsx","PillBase","clsx","PillCheckbox"],"mappings":";;;;;;;;;;;;AAOA,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AAmBnB,MAAM,YAAA,GAAeA,kBAAaC,sBAAY,CAAA,CAAA;AAEjC,MAAA,cAAA,GAAiBC,gBAAW,CAAA,SAASC,eAChD,CAAA;AAAA,EACE,cAAiB,GAAA,KAAA;AAAA,EACjB,OAAS,EAAA,WAAA;AAAA,EACT,SAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,QAAW,GAAA,KAAA;AAAA,EACR,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,kBAAc,CAAA;AAAA,IAC1C,UAAY,EAAA,WAAA;AAAA,IACZ,OAAS,EAAA,cAAA;AAAA,IACT,IAAM,EAAA,gBAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,KAA0C,KAAA;AACzC,MAAA,UAAA,CAAW,CAAC,OAAO,CAAA,CAAA;AACnB,MAAS,QAAA,CAAA,KAAA,EAAO,CAAC,OAAO,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,OAAS,EAAA,QAAA,EAAU,UAAU,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAAC,iBAAA,EAAA;AAAA,IACC,cAAc,EAAA,OAAA;AAAA,IACd,sBAAqB,EAAA,iBAAA;AAAA,IACrB,SAAS,EAAA,IAAA;AAAA,IACT,QAAA;AAAA,IACA,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,CAAA,UAAA,CAAY,GAAG,SAAW,EAAA;AAAA,MACrD,CAAC,YAAa,CAAA,CAAA,OAAA,CAAS,CAAI,GAAA,OAAA;AAAA,KAC5B,CAAA;AAAA,IACD,sBAAOF,cAAA,CAAAG,yBAAA,EAAA;AAAA,MAAa,OAAA;AAAA,KAAkB,CAAA;AAAA,IACtC,IAAK,EAAA,UAAA;AAAA,IACL,OAAS,EAAA,WAAA;AAAA,IACR,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/pill/constants.js

@@ -1,8 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const pillBaseName = "saltPill";
-
-exports.pillBaseName = pillBaseName;
-//# sourceMappingURL=constants.js.map

package/dist-cjs/pill/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sources":["../src/pill/constants.ts"],"sourcesContent":["export const pillBaseName = \"saltPill\";\n"],"names":[],"mappings":";;;;AAAO,MAAM,YAAe,GAAA;;;;"}

package/dist-cjs/pill/internal/DeleteButton.js

@@ -1,37 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var icons = require('@salt-ds/icons');
-var core = require('@salt-ds/core');
-var clsx = require('clsx');
-var constants = require('../constants.js');
-
-const withBaseName = core.makePrefixer(constants.pillBaseName);
-const DeleteButton = (props) => {
-  const { disabled, active, className, ...restProps } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-    "aria-hidden": "true",
-    className: clsx.clsx(
-      withBaseName("deleteButton"),
-      {
-        [withBaseName("deleteButton-disabled")]: disabled,
-        [withBaseName("deleteButton-active")]: active
-      },
-      className
-    ),
-    "data-testid": "pill-delete-button",
-    disabled,
-    onMouseEnter: (event) => event.stopPropagation(),
-    tabIndex: -1,
-    variant: "secondary",
-    ...restProps,
-    children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseSmallIcon, {
-      className: withBaseName("deleteIcon")
-    })
-  });
-};
-
-exports.DeleteButton = DeleteButton;
-//# sourceMappingURL=DeleteButton.js.map

package/dist-cjs/pill/internal/DeleteButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DeleteButton.js","sources":["../src/pill/internal/DeleteButton.tsx"],"sourcesContent":["import { CloseSmallIcon } from \"@salt-ds/icons\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { MouseEvent } from \"react\";\nimport { pillBaseName } from \"../constants\";\n\nexport interface DeleteButtonProps extends ButtonProps {\n  /**\n   * Active state.\n   */\n  active?: boolean;\n}\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport const DeleteButton = (props: DeleteButtonProps) => {\n  const { disabled, active, className, ...restProps } = props;\n  return (\n    <Button\n      aria-hidden=\"true\"\n      className={clsx(\n        withBaseName(\"deleteButton\"),\n        {\n          [withBaseName(\"deleteButton-disabled\")]: disabled,\n          [withBaseName(\"deleteButton-active\")]: active,\n        },\n        className\n      )}\n      data-testid=\"pill-delete-button\"\n      disabled={disabled}\n      onMouseEnter={(event: MouseEvent<HTMLButtonElement>) =>\n        event.stopPropagation()\n      }\n      tabIndex={-1}\n      variant=\"secondary\"\n      {...restProps}\n    >\n      <CloseSmallIcon className={withBaseName(\"deleteIcon\")} />\n    </Button>\n  );\n};\n"],"names":["makePrefixer","pillBaseName","jsx","Button","clsx","CloseSmallIcon"],"mappings":";;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAaC,sBAAY,CAAA,CAAA;AAEjC,MAAA,YAAA,GAAe,CAAC,KAA6B,KAAA;AACxD,EAAA,MAAM,EAAE,QAAA,EAAU,MAAQ,EAAA,SAAA,EAAA,GAAc,WAAc,GAAA,KAAA,CAAA;AACtD,EAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAW,EAAAC,SAAA;AAAA,MACT,aAAa,cAAc,CAAA;AAAA,MAC3B;AAAA,QACE,CAAC,YAAa,CAAA,uBAAuB,CAAI,GAAA,QAAA;AAAA,QACzC,CAAC,YAAa,CAAA,qBAAqB,CAAI,GAAA,MAAA;AAAA,OACzC;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,oBAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAc,EAAA,CAAC,KACb,KAAA,KAAA,CAAM,eAAgB,EAAA;AAAA,IAExB,QAAU,EAAA,CAAA,CAAA;AAAA,IACV,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEJ,QAAC,kBAAAF,cAAA,CAAAG,oBAAA,EAAA;AAAA,MAAe,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,KAAG,CAAA;AAAA,GACzD,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/pill/internal/DivButton.js

@@ -1,68 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@salt-ds/core');
-var clsx = require('clsx');
-
-const withBaseName = core.makePrefixer("saltButton");
-const DivButton = React.forwardRef(
-  function DivButton2({
-    children,
-    className,
-    disabled,
-    focusableWhenDisabled,
-    onKeyUp,
-    onKeyDown,
-    onBlur,
-    onClick,
-    role: roleProp,
-    ...restProps
-  }, ref) {
-    const enter = "Enter";
-    const space = " ";
-    const handleKeyDownDiv = (event) => {
-      if (!disabled && event.target === event.currentTarget && (event.key === enter || event.key === space)) {
-        onClick == null ? void 0 : onClick(event);
-      }
-      onKeyDown == null ? void 0 : onKeyDown(event);
-    };
-    const { active, buttonProps } = core.useButton({
-      disabled,
-      focusableWhenDisabled,
-      onKeyUp,
-      onKeyDown: handleKeyDownDiv,
-      onBlur,
-      onClick
-    });
-    const {
-      "aria-disabled": ariaDisabled,
-      tabIndex,
-      onBlur: handleBlur,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp
-    } = buttonProps;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", {
-      "aria-disabled": ariaDisabled,
-      className: clsx.clsx(withBaseName(), className, withBaseName("primary"), {
-        [withBaseName("disabled")]: disabled,
-        [withBaseName("active")]: active
-      }),
-      tabIndex,
-      onBlur: handleBlur,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
-      role: roleProp !== void 0 ? roleProp : "button",
-      ...restProps,
-      ref,
-      children
-    });
-  }
-);
-
-exports.DivButton = DivButton;
-//# sourceMappingURL=DivButton.js.map

package/dist-cjs/pill/internal/DivButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DivButton.js","sources":["../src/pill/internal/DivButton.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactElement,\n  KeyboardEvent,\n} from \"react\";\nimport { useButton, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport interface DivButtonProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the button will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be focusable when disabled.\n   */\n  focusableWhenDisabled?: boolean;\n}\n\nexport const DivButton = forwardRef<HTMLDivElement, DivButtonProps>(\n  function DivButton(\n    {\n      children,\n      className,\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onClick,\n      role: roleProp,\n      ...restProps\n    },\n    ref?\n  ): ReactElement<DivButtonProps> {\n    const enter = \"Enter\";\n    const space = \" \";\n\n    const handleKeyDownDiv = (event: KeyboardEvent<HTMLDivElement>) => {\n      // for Pill component, which depends on Button\n      if (\n        !disabled &&\n        // Don't act on children component\n        event.target === event.currentTarget &&\n        (event.key === enter || event.key === space)\n      ) {\n        //@ts-ignore\n        onClick?.(event);\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const { active, buttonProps } = useButton({\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown: handleKeyDownDiv,\n      onBlur,\n      onClick,\n    });\n\n    const {\n      \"aria-disabled\": ariaDisabled,\n      tabIndex,\n      onBlur: handleBlur,\n      onClick: handleClick,\n      onKeyDown: handleKeyDown,\n      onKeyUp: handleKeyUp,\n    } = buttonProps;\n\n    return (\n      <div\n        aria-disabled={ariaDisabled}\n        className={clsx(withBaseName(), className, withBaseName(\"primary\"), {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"active\")]: active,\n        })}\n        tabIndex={tabIndex}\n        onBlur={handleBlur}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        // Allow an explicit null value to be passed by user to suppress role\n        role={roleProp !== undefined ? roleProp : \"button\"}\n        {...restProps}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","DivButton","useButton","jsx","clsx"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA,CAAA;AAavC,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACH,GAAA,SAAA;AAAA,KAEL,GAC8B,EAAA;AAC9B,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AACd,IAAA,MAAM,KAAQ,GAAA,GAAA,CAAA;AAEd,IAAM,MAAA,gBAAA,GAAmB,CAAC,KAAyC,KAAA;AAEjE,MACE,IAAA,CAAC,QAED,IAAA,KAAA,CAAM,MAAW,KAAA,KAAA,CAAM,aACtB,KAAA,KAAA,CAAM,GAAQ,KAAA,KAAA,IAAS,KAAM,CAAA,GAAA,KAAQ,KACtC,CAAA,EAAA;AAEA,QAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,OACZ;AAEA,MAAY,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACd,CAAA;AAEA,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAY,EAAA,GAAIC,cAAU,CAAA;AAAA,MACxC,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAW,EAAA,gBAAA;AAAA,MACX,MAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,eAAiB,EAAA,YAAA;AAAA,MACjB,QAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,SAAW,EAAA,aAAA;AAAA,MACX,OAAS,EAAA,WAAA;AAAA,KACP,GAAA,WAAA,CAAA;AAEJ,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,eAAe,EAAA,YAAA;AAAA,MACf,WAAWC,SAAK,CAAA,YAAA,IAAgB,SAAW,EAAA,YAAA,CAAa,SAAS,CAAG,EAAA;AAAA,QAClE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC3B,CAAA;AAAA,MACD,QAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,SAAW,EAAA,aAAA;AAAA,MACX,OAAS,EAAA,WAAA;AAAA,MAET,IAAA,EAAM,QAAa,KAAA,KAAA,CAAA,GAAY,QAAW,GAAA,QAAA;AAAA,MACzC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/pill/internal/PillCheckbox.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = "/* Styles applied to the Pill checkbox */\n.saltPill-checkbox {\n  height: var(--pill-checkbox-size);\n  margin-left: 1px;\n  padding-right: 0;\n  width: var(--pill-checkbox-size);\n\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor);\n  --saltCheckbox-icon-fill: none;\n  --saltCheckbox-icon-fill-checked: none;\n  --saltCheckbox-icon-borderWidth-checked: var(--salt-size-border);\n  --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground);\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=PillCheckbox.css.js.map

package/dist-cjs/pill/internal/PillCheckbox.css.js.map

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

package/dist-cjs/pill/internal/PillCheckbox.js

@@ -1,27 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var constants = require('../constants.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
-var PillCheckbox$1 = require('./PillCheckbox.css.js');
-
-const withBaseName = core.makePrefixer(`${constants.pillBaseName}-checkbox`);
-const PillCheckbox = (props) => {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-pill-checkbox",
-    css: PillCheckbox$1,
-    window: targetWindow
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(core.CheckboxIcon, {
-    checked: props.checked,
-    className: withBaseName()
-  });
-};
-
-exports.PillCheckbox = PillCheckbox;
-//# sourceMappingURL=PillCheckbox.js.map

package/dist-cjs/pill/internal/PillCheckbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PillCheckbox.js","sources":["../src/pill/internal/PillCheckbox.tsx"],"sourcesContent":["import { CheckboxIcon, makePrefixer } from \"@salt-ds/core\";\nimport { pillBaseName } from \"../constants\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport pillCheckboxCss from \"./PillCheckbox.css\";\n\nconst withBaseName = makePrefixer(`${pillBaseName}-checkbox`);\n\nexport const PillCheckbox = (props: { checked?: boolean }): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-pill-checkbox\",\n    css: pillCheckboxCss,\n    window: targetWindow,\n  });\n  return <CheckboxIcon checked={props.checked} className={withBaseName()} />;\n};\n"],"names":["makePrefixer","pillBaseName","useWindow","useComponentCssInjection","pillCheckboxCss","jsx","CheckboxIcon"],"mappings":";;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,iBAAa,CAAA,CAAA,EAAGC,sBAAuB,CAAA,SAAA,CAAA,CAAA,CAAA;AAE/C,MAAA,YAAA,GAAe,CAAC,KAA8C,KAAA;AACzE,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBAAQC,cAAA,CAAAC,iBAAA,EAAA;AAAA,IAAa,SAAS,KAAM,CAAA,OAAA;AAAA,IAAS,WAAW,YAAa,EAAA;AAAA,GAAG,CAAA,CAAA;AAC1E;;;;"}

package/dist-cjs/pill-next/PillNext.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = "/* Styles applied to the root element */\n.saltPillNext {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  background: var(--saltPillNext-background, var(--salt-actionable-primary-background));\n  border-radius: 0;\n  border: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  outline: 0;\n  position: relative;\n  gap: var(--salt-spacing-50);\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  color: var(--saltPillNext-color, var(--salt-actionable-primary-foreground));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable  */\n.saltPillNext-clickable {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltPillNext-clickable:hover,\n.saltPillNext-clickable:focus-visible {\n  color: var(--salt-actionable-primary-foreground-hover);\n  background: var(--salt-actionable-primary-background-hover);\n}\n\n.saltPillNext-clickable.saltPillNext-active,\n.saltPillNext-clickable:active {\n  background: var(--salt-actionable-primary-background-active);\n  color: var(--salt-actionable-primary-foreground-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPillNext:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Style applied to Pill when disabled */\n.saltPillNext:disabled,\n.saltPillNext:disabled:hover {\n  color: var(--salt-actionable-primary-foreground-disabled);\n  background: var(--salt-actionable-primary-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=PillNext.css.js.map

package/dist-cjs/pill-next/PillNext.css.js.map

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

package/dist-cjs/pill-next/PillNext.js

@@ -1,60 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
-var core = require('@salt-ds/core');
-var PillNext$1 = require('./PillNext.css.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
-
-const withBaseName = core.makePrefixer("saltPillNext");
-const PillNext = React.forwardRef(
-  function PillNext2({
-    children,
-    className,
-    disabled,
-    onKeyUp,
-    onKeyDown,
-    onClick,
-    onBlur,
-    ...rest
-  }, ref) {
-    const targetWindow = window.useWindow();
-    styles.useComponentCssInjection({
-      testId: "salt-pill-next",
-      css: PillNext$1,
-      window: targetWindow
-    });
-    const { buttonProps, active } = core.useButton({
-      disabled,
-      onKeyUp,
-      onKeyDown,
-      onClick,
-      onBlur
-    });
-    const { tabIndex, ...restButtonProps } = buttonProps;
-    return /* @__PURE__ */ jsxRuntime.jsx("button", {
-      "data-testid": "pill",
-      ref,
-      className: clsx__default["default"](
-        withBaseName(),
-        withBaseName("clickable"),
-        { [withBaseName("active")]: active },
-        className
-      ),
-      ...restButtonProps,
-      ...rest,
-      children
-    });
-  }
-);
-
-exports.PillNext = PillNext;
-//# sourceMappingURL=PillNext.js.map