@simplybusiness/mobius 10.3.2 → 10.3.4

package/dist/esm/chunk-N4WQ6522.js

@@ -0,0 +1,125 @@
+import {
+  ErrorMessage
+} from "./chunk-UQVAEWY2.js";
+import {
+  Stack
+} from "./chunk-XH3OJQMW.js";
+import {
+  Icon
+} from "./chunk-TKIP5Q5H.js";
+import {
+  useValidationClasses
+} from "./chunk-DYOFXXZD.js";
+import {
+  spaceDelimitedList
+} from "./chunk-DTWRSP5P.js";
+
+// src/components/Checkbox/Checkbox.tsx
+import { useRef, useId, useState, useEffect } from "react";
+import classNames from "classnames/dedupe";
+import { squareTick, square } from "@simplybusiness/icons";
+import "@simplybusiness/mobius/src/components/Checkbox/Checkbox.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Checkbox = ({ ref, ...props }) => {
+  const {
+    id,
+    label,
+    isDisabled,
+    isRequired,
+    isInvalid,
+    onChange,
+    className,
+    errorMessage,
+    selected,
+    defaultSelected = false,
+    isReadOnly,
+    isLastItem,
+    name,
+    value,
+    ["aria-describedby"]: ariaDescribedBy,
+    ...rest
+  } = props;
+  const [checked, setChecked] = useState(defaultSelected);
+  const fallbackRef = useRef(null);
+  const refObj = ref || fallbackRef;
+  const inputId = useId();
+  const isControlled = typeof selected === "boolean";
+  useEffect(() => {
+    if (isControlled) {
+      setChecked(selected);
+    }
+  }, [selected, isControlled]);
+  const validationClasses = useValidationClasses({ isInvalid });
+  const sharedClasses = classNames(
+    {
+      "--is-disabled": isDisabled,
+      "--is-selected": checked,
+      "--is-required": typeof isRequired === "boolean" && isRequired,
+      "--is-optional": typeof isRequired === "boolean" && !isRequired
+    },
+    validationClasses
+  );
+  const wrapperClasses = classNames(
+    "mobius",
+    "mobius-checkbox",
+    sharedClasses,
+    className
+  );
+  const labelClasses = classNames("mobius-checkbox__label", sharedClasses);
+  const inputClasses = classNames("mobius-checkbox__input", sharedClasses);
+  const iconClasses = classNames("mobius-checkbox__icon", sharedClasses);
+  const errorMessageId = useId();
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    ariaDescribedBy
+  ]);
+  const labelId = useId();
+  const handleChange = (event) => {
+    setChecked(!checked);
+    if (onChange) {
+      onChange(event, isLastItem);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", className: wrapperClasses, children: [
+    /* @__PURE__ */ jsxs("label", { className: labelClasses, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          "aria-describedby": describedBy,
+          "aria-errormessage": shouldErrorMessageShow,
+          "aria-invalid": isInvalid,
+          "aria-labelledby": labelId,
+          readOnly: isReadOnly,
+          disabled: isDisabled,
+          ref: refObj,
+          className: inputClasses,
+          onChange: handleChange,
+          type: "checkbox",
+          checked,
+          required: isRequired,
+          id: id || inputId,
+          name,
+          value,
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon: checked ? squareTick : square,
+          size: "md",
+          className: iconClasses
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { id: labelId, className: "mobius-checkbox__visible-label", children: label })
+    ] }),
+    /* @__PURE__ */ jsx(ErrorMessage, { id: errorMessageId, errorMessage })
+  ] });
+};
+Checkbox.displayName = "Checkbox";
+
+export {
+  Checkbox
+};
+//# sourceMappingURL=chunk-N4WQ6522.js.map

package/dist/esm/chunk-N4WQ6522.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/Checkbox/Checkbox.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport type { ChangeEvent } from \"react\";\nimport { useRef, useId, useState, useEffect } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { squareTick, square } from \"@simplybusiness/icons\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport type { CheckboxElementType, CheckboxProps } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\nimport { Icon } from \"../Icon\";\nimport { Stack } from \"../Stack\";\nimport \"./Checkbox.css\";\n\nexport const Checkbox = ({ ref, ...props }: CheckboxProps) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    isInvalid,\n    onChange,\n    className,\n    errorMessage,\n    selected,\n    defaultSelected = false,\n    isReadOnly,\n    isLastItem,\n    name,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [checked, setChecked] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n\n  const isControlled = typeof selected === \"boolean\";\n  useEffect(() => {\n    if (isControlled) {\n      setChecked(selected);\n    }\n  }, [selected, isControlled]);\n\n  const validationClasses = useValidationClasses({ isInvalid });\n  const sharedClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": checked,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    validationClasses,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius-checkbox\",\n    sharedClasses,\n    className,\n  );\n  const labelClasses = classNames(\"mobius-checkbox__label\", sharedClasses);\n  const inputClasses = classNames(\"mobius-checkbox__input\", sharedClasses);\n  const iconClasses = classNames(\"mobius-checkbox__icon\", sharedClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    setChecked(!checked);\n    if (onChange) {\n      onChange(event, isLastItem);\n    }\n  };\n\n  return (\n    <Stack gap=\"xs\" className={wrapperClasses}>\n      <label className={labelClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          aria-labelledby={labelId}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onChange={handleChange}\n          type=\"checkbox\"\n          checked={checked}\n          required={isRequired}\n          id={id || inputId}\n          name={name}\n          value={value}\n          {...rest}\n        />\n        <Icon\n          icon={checked ? squareTick : square}\n          size=\"md\"\n          className={iconClasses}\n        />\n        <span id={labelId} className=\"mobius-checkbox__visible-label\">\n          {label}\n        </span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </Stack>\n  );\n};\n\nCheckbox.displayName = \"Checkbox\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAGA,SAAS,QAAQ,OAAO,UAAU,iBAAiB;AACnD,OAAO,gBAAgB;AACvB,SAAS,YAAY,cAAc;AAOnC,OAAO;AAsED,SACE,KADF;AApEC,IAAM,WAAW,CAAC,EAAE,KAAK,GAAG,MAAM,MAAqB;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,CAAC,kBAAkB,GAAG;AAAA,IACtB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,eAAe;AAC/D,QAAM,cAAc,OAAyB,IAAI;AACjD,QAAM,SAAS,OAAO;AACtB,QAAM,UAAU,MAAM;AAEtB,QAAM,eAAe,OAAO,aAAa;AACzC,YAAU,MAAM;AACd,QAAI,cAAc;AAChB,iBAAW,QAAQ;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,QAAM,oBAAoB,qBAAqB,EAAE,UAAU,CAAC;AAC5D,QAAM,gBAAgB;AAAA,IACpB;AAAA,MACE,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,iBAAiB,OAAO,eAAe,aAAa;AAAA,MACpD,iBAAiB,OAAO,eAAe,aAAa,CAAC;AAAA,IACvD;AAAA,IACA;AAAA,EACF;AAEA,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,eAAe,WAAW,0BAA0B,aAAa;AACvE,QAAM,eAAe,WAAW,0BAA0B,aAAa;AACvE,QAAM,cAAc,WAAW,yBAAyB,aAAa;AACrE,QAAM,iBAAiB,MAAM;AAC7B,QAAM,yBAAyB,eAAe,iBAAiB;AAC/D,QAAM,cAAc,mBAAmB;AAAA,IACrC;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,UAAU,MAAM;AAEtB,QAAM,eAAe,CAAC,UAA4C;AAChE,eAAW,CAAC,OAAO;AACnB,QAAI,UAAU;AACZ,eAAS,OAAO,UAAU;AAAA,IAC5B;AAAA,EACF;AAEA,SACE,qBAAC,SAAM,KAAI,MAAK,WAAW,gBACzB;AAAA,yBAAC,WAAM,WAAW,cAChB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,oBAAkB;AAAA,UAClB,qBAAmB;AAAA,UACnB,gBAAc;AAAA,UACd,mBAAiB;AAAA,UACjB,UAAU;AAAA,UACV,UAAU;AAAA,UACV,KAAK;AAAA,UACL,WAAW;AAAA,UACX,UAAU;AAAA,UACV,MAAK;AAAA,UACL;AAAA,UACA,UAAU;AAAA,UACV,IAAI,MAAM;AAAA,UACV;AAAA,UACA;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,UAAU,aAAa;AAAA,UAC7B,MAAK;AAAA,UACL,WAAW;AAAA;AAAA,MACb;AAAA,MACA,oBAAC,UAAK,IAAI,SAAS,WAAU,kCAC1B,iBACH;AAAA,OACF;AAAA,IACA,oBAAC,gBAAa,IAAI,gBAAgB,cAA4B;AAAA,KAChE;AAEJ;AAEA,SAAS,cAAc;",
+  "names": []
+}

package/dist/esm/{chunk-CNOF66SV.js → chunk-NGNVAFBJ.js}

@@ -1,9 +1,9 @@
-import {
-  Label
-} from "./chunk-ZN7OWLZY.js";
 import {
   numberFormatter
 } from "./chunk-4SIR6D4L.js";
+import {
+  Label
+} from "./chunk-ZN7OWLZY.js";
 import {
   useLabel
 } from "./chunk-YLEFK7S2.js";
@@ -101,4 +101,4 @@ var Slider = (props) => {
 export {
   Slider
 };
-//# sourceMappingURL=chunk-CNOF66SV.js.map
+//# sourceMappingURL=chunk-NGNVAFBJ.js.map

package/dist/esm/chunk-NOQ27VLY.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-NOQ27VLY.js.map

package/dist/esm/chunk-NOQ27VLY.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/chunk-ONDOONBM.js

@@ -0,0 +1,101 @@
+import {
+  Accordion
+} from "./chunk-7JT4DKQA.js";
+import {
+  TextOrHTML
+} from "./chunk-DYTHXKMX.js";
+import {
+  useBreakpoint
+} from "./chunk-7FQ7SXK4.js";
+
+// src/components/ExpandableText/ExpandableText.tsx
+import classNames from "classnames/dedupe";
+import { useEffect, useId, useRef, useState } from "react";
+import "@simplybusiness/mobius/src/components/ExpandableText/ExpandableText.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ExpandableText = ({ ref, ...props }) => {
+  const {
+    text,
+    maxLines = 3,
+    breakpoint,
+    showText = "Read more",
+    hideText = "Read less",
+    className,
+    textProps = {},
+    accordionProps = {},
+    onToggle,
+    ...otherProps
+  } = props;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const textRef = useRef(null);
+  const { down } = useBreakpoint();
+  const baseId = useId();
+  const expandButtonId = `expandable-text-expand-${baseId}`;
+  const shouldCollapse = breakpoint ? down(breakpoint) : true;
+  useEffect(() => {
+    if (!shouldCollapse || !textRef.current) {
+      setIsCollapsed(false);
+      return;
+    }
+    const element = textRef.current;
+    const isOverflowing = element.scrollHeight > element.clientHeight;
+    setIsCollapsed(isOverflowing);
+  }, [text, shouldCollapse, maxLines]);
+  if (breakpoint && !shouldCollapse) {
+    return /* @__PURE__ */ jsx("div", { ref, className, ...otherProps, children: /* @__PURE__ */ jsx(TextOrHTML, { text, textWrapper: true, ...textProps }) });
+  }
+  const handleAccordionChange = (expanded) => {
+    setIsExpanded(expanded);
+    onToggle?.(expanded);
+  };
+  const classes = classNames("mobius-expandable-text", className);
+  const textContainerClasses = classNames("mobius-expandable-text__content", {
+    "mobius-expandable-text__content--collapsed": !isExpanded
+  });
+  const textContainerStyle = {
+    "--line-clamp": maxLines
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: classes,
+      "data-testid": "expandable-text",
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: textRef,
+            className: textContainerClasses,
+            style: textContainerStyle,
+            "data-testid": "expandable-text-content",
+            "aria-describedby": isCollapsed ? expandButtonId : void 0,
+            children: /* @__PURE__ */ jsx(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
+          }
+        ),
+        isCollapsed && /* @__PURE__ */ jsx(
+          Accordion,
+          {
+            showText,
+            hideText,
+            headerPosition: "bottom",
+            onChange: handleAccordionChange,
+            onClick: (e) => {
+              e?.stopPropagation();
+            },
+            id: expandButtonId,
+            ...accordionProps
+          }
+        )
+      ]
+    }
+  );
+};
+ExpandableText.displayName = "ExpandableText";
+
+export {
+  ExpandableText
+};
+//# sourceMappingURL=chunk-ONDOONBM.js.map

package/dist/esm/chunk-ONDOONBM.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/ExpandableText/ExpandableText.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport type React from \"react\";\nimport type { RefAttributes } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { useBreakpoint } from \"../../hooks\";\nimport type { DOMProps } from \"../../types\";\nimport { Accordion } from \"../Accordion\";\nimport { TextOrHTML } from \"../TextOrHTML\";\nimport type { AccordionProps } from \"../Accordion/Accordion\";\nimport type { TextProps } from \"../Text/Text\";\nimport \"./ExpandableText.css\";\n\nexport type ExpandableTextElementType = HTMLDivElement;\n\nexport interface ExpandableTextProps\n  extends DOMProps, RefAttributes<ExpandableTextElementType> {\n  /** The text content to display (can be plain text or HTML) */\n  text: string;\n  /** Maximum number of lines to show when collapsed */\n  maxLines?: number;\n  /** Breakpoint at which collapsing should be applied. If not provided, collapsing is always applied */\n  breakpoint?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /** Text for the expand trigger */\n  showText?: string;\n  /** Text for the collapse trigger */\n  hideText?: string;\n  /** Custom class name for the container */\n  className?: string;\n  /** Props to pass to the Text component */\n  textProps?: Partial<TextProps>;\n  /** Props to pass to the Accordion component */\n  accordionProps?: Partial<AccordionProps>;\n  /** Callback when expansion state changes */\n  onToggle?: (expanded: boolean) => void;\n}\n\nexport const ExpandableText = ({ ref, ...props }: ExpandableTextProps) => {\n  const {\n    text,\n    maxLines = 3,\n    breakpoint,\n    showText = \"Read more\",\n    hideText = \"Read less\",\n    className,\n    textProps = {},\n    accordionProps = {},\n    onToggle,\n    ...otherProps\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  const textRef = useRef<HTMLDivElement>(null);\n  const { down } = useBreakpoint();\n\n  // Generate unique ID for accessibility\n  const baseId = useId();\n  const expandButtonId = `expandable-text-expand-${baseId}`;\n\n  // Determine if content should be collapsible based on breakpoint\n  const shouldCollapse = breakpoint ? down(breakpoint) : true;\n\n  useEffect(() => {\n    if (!shouldCollapse || !textRef.current) {\n      setIsCollapsed(false);\n      return;\n    }\n\n    // Check if text is actually collapsed by comparing scroll height with client height\n    const element = textRef.current;\n    const isOverflowing = element.scrollHeight > element.clientHeight;\n    setIsCollapsed(isOverflowing);\n  }, [text, shouldCollapse, maxLines]);\n\n  // If breakpoint is specified and we're above it, show full text without collapsible UI\n  if (breakpoint && !shouldCollapse) {\n    return (\n      <div ref={ref} className={className} {...otherProps}>\n        <TextOrHTML text={text} textWrapper {...textProps} />\n      </div>\n    );\n  }\n\n  const handleAccordionChange = (expanded: boolean) => {\n    setIsExpanded(expanded);\n    onToggle?.(expanded);\n  };\n\n  const classes = classNames(\"mobius-expandable-text\", className);\n  const textContainerClasses = classNames(\"mobius-expandable-text__content\", {\n    \"mobius-expandable-text__content--collapsed\": !isExpanded,\n  });\n\n  // CSS custom property for dynamic line clamping\n  const textContainerStyle = {\n    \"--line-clamp\": maxLines,\n  } as React.CSSProperties;\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      data-testid=\"expandable-text\"\n      {...otherProps}\n    >\n      <div\n        ref={textRef}\n        className={textContainerClasses}\n        style={textContainerStyle}\n        data-testid=\"expandable-text-content\"\n        aria-describedby={isCollapsed ? expandButtonId : undefined}\n      >\n        <TextOrHTML elementType=\"span\" textWrapper text={text} {...textProps} />\n      </div>\n      {isCollapsed && (\n        <Accordion\n          showText={showText}\n          hideText={hideText}\n          headerPosition=\"bottom\"\n          onChange={handleAccordionChange}\n          onClick={(e?: React.MouseEvent) => {\n            e?.stopPropagation();\n          }}\n          id={expandButtonId}\n          {...accordionProps}\n        />\n      )}\n    </div>\n  );\n};\n\nExpandableText.displayName = \"ExpandableText\";\n"],
+  "mappings": ";;;;;;;;;;;AAEA,OAAO,gBAAgB;AAGvB,SAAS,WAAW,OAAO,QAAQ,gBAAgB;AAOnD,OAAO;AAoEC,cAqBJ,YArBI;AA1CD,IAAM,iBAAiB,CAAC,EAAE,KAAK,GAAG,MAAM,MAA2B;AACxE,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA,YAAY,CAAC;AAAA,IACb,iBAAiB,CAAC;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,EAAE,KAAK,IAAI,cAAc;AAG/B,QAAM,SAAS,MAAM;AACrB,QAAM,iBAAiB,0BAA0B,MAAM;AAGvD,QAAM,iBAAiB,aAAa,KAAK,UAAU,IAAI;AAEvD,YAAU,MAAM;AACd,QAAI,CAAC,kBAAkB,CAAC,QAAQ,SAAS;AACvC,qBAAe,KAAK;AACpB;AAAA,IACF;AAGA,UAAM,UAAU,QAAQ;AACxB,UAAM,gBAAgB,QAAQ,eAAe,QAAQ;AACrD,mBAAe,aAAa;AAAA,EAC9B,GAAG,CAAC,MAAM,gBAAgB,QAAQ,CAAC;AAGnC,MAAI,cAAc,CAAC,gBAAgB;AACjC,WACE,oBAAC,SAAI,KAAU,WAAuB,GAAG,YACvC,8BAAC,cAAW,MAAY,aAAW,MAAE,GAAG,WAAW,GACrD;AAAA,EAEJ;AAEA,QAAM,wBAAwB,CAAC,aAAsB;AACnD,kBAAc,QAAQ;AACtB,eAAW,QAAQ;AAAA,EACrB;AAEA,QAAM,UAAU,WAAW,0BAA0B,SAAS;AAC9D,QAAM,uBAAuB,WAAW,mCAAmC;AAAA,IACzE,8CAA8C,CAAC;AAAA,EACjD,CAAC;AAGD,QAAM,qBAAqB;AAAA,IACzB,gBAAgB;AAAA,EAClB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,eAAY;AAAA,MACX,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAW;AAAA,YACX,OAAO;AAAA,YACP,eAAY;AAAA,YACZ,oBAAkB,cAAc,iBAAiB;AAAA,YAEjD,8BAAC,cAAW,aAAY,QAAO,aAAW,MAAC,MAAa,GAAG,WAAW;AAAA;AAAA,QACxE;AAAA,QACC,eACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,gBAAe;AAAA,YACf,UAAU;AAAA,YACV,SAAS,CAAC,MAAyB;AACjC,iBAAG,gBAAgB;AAAA,YACrB;AAAA,YACA,IAAI;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,eAAe,cAAc;",
+  "names": []
+}

package/dist/esm/chunk-P34DI6BE.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-P34DI6BE.js.map

package/dist/esm/chunk-P34DI6BE.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/chunk-P5VEI574.js

@@ -0,0 +1,97 @@
+import {
+  TextField
+} from "./chunk-UIIXVY6K.js";
+
+// src/components/NumberField/NumberField.tsx
+import classNames from "classnames/dedupe";
+import { useCallback, useEffect, useRef } from "react";
+import "@simplybusiness/mobius/src/components/NumberField/NumberField.css";
+import { jsx } from "react/jsx-runtime";
+var NumberField = ({ ref, ...props }) => {
+  const {
+    minValue,
+    maxValue,
+    step,
+    defaultValue,
+    hideSpinButtons,
+    className,
+    ...otherProps
+  } = props;
+  const {
+    onFocus: customOnFocus,
+    onBlur: customOnBlur,
+    ...rest
+  } = otherProps;
+  const focusedInputRef = useRef(null);
+  const wheelHandler = useCallback((ev) => ev.preventDefault(), []);
+  useEffect(() => {
+    return () => {
+      focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
+      focusedInputRef.current = null;
+    };
+  }, [wheelHandler]);
+  const containerClasses = classNames("mobius-number-field", className, {
+    "--hide-spin-buttons": hideSpinButtons
+  });
+  const handleBeforeInput = (event) => {
+    const { data } = event.nativeEvent;
+    if (step && Number.isInteger(step) && data === ".") {
+      event.preventDefault();
+    }
+    if (minValue && minValue >= 0 && data === "-") {
+      event.preventDefault();
+    }
+  };
+  const handleBlur = (event) => {
+    const { value } = event.target;
+    const numValue = parseFloat(value);
+    if (step && step > 1 && !isNaN(numValue)) {
+      const baseValue = minValue ?? 0;
+      const steps = Math.round((numValue - baseValue) / step);
+      const snappedValue = baseValue + steps * step;
+      if (snappedValue !== numValue) {
+        event.target.value = snappedValue.toString();
+        const changeEvent = new Event("change", { bubbles: true });
+        event.target.dispatchEvent(changeEvent);
+        const syntheticChangeEvent = {
+          ...event,
+          target: event.target,
+          currentTarget: event.currentTarget
+        };
+        otherProps.onChange?.(syntheticChangeEvent);
+      }
+    }
+    customOnBlur?.(event);
+  };
+  const forwardedProps = {
+    ...rest,
+    onFocus: (e) => {
+      const el = e.currentTarget;
+      focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
+      focusedInputRef.current = el;
+      el.addEventListener("wheel", wheelHandler, { passive: false });
+      customOnFocus?.(e);
+    },
+    onBlur: (e) => handleBlur(e)
+  };
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ...forwardedProps,
+      className: containerClasses,
+      onBeforeInput: handleBeforeInput,
+      type: "number",
+      min: minValue ?? void 0,
+      max: maxValue ?? void 0,
+      step,
+      ref,
+      defaultValue: defaultValue != null ? defaultValue?.toString() : defaultValue
+    }
+  );
+};
+NumberField.displayName = "NumberField";
+
+export {
+  NumberField
+};
+//# sourceMappingURL=chunk-P5VEI574.js.map

package/dist/esm/chunk-P5VEI574.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/NumberField/NumberField.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport type React from \"react\";\nimport { type RefAttributes, useCallback, useEffect, useRef } from \"react\";\nimport {\n  TextField,\n  type TextFieldElementType,\n  type TextFieldProps,\n} from \"../TextField\";\nimport \"./NumberField.css\";\n\nexport type NumberFieldElementType = TextFieldElementType;\n\nexport interface NumberFieldProps\n  extends\n    Omit<TextFieldProps, \"type\" | \"defaultValue\" | \"inputElementType\">,\n    RefAttributes<NumberFieldElementType> {\n  /** The smallest value allowed for the input. */\n  minValue?: number;\n  /** The largest value allowed for the input. */\n  maxValue?: number;\n  /** The amount that the input value changes with each increment or decrement \"tick\". */\n  step?: number; // ??\n  /** The default value for the input. */\n  defaultValue?: number;\n  /** Flag to hide the spin buttons. */\n  hideSpinButtons?: boolean;\n}\n\nexport const NumberField = ({ ref, ...props }: NumberFieldProps) => {\n  const {\n    minValue,\n    maxValue,\n    step,\n    defaultValue,\n    hideSpinButtons,\n    className,\n    ...otherProps\n  } = props;\n  const {\n    onFocus: customOnFocus,\n    onBlur: customOnBlur,\n    ...rest\n  } = otherProps as Omit<TextFieldProps, \"onFocus\" | \"onBlur\"> & {\n    onFocus?: React.FocusEventHandler<HTMLInputElement>;\n    onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  };\n\n  const focusedInputRef = useRef<HTMLInputElement | null>(null);\n  const wheelHandler = useCallback((ev: Event) => ev.preventDefault(), []);\n\n  useEffect(() => {\n    return () => {\n      focusedInputRef.current?.removeEventListener(\"wheel\", wheelHandler);\n      focusedInputRef.current = null;\n    };\n  }, [wheelHandler]);\n\n  const containerClasses = classNames(\"mobius-number-field\", className, {\n    \"--hide-spin-buttons\": hideSpinButtons,\n  });\n\n  const handleBeforeInput = (\n    event: React.FormEvent<NumberFieldElementType>,\n  ) => {\n    const { data } = event.nativeEvent as InputEvent;\n    if (step && Number.isInteger(step) && data === \".\") {\n      event.preventDefault();\n    }\n    if (minValue && minValue >= 0 && data === \"-\") {\n      event.preventDefault();\n    }\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    const { value } = event.target;\n    const numValue = parseFloat(value);\n\n    // On blur, snap to nearest valid step value if step is defined\n    if (step && step > 1 && !isNaN(numValue)) {\n      const baseValue = minValue ?? 0;\n      const steps = Math.round((numValue - baseValue) / step);\n      const snappedValue = baseValue + steps * step;\n\n      // Only update if the value changed\n      if (snappedValue !== numValue) {\n        event.target.value = snappedValue.toString();\n        // Trigger change event for the corrected value\n        const changeEvent = new Event(\"change\", { bubbles: true });\n        event.target.dispatchEvent(changeEvent);\n        // Also call the onChange handler if provided\n        const syntheticChangeEvent = {\n          ...event,\n          target: event.target,\n          currentTarget: event.currentTarget,\n        } as React.ChangeEvent<HTMLInputElement>;\n        otherProps.onChange?.(syntheticChangeEvent);\n      }\n    }\n\n    customOnBlur?.(event);\n  };\n\n  const forwardedProps: TextFieldProps = {\n    ...rest,\n    onFocus: e => {\n      const el = e.currentTarget as HTMLInputElement;\n      focusedInputRef.current?.removeEventListener(\"wheel\", wheelHandler);\n      focusedInputRef.current = el;\n      el.addEventListener(\"wheel\", wheelHandler, { passive: false });\n      customOnFocus?.(e as React.FocusEvent<HTMLInputElement>);\n    },\n    onBlur: e => handleBlur(e as React.FocusEvent<HTMLInputElement>),\n  };\n\n  return (\n    <TextField\n      {...forwardedProps}\n      className={containerClasses}\n      onBeforeInput={handleBeforeInput}\n      type=\"number\"\n      min={minValue ?? undefined}\n      max={maxValue ?? undefined}\n      step={step}\n      ref={ref}\n      defaultValue={\n        defaultValue != null ? defaultValue?.toString() : defaultValue\n      }\n    />\n  );\n};\n\nNumberField.displayName = \"NumberField\";\n"],
+  "mappings": ";;;;;AAEA,OAAO,gBAAgB;AAEvB,SAA6B,aAAa,WAAW,cAAc;AAMnE,OAAO;AA2GH;AAvFG,IAAM,cAAc,CAAC,EAAE,KAAK,GAAG,MAAM,MAAwB;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,GAAG;AAAA,EACL,IAAI;AAKJ,QAAM,kBAAkB,OAAgC,IAAI;AAC5D,QAAM,eAAe,YAAY,CAAC,OAAc,GAAG,eAAe,GAAG,CAAC,CAAC;AAEvE,YAAU,MAAM;AACd,WAAO,MAAM;AACX,sBAAgB,SAAS,oBAAoB,SAAS,YAAY;AAClE,sBAAgB,UAAU;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,mBAAmB,WAAW,uBAAuB,WAAW;AAAA,IACpE,uBAAuB;AAAA,EACzB,CAAC;AAED,QAAM,oBAAoB,CACxB,UACG;AACH,UAAM,EAAE,KAAK,IAAI,MAAM;AACvB,QAAI,QAAQ,OAAO,UAAU,IAAI,KAAK,SAAS,KAAK;AAClD,YAAM,eAAe;AAAA,IACvB;AACA,QAAI,YAAY,YAAY,KAAK,SAAS,KAAK;AAC7C,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAEA,QAAM,aAAa,CAAC,UAA8C;AAChE,UAAM,EAAE,MAAM,IAAI,MAAM;AACxB,UAAM,WAAW,WAAW,KAAK;AAGjC,QAAI,QAAQ,OAAO,KAAK,CAAC,MAAM,QAAQ,GAAG;AACxC,YAAM,YAAY,YAAY;AAC9B,YAAM,QAAQ,KAAK,OAAO,WAAW,aAAa,IAAI;AACtD,YAAM,eAAe,YAAY,QAAQ;AAGzC,UAAI,iBAAiB,UAAU;AAC7B,cAAM,OAAO,QAAQ,aAAa,SAAS;AAE3C,cAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC;AACzD,cAAM,OAAO,cAAc,WAAW;AAEtC,cAAM,uBAAuB;AAAA,UAC3B,GAAG;AAAA,UACH,QAAQ,MAAM;AAAA,UACd,eAAe,MAAM;AAAA,QACvB;AACA,mBAAW,WAAW,oBAAoB;AAAA,MAC5C;AAAA,IACF;AAEA,mBAAe,KAAK;AAAA,EACtB;AAEA,QAAM,iBAAiC;AAAA,IACrC,GAAG;AAAA,IACH,SAAS,OAAK;AACZ,YAAM,KAAK,EAAE;AACb,sBAAgB,SAAS,oBAAoB,SAAS,YAAY;AAClE,sBAAgB,UAAU;AAC1B,SAAG,iBAAiB,SAAS,cAAc,EAAE,SAAS,MAAM,CAAC;AAC7D,sBAAgB,CAAuC;AAAA,IACzD;AAAA,IACA,QAAQ,OAAK,WAAW,CAAuC;AAAA,EACjE;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,eAAe;AAAA,MACf,MAAK;AAAA,MACL,KAAK,YAAY;AAAA,MACjB,KAAK,YAAY;AAAA,MACjB;AAAA,MACA;AAAA,MACA,cACE,gBAAgB,OAAO,cAAc,SAAS,IAAI;AAAA;AAAA,EAEtD;AAEJ;AAEA,YAAY,cAAc;",
+  "names": []
+}

package/dist/esm/chunk-QPIA6BGW.js

@@ -0,0 +1,64 @@
+import {
+  ErrorMessage
+} from "./chunk-UQVAEWY2.js";
+import {
+  Stack
+} from "./chunk-XH3OJQMW.js";
+import {
+  Label
+} from "./chunk-ZN7OWLZY.js";
+import {
+  TextAreaInput
+} from "./chunk-BM4M36KU.js";
+import {
+  useTextField
+} from "./chunk-UYVF3QSW.js";
+import {
+  useValidationClasses
+} from "./chunk-DYOFXXZD.js";
+
+// src/components/TextArea/TextArea.tsx
+import classNames from "classnames/dedupe";
+import "@simplybusiness/mobius/src/components/TextArea/TextArea.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TextArea = ({ ref, ...props }) => {
+  const {
+    isDisabled,
+    className,
+    errorMessage,
+    label,
+    isInvalid,
+    ...otherProps
+  } = props;
+  const { inputProps, labelProps, errorMessageProps } = useTextField(props);
+  const classes = classNames("mobius", "mobius-text-area", className);
+  const validationClasses = useValidationClasses({ isInvalid });
+  const inputClasses = classNames("mobius-text-area__input", validationClasses);
+  const labelClasses = classNames(
+    {
+      "--is-disabled": isDisabled
+    },
+    validationClasses
+  );
+  return /* @__PURE__ */ jsxs(Stack, { className: classes, gap: "xs", children: [
+    label && /* @__PURE__ */ jsx(Label, { ...labelProps, className: labelClasses, children: props.label }),
+    /* @__PURE__ */ jsx(
+      TextAreaInput,
+      {
+        ...otherProps,
+        ...inputProps,
+        ref,
+        className: inputClasses,
+        isDisabled,
+        "aria-invalid": errorMessage != null
+      }
+    ),
+    /* @__PURE__ */ jsx(ErrorMessage, { ...errorMessageProps, errorMessage })
+  ] });
+};
+TextArea.displayName = "TextArea";
+
+export {
+  TextArea
+};
+//# sourceMappingURL=chunk-QPIA6BGW.js.map

package/dist/esm/chunk-QPIA6BGW.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/TextArea/TextArea.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport type { RefAttributes } from \"react\";\nimport type { UseTextFieldProps } from \"../../hooks\";\nimport { useTextField, useValidationClasses } from \"../../hooks\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Stack } from \"../Stack\";\nimport { TextAreaInput } from \"../TextAreaInput\";\nimport \"./TextArea.css\";\n\nexport type TextAreaElementType = HTMLTextAreaElement;\n\nexport interface TextAreaProps\n  extends UseTextFieldProps, DOMProps, RefAttributes<TextAreaElementType> {\n  className?: string;\n  errorMessage?: string;\n}\n\nconst TextArea = ({ ref, ...props }: TextAreaProps) => {\n  const {\n    isDisabled,\n    className,\n    errorMessage,\n    label,\n    isInvalid,\n    ...otherProps\n  } = props;\n\n  const { inputProps, labelProps, errorMessageProps } = useTextField(props);\n\n  // Set class name for atom, including interaction state\n  const classes = classNames(\"mobius\", \"mobius-text-area\", className);\n  const validationClasses = useValidationClasses({ isInvalid });\n  const inputClasses = classNames(\"mobius-text-area__input\", validationClasses);\n  const labelClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n\n  return (\n    <Stack className={classes} gap=\"xs\">\n      {label && (\n        <Label {...labelProps} className={labelClasses}>\n          {props.label}\n        </Label>\n      )}\n      <TextAreaInput\n        {...otherProps}\n        {...inputProps}\n        ref={ref}\n        className={inputClasses}\n        isDisabled={isDisabled}\n        aria-invalid={errorMessage != null}\n      />\n      <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n    </Stack>\n  );\n};\n\nTextArea.displayName = \"TextArea\";\nexport { TextArea };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAEA,OAAO,gBAAgB;AASvB,OAAO;AAkCH,SAEI,KAFJ;AAxBJ,IAAM,WAAW,CAAC,EAAE,KAAK,GAAG,MAAM,MAAqB;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,YAAY,YAAY,kBAAkB,IAAI,aAAa,KAAK;AAGxE,QAAM,UAAU,WAAW,UAAU,oBAAoB,SAAS;AAClE,QAAM,oBAAoB,qBAAqB,EAAE,UAAU,CAAC;AAC5D,QAAM,eAAe,WAAW,2BAA2B,iBAAiB;AAC5E,QAAM,eAAe;AAAA,IACnB;AAAA,MACE,iBAAiB;AAAA,IACnB;AAAA,IACA;AAAA,EACF;AAEA,SACE,qBAAC,SAAM,WAAW,SAAS,KAAI,MAC5B;AAAA,aACC,oBAAC,SAAO,GAAG,YAAY,WAAW,cAC/B,gBAAM,OACT;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA,gBAAc,gBAAgB;AAAA;AAAA,IAChC;AAAA,IACA,oBAAC,gBAAc,GAAG,mBAAmB,cAA4B;AAAA,KACnE;AAEJ;AAEA,SAAS,cAAc;",
+  "names": []
+}

package/dist/esm/chunk-SZEFLEDA.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-SZEFLEDA.js.map

package/dist/esm/chunk-SZEFLEDA.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/chunk-TXB4BOHB.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-TXB4BOHB.js.map

package/dist/esm/chunk-TXB4BOHB.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/chunk-UIIXVY6K.js

@@ -0,0 +1,123 @@
+import {
+  adornmentWithClassName
+} from "./chunk-IM3I5CZL.js";
+import {
+  ErrorMessage
+} from "./chunk-UQVAEWY2.js";
+import {
+  Stack
+} from "./chunk-XH3OJQMW.js";
+import {
+  Label
+} from "./chunk-ZN7OWLZY.js";
+import {
+  useTextField
+} from "./chunk-UYVF3QSW.js";
+import {
+  useValidationClasses
+} from "./chunk-DYOFXXZD.js";
+
+// src/components/TextField/TextField.tsx
+import classNames from "classnames/dedupe";
+import "@simplybusiness/mobius/src/components/TextField/TextField.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TextField = ({ ref, ...props }) => {
+  const {
+    isDisabled,
+    type = "text",
+    isInvalid,
+    className,
+    label,
+    errorMessage,
+    children,
+    isRequired,
+    prefixInside,
+    prefixOutside,
+    suffixInside,
+    suffixOutside,
+    autoComplete,
+    isReadOnly,
+    ...otherProps
+  } = props;
+  const resolvedAutoComplete = autoComplete ?? (type === "email" ? "email" : type === "tel" ? "tel" : void 0);
+  const { inputProps, labelProps, errorMessageProps } = useTextField({
+    ...props,
+    autoComplete: resolvedAutoComplete,
+    "aria-errormessage": errorMessage
+  });
+  const hidden = type === "hidden";
+  const validationClasses = useValidationClasses({ isInvalid });
+  const textfieldClasses = {
+    "--is-disabled": isDisabled,
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired,
+    "--is-hidden": hidden,
+    [className || ""]: true
+  };
+  const sharedClasses = classNames(validationClasses, textfieldClasses);
+  const labelClasses = classNames(
+    {
+      "--is-disabled": isDisabled
+    },
+    validationClasses
+  );
+  const containerClasses = classNames(
+    "mobius",
+    "mobius-text-field",
+    sharedClasses
+  );
+  const inputClasses = classNames(
+    "mobius",
+    "mobius-text-field__input",
+    sharedClasses
+  );
+  const inputWrapperClasses = classNames(
+    "mobius-text-field__input-wrapper",
+    sharedClasses
+  );
+  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", className: containerClasses, children: [
+    label && !hidden && /* @__PURE__ */ jsx(Label, { ...labelProps, className: labelClasses, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "mobius-text-field__inner-container", children: [
+      adornmentWithClassName(
+        prefixOutside,
+        labelClasses,
+        "mobius-text-field__prefix-outside"
+      ),
+      /* @__PURE__ */ jsxs("div", { className: inputWrapperClasses, children: [
+        adornmentWithClassName(
+          prefixInside,
+          labelClasses,
+          "mobius-text-field__prefix-inside"
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...otherProps,
+            ...inputProps,
+            ref,
+            type,
+            className: inputClasses
+          }
+        ),
+        adornmentWithClassName(
+          suffixInside,
+          labelClasses,
+          "mobius-text-field__suffix-inside"
+        )
+      ] }),
+      adornmentWithClassName(
+        suffixOutside,
+        labelClasses,
+        "mobius-text-field__suffix-outside"
+      )
+    ] }),
+    children && /* @__PURE__ */ jsx("div", { className: "mobius-text-field__children", children }),
+    /* @__PURE__ */ jsx(ErrorMessage, { ...errorMessageProps, errorMessage })
+  ] });
+};
+TextField.displayName = "TextField";
+
+export {
+  TextField
+};
+//# sourceMappingURL=chunk-UIIXVY6K.js.map