@ultraviolet/ui 1.88.1 → 1.89.0

package/dist/components/Label/index.cjs

@@ -1,27 +1,53 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const _styled = require("@emotion/styled/base");
 const index = require("../Stack/index.cjs");
 const index$1 = require("../Text/index.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
+const TextPointer = /* @__PURE__ */ _styled__default.default(index$1.Text, process.env.NODE_ENV === "production" ? {
+  target: "eranz9i0"
+} : {
+  target: "eranz9i0",
+  label: "TextPointer"
+})("cursor:", ({
+  disabled,
+  htmlFor
+}) => {
+  if (disabled) {
+    return "not-allowed";
+  }
+  if (htmlFor) {
+    return "pointer";
+  }
+  return "text";
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xhYmVsL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLZ0MiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvTGFiZWwvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IENvbXBvbmVudFByb3BzLCBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IFN0YWNrIH0gZnJvbSAnLi4vU3RhY2snXG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi4vVGV4dCdcblxuY29uc3QgVGV4dFBvaW50ZXIgPSBzdHlsZWQoVGV4dClgXG4gIGN1cnNvcjogJHsoeyBkaXNhYmxlZCwgaHRtbEZvciB9KSA9PiB7XG4gICAgaWYgKGRpc2FibGVkKSB7XG4gICAgICByZXR1cm4gJ25vdC1hbGxvd2VkJ1xuICAgIH1cblxuICAgIGlmIChodG1sRm9yKSB7XG4gICAgICByZXR1cm4gJ3BvaW50ZXInXG4gICAgfVxuXG4gICAgcmV0dXJuICd0ZXh0J1xuICB9fTtcbmBcblxuY29uc3QgTGFiZWxSZXF1aXJlZE9yTm90ID0gKHtcbiAgY2hpbGRyZW4sXG4gIHJlcXVpcmVkLFxuICBpZCxcbiAgc2l6ZSxcbiAgaHRtbEZvcixcbiAgYXMsXG4gIHNlbnRpbWVudCxcbiAgZGlzYWJsZWQsXG59OiBMYWJlbFByb3BzKSA9PlxuICByZXF1aXJlZCA/IChcbiAgICA8U3RhY2sgZGlyZWN0aW9uPVwicm93XCIgZ2FwPVwiMC41XCIgYWxpZ25JdGVtcz1cInN0YXJ0XCI+XG4gICAgICA8VGV4dFBvaW50ZXJcbiAgICAgICAgYXM9e2FzID09PSAnbGFiZWwnID8gJ2xhYmVsJyA6ICdsZWdlbmQnfVxuICAgICAgICBpZD17aWR9XG4gICAgICAgIHZhcmlhbnQ9e3NpemUgPT09ICdsYXJnZScgPyAnYm9keVN0cm9uZycgOiAnYm9keVNtYWxsU3Ryb25nJ31cbiAgICAgICAgc2VudGltZW50PXtzZW50aW1lbnR9XG4gICAgICAgIGh0bWxGb3I9e2h0bWxGb3J9XG4gICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9UZXh0UG9pbnRlcj5cbiAgICAgIDxUZXh0XG4gICAgICAgIGFzPVwic3BhblwiXG4gICAgICAgIHZhcmlhbnQ9e3NpemUgPT09ICdsYXJnZScgPyAnYm9keVN0cm9uZycgOiAnYm9keVNtYWxsU3Ryb25nJ31cbiAgICAgICAgc2VudGltZW50PVwiZGFuZ2VyXCJcbiAgICAgICAgYXJpYS1sYWJlbD1cInJlcXVpcmVkXCJcbiAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgPlxuICAgICAgICAqXG4gICAgICA8L1RleHQ+XG4gICAgPC9TdGFjaz5cbiAgKSA6IChcbiAgICA8VGV4dFBvaW50ZXJcbiAgICAgIGFzPXthcyA9PT0gJ2xhYmVsJyA/ICdsYWJlbCcgOiAnbGVnZW5kJ31cbiAgICAgIGlkPXtpZH1cbiAgICAgIHZhcmlhbnQ9e3NpemUgPT09ICdsYXJnZScgPyAnYm9keVN0cm9uZycgOiAnYm9keVNtYWxsU3Ryb25nJ31cbiAgICAgIHNlbnRpbWVudD17c2VudGltZW50fVxuICAgICAgaHRtbEZvcj17aHRtbEZvcn1cbiAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9UZXh0UG9pbnRlcj5cbiAgKVxuXG50eXBlIExhYmVsUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBBcyBjYW4gaGVscCB5b3UgdG8gZGVmaW5lIGEgbGFiZWwgb3IgYSBsZWdlbmQgaW4gY2FzZSB5b3UgYXJlIHVzaW5nIGl0IGluc2lkZSBhIGZpZWxkc2V0XG4gICAqL1xuICBhcz86ICdsYWJlbCcgfCAnbGVnZW5kJ1xuICBjaGlsZHJlbj86IHN0cmluZ1xuICBsYWJlbERlc2NyaXB0aW9uPzogUmVhY3ROb2RlXG4gIHJlcXVpcmVkPzogYm9vbGVhblxuICBzaXplPzogJ3NtYWxsJyB8ICdtZWRpdW0nIHwgJ2xhcmdlJ1xuICBodG1sRm9yPzogc3RyaW5nXG4gIGlkPzogc3RyaW5nXG4gIHNlbnRpbWVudD86IENvbXBvbmVudFByb3BzPHR5cGVvZiBUZXh0Plsnc2VudGltZW50J11cbiAgZGlzYWJsZWQ/OiBib29sZWFuXG59XG5cbi8qKlxuICogTGFiZWwgaXMgdXNlZCBpbnNpZGUgYWxsIG9mIG91ciBpbnB1dCBjb21wb25lbnRzLCBidXQgaXQgY2FuIGJlIHVzZWQgb3V0c2lkZSBmb3IgZGVzaWduIHB1cnBvc2VzXG4gKi9cbmV4cG9ydCBjb25zdCBMYWJlbCA9ICh7XG4gIGFzID0gJ2xhYmVsJyxcbiAgY2hpbGRyZW4sXG4gIGxhYmVsRGVzY3JpcHRpb24sXG4gIHJlcXVpcmVkLFxuICBzaXplID0gJ2xhcmdlJyxcbiAgaHRtbEZvcixcbiAgaWQsXG4gIHNlbnRpbWVudCA9ICduZXV0cmFsJyxcbiAgZGlzYWJsZWQsXG59OiBMYWJlbFByb3BzKSA9PlxuICBsYWJlbERlc2NyaXB0aW9uID8gKFxuICAgIDxTdGFjayBkaXJlY3Rpb249XCJyb3dcIiBnYXA9XCIxXCIgYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgPExhYmVsUmVxdWlyZWRPck5vdFxuICAgICAgICByZXF1aXJlZD17cmVxdWlyZWR9XG4gICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgIGh0bWxGb3I9e2h0bWxGb3J9XG4gICAgICAgIGlkPXtpZH1cbiAgICAgICAgYXM9e2FzfVxuICAgICAgICBzZW50aW1lbnQ9e3NlbnRpbWVudH1cbiAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgPlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L0xhYmVsUmVxdWlyZWRPck5vdD5cbiAgICAgIHt0eXBlb2YgbGFiZWxEZXNjcmlwdGlvbiA9PT0gJ3N0cmluZycgPyAoXG4gICAgICAgIDxUZXh0IGFzPVwic3BhblwiIHZhcmlhbnQ9XCJib2R5U21hbGxcIj5cbiAgICAgICAgICB7bGFiZWxEZXNjcmlwdGlvbn1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgKSA6IChcbiAgICAgICAgbGFiZWxEZXNjcmlwdGlvblxuICAgICAgKX1cbiAgICA8L1N0YWNrPlxuICApIDogKFxuICAgIDxMYWJlbFJlcXVpcmVkT3JOb3RcbiAgICAgIHJlcXVpcmVkPXtyZXF1aXJlZH1cbiAgICAgIHNpemU9e3NpemV9XG4gICAgICBodG1sRm9yPXtodG1sRm9yfVxuICAgICAgaWQ9e2lkfVxuICAgICAgYXM9e2FzfVxuICAgICAgc2VudGltZW50PXtzZW50aW1lbnR9XG4gICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvTGFiZWxSZXF1aXJlZE9yTm90PlxuICApXG4iXX0= */"));
 const LabelRequiredOrNot = ({
   children,
   required,
   id,
   size,
-  htmlFor
+  htmlFor,
+  as,
+  sentiment,
+  disabled
 }) => required ? /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { direction: "row", gap: "0.5", alignItems: "start", children: [
-  /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "label", id, variant: size === "large" ? "bodyStrong" : "bodySmallStrong", sentiment: "neutral", htmlFor, prominence: "strong", children }),
-  /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "span", variant: size === "large" ? "bodyStrong" : "bodySmallStrong", sentiment: "danger", "aria-label": "required", children: "*" })
-] }) : /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "label", id, variant: size === "large" ? "bodyStrong" : "bodySmallStrong", sentiment: "neutral", htmlFor, prominence: "strong", children });
+  /* @__PURE__ */ jsxRuntime.jsx(TextPointer, { as: as === "label" ? "label" : "legend", id, variant: size === "large" ? "bodyStrong" : "bodySmallStrong", sentiment, htmlFor, disabled, children }),
+  /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "span", variant: size === "large" ? "bodyStrong" : "bodySmallStrong", sentiment: "danger", "aria-label": "required", disabled, children: "*" })
+] }) : /* @__PURE__ */ jsxRuntime.jsx(TextPointer, { as: as === "label" ? "label" : "legend", id, variant: size === "large" ? "bodyStrong" : "bodySmallStrong", sentiment, htmlFor, disabled, children });
 const Label = ({
+  as = "label",
   children,
   labelDescription,
   required,
   size = "large",
   htmlFor,
-  id
+  id,
+  sentiment = "neutral",
+  disabled
 }) => labelDescription ? /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { direction: "row", gap: "1", alignItems: "center", children: [
-  /* @__PURE__ */ jsxRuntime.jsx(LabelRequiredOrNot, { required, size, htmlFor, id, children }),
+  /* @__PURE__ */ jsxRuntime.jsx(LabelRequiredOrNot, { required, size, htmlFor, id, as, sentiment, disabled, children }),
   typeof labelDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "span", variant: "bodySmall", children: labelDescription }) : labelDescription
-] }) : /* @__PURE__ */ jsxRuntime.jsx(LabelRequiredOrNot, { required, size, htmlFor, id, children });
+] }) : /* @__PURE__ */ jsxRuntime.jsx(LabelRequiredOrNot, { required, size, htmlFor, id, as, sentiment, disabled, children });
 exports.Label = Label;

package/dist/components/Label/index.d.ts

@@ -1,14 +1,21 @@
-import type { ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
+import { Text } from '../Text';
 type LabelProps = {
+    /**
+     * As can help you to define a label or a legend in case you are using it inside a fieldset
+     */
+    as?: 'label' | 'legend';
     children?: string;
     labelDescription?: ReactNode;
     required?: boolean;
     size?: 'small' | 'medium' | 'large';
     htmlFor?: string;
     id?: string;
+    sentiment?: ComponentProps<typeof Text>['sentiment'];
+    disabled?: boolean;
 };
 /**
  * Label is used inside all of our input components, but it can be used outside for design purposes
  */
-export declare const Label: ({ children, labelDescription, required, size, htmlFor, id, }: LabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Label: ({ as, children, labelDescription, required, size, htmlFor, id, sentiment, disabled, }: LabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Label/index.js

@@ -1,27 +1,51 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import _styled from "@emotion/styled/base";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
+const TextPointer = /* @__PURE__ */ _styled(Text, process.env.NODE_ENV === "production" ? {
+  target: "eranz9i0"
+} : {
+  target: "eranz9i0",
+  label: "TextPointer"
+})("cursor:", ({
+  disabled,
+  htmlFor
+}) => {
+  if (disabled) {
+    return "not-allowed";
+  }
+  if (htmlFor) {
+    return "pointer";
+  }
+  return "text";
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0xhYmVsL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLZ0MiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvTGFiZWwvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IENvbXBvbmVudFByb3BzLCBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IFN0YWNrIH0gZnJvbSAnLi4vU3RhY2snXG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi4vVGV4dCdcblxuY29uc3QgVGV4dFBvaW50ZXIgPSBzdHlsZWQoVGV4dClgXG4gIGN1cnNvcjogJHsoeyBkaXNhYmxlZCwgaHRtbEZvciB9KSA9PiB7XG4gICAgaWYgKGRpc2FibGVkKSB7XG4gICAgICByZXR1cm4gJ25vdC1hbGxvd2VkJ1xuICAgIH1cblxuICAgIGlmIChodG1sRm9yKSB7XG4gICAgICByZXR1cm4gJ3BvaW50ZXInXG4gICAgfVxuXG4gICAgcmV0dXJuICd0ZXh0J1xuICB9fTtcbmBcblxuY29uc3QgTGFiZWxSZXF1aXJlZE9yTm90ID0gKHtcbiAgY2hpbGRyZW4sXG4gIHJlcXVpcmVkLFxuICBpZCxcbiAgc2l6ZSxcbiAgaHRtbEZvcixcbiAgYXMsXG4gIHNlbnRpbWVudCxcbiAgZGlzYWJsZWQsXG59OiBMYWJlbFByb3BzKSA9PlxuICByZXF1aXJlZCA/IChcbiAgICA8U3RhY2sgZGlyZWN0aW9uPVwicm93XCIgZ2FwPVwiMC41XCIgYWxpZ25JdGVtcz1cInN0YXJ0XCI+XG4gICAgICA8VGV4dFBvaW50ZXJcbiAgICAgICAgYXM9e2FzID09PSAnbGFiZWwnID8gJ2xhYmVsJyA6ICdsZWdlbmQnfVxuICAgICAgICBpZD17aWR9XG4gICAgICAgIHZhcmlhbnQ9e3NpemUgPT09ICdsYXJnZScgPyAnYm9keVN0cm9uZycgOiAnYm9keVNtYWxsU3Ryb25nJ31cbiAgICAgICAgc2VudGltZW50PXtzZW50aW1lbnR9XG4gICAgICAgIGh0bWxGb3I9e2h0bWxGb3J9XG4gICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9UZXh0UG9pbnRlcj5cbiAgICAgIDxUZXh0XG4gICAgICAgIGFzPVwic3BhblwiXG4gICAgICAgIHZhcmlhbnQ9e3NpemUgPT09ICdsYXJnZScgPyAnYm9keVN0cm9uZycgOiAnYm9keVNtYWxsU3Ryb25nJ31cbiAgICAgICAgc2VudGltZW50PVwiZGFuZ2VyXCJcbiAgICAgICAgYXJpYS1sYWJlbD1cInJlcXVpcmVkXCJcbiAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgPlxuICAgICAgICAqXG4gICAgICA8L1RleHQ+XG4gICAgPC9TdGFjaz5cbiAgKSA6IChcbiAgICA8VGV4dFBvaW50ZXJcbiAgICAgIGFzPXthcyA9PT0gJ2xhYmVsJyA/ICdsYWJlbCcgOiAnbGVnZW5kJ31cbiAgICAgIGlkPXtpZH1cbiAgICAgIHZhcmlhbnQ9e3NpemUgPT09ICdsYXJnZScgPyAnYm9keVN0cm9uZycgOiAnYm9keVNtYWxsU3Ryb25nJ31cbiAgICAgIHNlbnRpbWVudD17c2VudGltZW50fVxuICAgICAgaHRtbEZvcj17aHRtbEZvcn1cbiAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9UZXh0UG9pbnRlcj5cbiAgKVxuXG50eXBlIExhYmVsUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBBcyBjYW4gaGVscCB5b3UgdG8gZGVmaW5lIGEgbGFiZWwgb3IgYSBsZWdlbmQgaW4gY2FzZSB5b3UgYXJlIHVzaW5nIGl0IGluc2lkZSBhIGZpZWxkc2V0XG4gICAqL1xuICBhcz86ICdsYWJlbCcgfCAnbGVnZW5kJ1xuICBjaGlsZHJlbj86IHN0cmluZ1xuICBsYWJlbERlc2NyaXB0aW9uPzogUmVhY3ROb2RlXG4gIHJlcXVpcmVkPzogYm9vbGVhblxuICBzaXplPzogJ3NtYWxsJyB8ICdtZWRpdW0nIHwgJ2xhcmdlJ1xuICBodG1sRm9yPzogc3RyaW5nXG4gIGlkPzogc3RyaW5nXG4gIHNlbnRpbWVudD86IENvbXBvbmVudFByb3BzPHR5cGVvZiBUZXh0Plsnc2VudGltZW50J11cbiAgZGlzYWJsZWQ/OiBib29sZWFuXG59XG5cbi8qKlxuICogTGFiZWwgaXMgdXNlZCBpbnNpZGUgYWxsIG9mIG91ciBpbnB1dCBjb21wb25lbnRzLCBidXQgaXQgY2FuIGJlIHVzZWQgb3V0c2lkZSBmb3IgZGVzaWduIHB1cnBvc2VzXG4gKi9cbmV4cG9ydCBjb25zdCBMYWJlbCA9ICh7XG4gIGFzID0gJ2xhYmVsJyxcbiAgY2hpbGRyZW4sXG4gIGxhYmVsRGVzY3JpcHRpb24sXG4gIHJlcXVpcmVkLFxuICBzaXplID0gJ2xhcmdlJyxcbiAgaHRtbEZvcixcbiAgaWQsXG4gIHNlbnRpbWVudCA9ICduZXV0cmFsJyxcbiAgZGlzYWJsZWQsXG59OiBMYWJlbFByb3BzKSA9PlxuICBsYWJlbERlc2NyaXB0aW9uID8gKFxuICAgIDxTdGFjayBkaXJlY3Rpb249XCJyb3dcIiBnYXA9XCIxXCIgYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgPExhYmVsUmVxdWlyZWRPck5vdFxuICAgICAgICByZXF1aXJlZD17cmVxdWlyZWR9XG4gICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgIGh0bWxGb3I9e2h0bWxGb3J9XG4gICAgICAgIGlkPXtpZH1cbiAgICAgICAgYXM9e2FzfVxuICAgICAgICBzZW50aW1lbnQ9e3NlbnRpbWVudH1cbiAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgPlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L0xhYmVsUmVxdWlyZWRPck5vdD5cbiAgICAgIHt0eXBlb2YgbGFiZWxEZXNjcmlwdGlvbiA9PT0gJ3N0cmluZycgPyAoXG4gICAgICAgIDxUZXh0IGFzPVwic3BhblwiIHZhcmlhbnQ9XCJib2R5U21hbGxcIj5cbiAgICAgICAgICB7bGFiZWxEZXNjcmlwdGlvbn1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgKSA6IChcbiAgICAgICAgbGFiZWxEZXNjcmlwdGlvblxuICAgICAgKX1cbiAgICA8L1N0YWNrPlxuICApIDogKFxuICAgIDxMYWJlbFJlcXVpcmVkT3JOb3RcbiAgICAgIHJlcXVpcmVkPXtyZXF1aXJlZH1cbiAgICAgIHNpemU9e3NpemV9XG4gICAgICBodG1sRm9yPXtodG1sRm9yfVxuICAgICAgaWQ9e2lkfVxuICAgICAgYXM9e2FzfVxuICAgICAgc2VudGltZW50PXtzZW50aW1lbnR9XG4gICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvTGFiZWxSZXF1aXJlZE9yTm90PlxuICApXG4iXX0= */"));
 const LabelRequiredOrNot = ({
   children,
   required,
   id,
   size,
-  htmlFor
+  htmlFor,
+  as,
+  sentiment,
+  disabled
 }) => required ? /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "0.5", alignItems: "start", children: [
-  /* @__PURE__ */ jsx(Text, { as: "label", id, variant: size === "large" ? "bodyStrong" : "bodySmallStrong", sentiment: "neutral", htmlFor, prominence: "strong", children }),
-  /* @__PURE__ */ jsx(Text, { as: "span", variant: size === "large" ? "bodyStrong" : "bodySmallStrong", sentiment: "danger", "aria-label": "required", children: "*" })
-] }) : /* @__PURE__ */ jsx(Text, { as: "label", id, variant: size === "large" ? "bodyStrong" : "bodySmallStrong", sentiment: "neutral", htmlFor, prominence: "strong", children });
+  /* @__PURE__ */ jsx(TextPointer, { as: as === "label" ? "label" : "legend", id, variant: size === "large" ? "bodyStrong" : "bodySmallStrong", sentiment, htmlFor, disabled, children }),
+  /* @__PURE__ */ jsx(Text, { as: "span", variant: size === "large" ? "bodyStrong" : "bodySmallStrong", sentiment: "danger", "aria-label": "required", disabled, children: "*" })
+] }) : /* @__PURE__ */ jsx(TextPointer, { as: as === "label" ? "label" : "legend", id, variant: size === "large" ? "bodyStrong" : "bodySmallStrong", sentiment, htmlFor, disabled, children });
 const Label = ({
+  as = "label",
   children,
   labelDescription,
   required,
   size = "large",
   htmlFor,
-  id
+  id,
+  sentiment = "neutral",
+  disabled
 }) => labelDescription ? /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "1", alignItems: "center", children: [
-  /* @__PURE__ */ jsx(LabelRequiredOrNot, { required, size, htmlFor, id, children }),
+  /* @__PURE__ */ jsx(LabelRequiredOrNot, { required, size, htmlFor, id, as, sentiment, disabled, children }),
   typeof labelDescription === "string" ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "bodySmall", children: labelDescription }) : labelDescription
-] }) : /* @__PURE__ */ jsx(LabelRequiredOrNot, { required, size, htmlFor, id, children });
+] }) : /* @__PURE__ */ jsx(LabelRequiredOrNot, { required, size, htmlFor, id, as, sentiment, disabled, children });
 export {
   Label
 };

package/dist/components/List/ListContext.cjs

@@ -24,9 +24,9 @@ const ListProvider = ({
 }) => {
   const [expandedRowIds, setExpandedRowIds] = React.useState({});
   const [selectedRowIds, setSelectedRowIds] = React.useState({});
-  const [lastCheckedIndex, setLastCheckedIndex] = React.useState(null);
-  const [inRange, setInRange] = React.useState(/* @__PURE__ */ new Set([]));
-  const refList = React.useRef(/* @__PURE__ */ new Map());
+  const [lastCheckedCheckbox, setLastCheckedCheckbox] = React.useState();
+  const [inRange, setInRange] = React.useState([]);
+  const [refList, setRefList] = React.useState([]);
   const registerExpandableRow = React.useCallback((rowId, expanded = false) => {
     setExpandedRowIds((current) => ({
       ...current,
@@ -102,77 +102,79 @@ const ListProvider = ({
   }, [allRowSelectValue, unselectAll, selectAll]);
   const subscribeHandler = React.useCallback(() => {
     const handlers = [];
-    if (refList.current) {
-      const handleHover = (checkbox, event) => {
-        const isShiftPressed = event.shiftKey;
-        const isHoverActive = isShiftPressed && lastCheckedIndex !== null && !checkbox.disabled;
-        if (isHoverActive) {
-          setInRange((prev) => /* @__PURE__ */ new Set([...prev, checkbox.value]));
-        }
-        if (!lastCheckedIndex && !checkbox.disabled) {
-          setLastCheckedIndex(checkbox.value);
-        }
-      };
-      const handleClickRange = (checkbox) => {
-        const shouldShiftEvent = inRange.size > 0;
-        const isClickInsideRange = inRange.has(checkbox.value);
-        if (shouldShiftEvent && isClickInsideRange) {
-          let checkboxRows = {};
-          refList.current.forEach((value2, key) => {
-            if (inRange.has(key)) {
-              checkboxRows = {
-                ...checkboxRows,
-                // handle the conflict event ( click and onChange in the same time on the last checkbox click)
-                [key]: key === checkbox.value ? !value2.checked : value2.checked
-              };
+    const updatedRefList = [...new Set(refList.filter((checkbox) => document.contains(checkbox.current) && checkbox.current))];
+    setRefList(updatedRefList);
+    const handleHover = (index, isShiftPressed, leaving) => {
+      const newRange = [];
+      if (lastCheckedCheckbox) {
+        const targetCheckbox = updatedRefList.find((checkbox) => checkbox.current?.value === lastCheckedCheckbox);
+        if (isShiftPressed && targetCheckbox && !leaving) {
+          const lastCheckedIndex = updatedRefList.indexOf(targetCheckbox);
+          const start = Math.min(lastCheckedIndex, index) - (Math.min(lastCheckedIndex, index) === index ? 1 : 0);
+          const end = Math.max(lastCheckedIndex, index);
+          updatedRefList.forEach((checkbox, i) => {
+            if (!checkbox.current?.disabled && i > start && i < end) {
+              newRange.push(checkbox.current?.value);
             }
           });
-          const state = checkStateOfCheckboxs(checkboxRows);
-          const checkboxIds = Object.keys(checkboxRows);
-          if (state === true) {
-            selectRows(checkboxIds, false);
-          }
-          if ([false, "indeterminate"].includes(state)) {
-            selectRows(checkboxIds, true);
-          }
         }
-        setTimeout(() => {
-          setInRange(/* @__PURE__ */ new Set([]));
-          setLastCheckedIndex(checkbox.value);
-        }, 1);
-      };
-      const handleOnChange = (checkbox) => {
-        const shouldHandleEvent = inRange.size === 0;
-        if (shouldHandleEvent) {
-          selectRows([checkbox.value], !checkbox.checked);
+      }
+      setInRange(newRange);
+    };
+    const handleClickRange = (currentCheckbox, index, isShiftPressed) => {
+      if (isShiftPressed) {
+        const checkboxesInRange = [];
+        const targetCheckbox = updatedRefList.find((checkbox) => checkbox.current?.value === lastCheckedCheckbox);
+        const lastCheckedIndex = targetCheckbox ? updatedRefList.indexOf(targetCheckbox) : void 0;
+        if (lastCheckedIndex !== void 0) {
+          const start = Math.min(lastCheckedIndex, index) - (Math.min(lastCheckedIndex, index) === index ? 1 : 0);
+          const end = Math.max(lastCheckedIndex, index);
+          updatedRefList.forEach((checkbox, key) => {
+            if (start < key && key <= end) {
+              if (!checkbox.current?.disabled) {
+                checkboxesInRange.push(checkbox.current?.value);
+              }
+            }
+          });
+          selectRows(checkboxesInRange, currentCheckbox.checked);
+          setLastCheckedCheckbox(currentCheckbox.value);
         }
-        setLastCheckedIndex(checkbox.value);
+      } else if (index === 0) setLastCheckedCheckbox(void 0);
+      setTimeout(() => {
+        setInRange([]);
+        setLastCheckedCheckbox(currentCheckbox.value);
+      }, 1);
+    };
+    refList.forEach((checkbox, index) => {
+      const clickHandler = function clickHandler2(event) {
+        handleClickRange(this, index, event.shiftKey);
       };
-      refList.current.forEach((checkbox) => {
-        const clickHandler = (event) => {
-          handleClickRange(event.currentTarget);
-        };
-        const hoverHandler = (event) => {
-          handleHover(event.currentTarget, event);
-        };
-        const changeHandler = (event) => {
-          handleOnChange(event.currentTarget);
-        };
-        checkbox.addEventListener("change", changeHandler);
-        checkbox.addEventListener("click", clickHandler);
-        checkbox.addEventListener("mouseover", hoverHandler);
+      const hoverEnteringHandler = (event) => handleHover(index, event.shiftKey, false);
+      const hoverLeavingHandler = (event) => handleHover(index, event.shiftKey, true);
+      if (checkbox.current) {
+        checkbox.current.addEventListener("click", clickHandler);
+        checkbox.current.addEventListener("mousemove", hoverEnteringHandler);
+        checkbox.current.addEventListener("mouseout", hoverLeavingHandler);
         handlers.push(() => {
-          checkbox.removeEventListener("change", changeHandler);
-          checkbox.removeEventListener("click", clickHandler);
-          checkbox.removeEventListener("mouseover", hoverHandler);
+          if (checkbox.current) {
+            checkbox.current.removeEventListener("click", clickHandler);
+            checkbox.current.removeEventListener("mouseout", hoverEnteringHandler);
+            checkbox.current.removeEventListener("mousemove", hoverLeavingHandler);
+          }
         });
-      });
-    }
+      }
+    });
     return () => {
       handlers.forEach((cleanup) => cleanup());
     };
-  }, [inRange, lastCheckedIndex, selectRows]);
-  React.useEffect(subscribeHandler, [subscribeHandler]);
+  }, [lastCheckedCheckbox, selectRows]);
+  React.useEffect(() => {
+    subscribeHandler();
+  }, [subscribeHandler]);
+  const handleOnChange = React.useCallback((value2, checked) => {
+    selectRows([value2], !checked);
+    setLastCheckedCheckbox(value2);
+  }, [selectRows]);
   const value = React.useMemo(() => ({
     allRowSelectValue,
     selectAllHandler,
@@ -183,7 +185,6 @@ const ListProvider = ({
     expandedRowIds,
     expandRow,
     inRange,
-    mapCheckbox: refList.current,
     registerExpandableRow,
     registerSelectableRow,
     selectable,
@@ -191,8 +192,11 @@ const ListProvider = ({
     selectedRowIds,
     selectRow,
     unselectAll,
-    unselectRow
-  }), [allRowSelectValue, selectAllHandler, subscribeHandler, collapseRow, columns, expandButton, expandedRowIds, expandRow, inRange, refList, registerExpandableRow, registerSelectableRow, selectable, selectAll, selectedRowIds, selectRow, unselectAll, unselectRow]);
+    unselectRow,
+    refList,
+    setRefList,
+    handleOnChange
+  }), [allRowSelectValue, selectAllHandler, subscribeHandler, collapseRow, columns, expandButton, expandedRowIds, expandRow, inRange, refList, registerExpandableRow, registerSelectableRow, selectable, selectAll, selectedRowIds, selectRow, unselectAll, unselectRow, handleOnChange]);
   return /* @__PURE__ */ jsxRuntime.jsx(ListContext.Provider, { value, children });
 };
 const useListContext = () => {

package/dist/components/List/ListContext.d.ts

@@ -1,8 +1,7 @@
-import type { ComponentProps, Dispatch, ChangeEvent as ReactChangeEvent, ReactNode, SetStateAction } from 'react';
+import type { ComponentProps, Dispatch, ChangeEvent as ReactChangeEvent, ReactNode, RefObject, SetStateAction } from 'react';
 import type { Checkbox } from '../Checkbox';
 import type { ColumnProps } from './types';
 type RowState = Record<string | number, boolean>;
-type MapCheckbox = Map<string | number, HTMLInputElement>;
 export type ListContextValue = {
     /**
      * @returns an unregister function
@@ -20,14 +19,16 @@ export type ListContextValue = {
     selectAllHandler: (event: ReactChangeEvent<HTMLInputElement>) => void;
     subscribeHandler: () => void;
     columns: ColumnProps[];
-    inRange: Set<number | string>;
-    mapCheckbox: MapCheckbox;
+    inRange: string[];
     selectable: boolean;
     selectAll: () => void;
     selectedRowIds: RowState;
     selectRow: (rowId: string) => void;
     unselectAll: () => void;
     unselectRow: (rowId: string) => void;
+    refList: RefObject<HTMLInputElement>[];
+    setRefList: Dispatch<SetStateAction<RefObject<HTMLInputElement>[]>>;
+    handleOnChange: (value: string, checked: boolean) => void;
 };
 export type ListProviderProps = {
     children: ReactNode;

package/dist/components/List/ListContext.js

@@ -1,5 +1,5 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useContext, createContext, useState, useRef, useCallback, useMemo, useEffect } from "react";
+import { useContext, createContext, useState, useCallback, useMemo, useEffect } from "react";
 const ListContext = createContext(void 0);
 const checkStateOfCheckboxs = (ids) => {
   const selectableRowCount = Object.keys(ids).length;
@@ -22,9 +22,9 @@ const ListProvider = ({
 }) => {
   const [expandedRowIds, setExpandedRowIds] = useState({});
   const [selectedRowIds, setSelectedRowIds] = useState({});
-  const [lastCheckedIndex, setLastCheckedIndex] = useState(null);
-  const [inRange, setInRange] = useState(/* @__PURE__ */ new Set([]));
-  const refList = useRef(/* @__PURE__ */ new Map());
+  const [lastCheckedCheckbox, setLastCheckedCheckbox] = useState();
+  const [inRange, setInRange] = useState([]);
+  const [refList, setRefList] = useState([]);
   const registerExpandableRow = useCallback((rowId, expanded = false) => {
     setExpandedRowIds((current) => ({
       ...current,
@@ -100,77 +100,79 @@ const ListProvider = ({
   }, [allRowSelectValue, unselectAll, selectAll]);
   const subscribeHandler = useCallback(() => {
     const handlers = [];
-    if (refList.current) {
-      const handleHover = (checkbox, event) => {
-        const isShiftPressed = event.shiftKey;
-        const isHoverActive = isShiftPressed && lastCheckedIndex !== null && !checkbox.disabled;
-        if (isHoverActive) {
-          setInRange((prev) => /* @__PURE__ */ new Set([...prev, checkbox.value]));
-        }
-        if (!lastCheckedIndex && !checkbox.disabled) {
-          setLastCheckedIndex(checkbox.value);
-        }
-      };
-      const handleClickRange = (checkbox) => {
-        const shouldShiftEvent = inRange.size > 0;
-        const isClickInsideRange = inRange.has(checkbox.value);
-        if (shouldShiftEvent && isClickInsideRange) {
-          let checkboxRows = {};
-          refList.current.forEach((value2, key) => {
-            if (inRange.has(key)) {
-              checkboxRows = {
-                ...checkboxRows,
-                // handle the conflict event ( click and onChange in the same time on the last checkbox click)
-                [key]: key === checkbox.value ? !value2.checked : value2.checked
-              };
+    const updatedRefList = [...new Set(refList.filter((checkbox) => document.contains(checkbox.current) && checkbox.current))];
+    setRefList(updatedRefList);
+    const handleHover = (index, isShiftPressed, leaving) => {
+      const newRange = [];
+      if (lastCheckedCheckbox) {
+        const targetCheckbox = updatedRefList.find((checkbox) => checkbox.current?.value === lastCheckedCheckbox);
+        if (isShiftPressed && targetCheckbox && !leaving) {
+          const lastCheckedIndex = updatedRefList.indexOf(targetCheckbox);
+          const start = Math.min(lastCheckedIndex, index) - (Math.min(lastCheckedIndex, index) === index ? 1 : 0);
+          const end = Math.max(lastCheckedIndex, index);
+          updatedRefList.forEach((checkbox, i) => {
+            if (!checkbox.current?.disabled && i > start && i < end) {
+              newRange.push(checkbox.current?.value);
             }
           });
-          const state = checkStateOfCheckboxs(checkboxRows);
-          const checkboxIds = Object.keys(checkboxRows);
-          if (state === true) {
-            selectRows(checkboxIds, false);
-          }
-          if ([false, "indeterminate"].includes(state)) {
-            selectRows(checkboxIds, true);
-          }
         }
-        setTimeout(() => {
-          setInRange(/* @__PURE__ */ new Set([]));
-          setLastCheckedIndex(checkbox.value);
-        }, 1);
-      };
-      const handleOnChange = (checkbox) => {
-        const shouldHandleEvent = inRange.size === 0;
-        if (shouldHandleEvent) {
-          selectRows([checkbox.value], !checkbox.checked);
+      }
+      setInRange(newRange);
+    };
+    const handleClickRange = (currentCheckbox, index, isShiftPressed) => {
+      if (isShiftPressed) {
+        const checkboxesInRange = [];
+        const targetCheckbox = updatedRefList.find((checkbox) => checkbox.current?.value === lastCheckedCheckbox);
+        const lastCheckedIndex = targetCheckbox ? updatedRefList.indexOf(targetCheckbox) : void 0;
+        if (lastCheckedIndex !== void 0) {
+          const start = Math.min(lastCheckedIndex, index) - (Math.min(lastCheckedIndex, index) === index ? 1 : 0);
+          const end = Math.max(lastCheckedIndex, index);
+          updatedRefList.forEach((checkbox, key) => {
+            if (start < key && key <= end) {
+              if (!checkbox.current?.disabled) {
+                checkboxesInRange.push(checkbox.current?.value);
+              }
+            }
+          });
+          selectRows(checkboxesInRange, currentCheckbox.checked);
+          setLastCheckedCheckbox(currentCheckbox.value);
         }
-        setLastCheckedIndex(checkbox.value);
+      } else if (index === 0) setLastCheckedCheckbox(void 0);
+      setTimeout(() => {
+        setInRange([]);
+        setLastCheckedCheckbox(currentCheckbox.value);
+      }, 1);
+    };
+    refList.forEach((checkbox, index) => {
+      const clickHandler = function clickHandler2(event) {
+        handleClickRange(this, index, event.shiftKey);
       };
-      refList.current.forEach((checkbox) => {
-        const clickHandler = (event) => {
-          handleClickRange(event.currentTarget);
-        };
-        const hoverHandler = (event) => {
-          handleHover(event.currentTarget, event);
-        };
-        const changeHandler = (event) => {
-          handleOnChange(event.currentTarget);
-        };
-        checkbox.addEventListener("change", changeHandler);
-        checkbox.addEventListener("click", clickHandler);
-        checkbox.addEventListener("mouseover", hoverHandler);
+      const hoverEnteringHandler = (event) => handleHover(index, event.shiftKey, false);
+      const hoverLeavingHandler = (event) => handleHover(index, event.shiftKey, true);
+      if (checkbox.current) {
+        checkbox.current.addEventListener("click", clickHandler);
+        checkbox.current.addEventListener("mousemove", hoverEnteringHandler);
+        checkbox.current.addEventListener("mouseout", hoverLeavingHandler);
         handlers.push(() => {
-          checkbox.removeEventListener("change", changeHandler);
-          checkbox.removeEventListener("click", clickHandler);
-          checkbox.removeEventListener("mouseover", hoverHandler);
+          if (checkbox.current) {
+            checkbox.current.removeEventListener("click", clickHandler);
+            checkbox.current.removeEventListener("mouseout", hoverEnteringHandler);
+            checkbox.current.removeEventListener("mousemove", hoverLeavingHandler);
+          }
         });
-      });
-    }
+      }
+    });
     return () => {
       handlers.forEach((cleanup) => cleanup());
     };
-  }, [inRange, lastCheckedIndex, selectRows]);
-  useEffect(subscribeHandler, [subscribeHandler]);
+  }, [lastCheckedCheckbox, selectRows]);
+  useEffect(() => {
+    subscribeHandler();
+  }, [subscribeHandler]);
+  const handleOnChange = useCallback((value2, checked) => {
+    selectRows([value2], !checked);
+    setLastCheckedCheckbox(value2);
+  }, [selectRows]);
   const value = useMemo(() => ({
     allRowSelectValue,
     selectAllHandler,
@@ -181,7 +183,6 @@ const ListProvider = ({
     expandedRowIds,
     expandRow,
     inRange,
-    mapCheckbox: refList.current,
     registerExpandableRow,
     registerSelectableRow,
     selectable,
@@ -189,8 +190,11 @@ const ListProvider = ({
     selectedRowIds,
     selectRow,
     unselectAll,
-    unselectRow
-  }), [allRowSelectValue, selectAllHandler, subscribeHandler, collapseRow, columns, expandButton, expandedRowIds, expandRow, inRange, refList, registerExpandableRow, registerSelectableRow, selectable, selectAll, selectedRowIds, selectRow, unselectAll, unselectRow]);
+    unselectRow,
+    refList,
+    setRefList,
+    handleOnChange
+  }), [allRowSelectValue, selectAllHandler, subscribeHandler, collapseRow, columns, expandButton, expandedRowIds, expandRow, inRange, refList, registerExpandableRow, registerSelectableRow, selectable, selectAll, selectedRowIds, selectRow, unselectAll, unselectRow, handleOnChange]);
   return /* @__PURE__ */ jsx(ListContext.Provider, { value, children });
 };
 const useListContext = () => {