braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/icons/IconZoomOut/IconZoomOutSvg.mjs

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const IconZoomOutSvg = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 24 24",
+    focusable: "false",
+    fill: "currentColor",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ jsx("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx("path", { d: "m21.707 20.293-3.682-3.682a9.022 9.022 0 1 0-1.414 1.414l3.682 3.682a1 1 0 0 0 1.414-1.414ZM4 11a7 7 0 1 1 11.962 4.93c-.006.006-.013.008-.019.013s-.007.013-.012.02A6.995 6.995 0 0 1 4 11Z" }),
+      /* @__PURE__ */ jsx("path", { d: "M14 10H8a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z" })
+    ]
+  }
+);
+export {
+  IconZoomOutSvg
+};

package/dist/lib/components/icons/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/lib/components/icons/index.mjs

@@ -0,0 +1 @@
+

package/dist/lib/components/index.cjs

@@ -0,0 +1,2 @@
+"use strict";
+require("./BraidProvider/BraidProvider.cjs");

package/dist/lib/components/index.mjs

@@ -0,0 +1 @@
+import "./BraidProvider/BraidProvider.mjs";

package/dist/lib/components/private/Announcement/Announcement.cjs

@@ -0,0 +1,36 @@
+"use strict";
+const React = require("react");
+const reactDom = require("react-dom");
+const lib_css_atoms_atoms_cjs = require("../../../css/atoms/atoms.cjs");
+const lib_components_HiddenVisually_HiddenVisually_css_cjs = require("../../HiddenVisually/HiddenVisually.css.cjs");
+let announcementCounter = 0;
+const containerPrefix = "braid-announcement-container";
+const Announcement = ({ children }) => {
+  const [announcementElement, setElement] = React.useState(null);
+  const className = [
+    lib_css_atoms_atoms_cjs.atoms({
+      reset: "div",
+      position: "absolute",
+      overflow: "hidden"
+    }),
+    lib_components_HiddenVisually_HiddenVisually_css_cjs.root
+  ].join(" ");
+  React.useEffect(() => {
+    const announcementContainerId = `${containerPrefix}-${announcementCounter++}`;
+    const element = document.createElement("div");
+    element.setAttribute("id", announcementContainerId);
+    element.setAttribute("class", className);
+    element.setAttribute("aria-live", "polite");
+    element.setAttribute("aria-atomic", "true");
+    document.body.appendChild(element);
+    setElement(element);
+    return () => {
+      document.body.removeChild(element);
+    };
+  }, [className]);
+  if (!announcementElement) {
+    return null;
+  }
+  return reactDom.createPortal(children, announcementElement);
+};
+exports.Announcement = Announcement;

package/dist/lib/components/private/AvoidWidowIcon/AvoidWidowIcon.cjs

@@ -0,0 +1,25 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
+const lib_components_private_AvoidWidowIcon_AvoidWidowIcon_css_cjs = require("./AvoidWidowIcon.css.cjs");
+const AvoidWidowIcon = ({
+  children,
+  iconPosition,
+  space = "xxsmall",
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  lib_components_Box_Box_cjs.Box,
+  {
+    component: "span",
+    paddingRight: iconPosition === "leading" ? space : void 0,
+    paddingLeft: iconPosition === "trailing" ? space : void 0,
+    className: [lib_components_private_AvoidWidowIcon_AvoidWidowIcon_css_cjs.nowrap, className],
+    "aria-hidden": true,
+    children: [
+      iconPosition === "leading" ? children : void 0,
+      "⁠",
+      iconPosition === "trailing" ? children : void 0
+    ]
+  }
+);
+exports.AvoidWidowIcon = AvoidWidowIcon;

package/dist/lib/components/private/Field/ClearField.cjs

@@ -0,0 +1,50 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
+const lib_components_private_FieldButtonIcon_FieldButtonIcon_cjs = require("../FieldButtonIcon/FieldButtonIcon.cjs");
+const lib_components_icons_IconClear_IconClear_cjs = require("../../icons/IconClear/IconClear.cjs");
+const ClearField = ({
+  hide = false,
+  onClear,
+  label = "Clear",
+  id,
+  inputRef
+}) => {
+  const clearHandler = React.useCallback(
+    (event) => {
+      if (typeof onClear !== "function" || event.button !== 0) {
+        return;
+      }
+      onClear();
+      if (inputRef && typeof inputRef === "object" && inputRef.current) {
+        inputRef.current.focus();
+      }
+    },
+    [onClear, inputRef]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Box_Box_cjs.Box,
+    {
+      component: "span",
+      height: "touchable",
+      width: "touchable",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      transition: "fast",
+      pointerEvents: hide ? "none" : void 0,
+      opacity: hide ? 0 : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        lib_components_private_FieldButtonIcon_FieldButtonIcon_cjs.FieldButtonIcon,
+        {
+          id: `${id}-clear`,
+          label,
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconClear_IconClear_cjs.IconClear, {}),
+          onMouseDown: clearHandler
+        }
+      )
+    }
+  );
+};
+exports.ClearField = ClearField;

package/dist/lib/components/private/Field/ClearField.mjs

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Box } from "../../Box/Box.mjs";
+import { FieldButtonIcon } from "../FieldButtonIcon/FieldButtonIcon.mjs";
+import { IconClear } from "../../icons/IconClear/IconClear.mjs";
+const ClearField = ({
+  hide = false,
+  onClear,
+  label = "Clear",
+  id,
+  inputRef
+}) => {
+  const clearHandler = useCallback(
+    (event) => {
+      if (typeof onClear !== "function" || event.button !== 0) {
+        return;
+      }
+      onClear();
+      if (inputRef && typeof inputRef === "object" && inputRef.current) {
+        inputRef.current.focus();
+      }
+    },
+    [onClear, inputRef]
+  );
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "span",
+      height: "touchable",
+      width: "touchable",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      transition: "fast",
+      pointerEvents: hide ? "none" : void 0,
+      opacity: hide ? 0 : void 0,
+      children: /* @__PURE__ */ jsx(
+        FieldButtonIcon,
+        {
+          id: `${id}-clear`,
+          label,
+          icon: /* @__PURE__ */ jsx(IconClear, {}),
+          onMouseDown: clearHandler
+        }
+      )
+    }
+  );
+};
+export {
+  ClearField
+};

package/dist/lib/components/private/Field/Field.cjs

@@ -0,0 +1,195 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const assert = require("assert");
+const React = require("react");
+const clsx = require("clsx");
+const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
+const lib_components_FieldLabel_FieldLabel_cjs = require("../../FieldLabel/FieldLabel.cjs");
+const lib_components_FieldMessage_FieldMessage_cjs = require("../../FieldMessage/FieldMessage.cjs");
+const lib_components_private_FieldOverlay_FieldOverlay_cjs = require("../FieldOverlay/FieldOverlay.cjs");
+const lib_components_Stack_Stack_cjs = require("../../Stack/Stack.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../buildDataAttributes.cjs");
+const lib_css_typography_cjs = require("../../../css/typography.cjs");
+const lib_css_typography_css_cjs = require("../../../css/typography.css.cjs");
+const lib_components_Text_Text_cjs = require("../../Text/Text.cjs");
+const lib_components_private_mergeIds_cjs = require("../mergeIds.cjs");
+const lib_components_private_Field_Field_css_cjs = require("./Field.css.cjs");
+const lib_components_Box_BackgroundContext_cjs = require("../../Box/BackgroundContext.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
+const clsx__default = /* @__PURE__ */ _interopDefaultCompat(clsx);
+const Field = ({
+  id,
+  value,
+  name,
+  disabled,
+  autoComplete,
+  children,
+  description,
+  message,
+  secondaryMessage,
+  reserveMessageSpace = false,
+  tone,
+  "aria-describedby": ariaDescribedBy,
+  data,
+  secondaryIcon,
+  alwaysShowSecondaryIcon = false,
+  autoFocus,
+  icon,
+  prefix,
+  required,
+  ...restProps
+}) => {
+  assert__default.default(
+    prefix === void 0 || typeof prefix === "string",
+    "Prefix must be a string"
+  );
+  const messageId = `${id}-message`;
+  const descriptionId = description ? `${id}-description` : void 0;
+  const fieldBackground = disabled ? { lightMode: "neutralSoft", darkMode: "neutral" } : { lightMode: "surface" };
+  const hasValue = typeof value === "string" ? value.length > 0 : value != null;
+  const hasVisualLabelOrDescription = "label" in restProps || description;
+  const showSecondaryIcon = alwaysShowSecondaryIcon || secondaryIcon && hasValue;
+  const { lightMode } = lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
+  const overlays = /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
+      {
+        variant: disabled ? "disabled" : "default",
+        visible: tone !== "critical" || disabled,
+        className: {
+          [lib_components_private_Field_Field_css_cjs.hideBorderOnDarkBackgroundInLightMode]: lightMode === "dark"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
+      {
+        variant: "critical",
+        visible: tone === "critical" && !disabled
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay, { variant: "focus", className: lib_components_private_Field_Field_css_cjs.focusOverlay }),
+    /* @__PURE__ */ jsxRuntime.jsx(lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay, { variant: "formAccent", className: lib_components_private_Field_Field_css_cjs.hoverOverlay })
+  ] });
+  const fieldPadding = "small";
+  return /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Stack_Stack_cjs.Stack, { space: "xsmall", children: [
+    hasVisualLabelOrDescription ? /* @__PURE__ */ jsxRuntime.jsx(
+      lib_components_FieldLabel_FieldLabel_cjs.FieldLabel,
+      {
+        htmlFor: id,
+        label: "label" in restProps ? restProps.label : void 0,
+        disabled,
+        secondaryLabel: "secondaryLabel" in restProps ? restProps.secondaryLabel : void 0,
+        tertiaryLabel: "tertiaryLabel" in restProps ? restProps.tertiaryLabel : void 0,
+        description,
+        descriptionId
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lib_components_Box_Box_cjs.Box,
+      {
+        position: "relative",
+        background: fieldBackground,
+        borderRadius: "standard",
+        display: "flex",
+        className: showSecondaryIcon ? lib_components_private_Field_Field_css_cjs.secondaryIconSpace : void 0,
+        children: children(
+          overlays,
+          {
+            id,
+            name,
+            background: fieldBackground,
+            width: "full",
+            paddingLeft: fieldPadding,
+            paddingRight: showSecondaryIcon ? void 0 : fieldPadding,
+            borderRadius: "standard",
+            outline: "none",
+            "aria-describedby": lib_components_private_mergeIds_cjs.mergeIds(
+              ariaDescribedBy,
+              message || secondaryMessage ? messageId : void 0,
+              descriptionId
+            ),
+            "aria-required": required,
+            ..."aria-label" in restProps ? { "aria-label": restProps["aria-label"] } : {},
+            ..."aria-labelledby" in restProps ? { "aria-labelledby": restProps["aria-labelledby"] } : {},
+            disabled,
+            autoComplete,
+            autoFocus,
+            ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+            className: clsx__default.default(
+              lib_components_private_Field_Field_css_cjs.field,
+              lib_components_private_Field_Field_css_cjs.placeholderColor,
+              lib_css_typography_cjs.textStyles({
+                tone: hasValue && !disabled ? "neutral" : "secondary",
+                size: "standard",
+                baseline: false
+              }),
+              lib_css_typography_css_cjs.touchableText.standard,
+              icon && !prefix ? lib_components_private_Field_Field_css_cjs.iconSpace : null
+            )
+          },
+          icon ? /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_Box_Box_cjs.Box,
+            {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              position: "absolute",
+              height: "touchable",
+              width: "touchable",
+              pointerEvents: "none",
+              top: 0,
+              left: 0,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { baseline: false, tone: prefix ? "secondary" : void 0, children: icon })
+            }
+          ) : null,
+          secondaryIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_Box_Box_cjs.Box,
+            {
+              component: "span",
+              position: "absolute",
+              width: "touchable",
+              height: "touchable",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              top: 0,
+              right: 0,
+              children: secondaryIcon
+            }
+          ) : null,
+          prefix ? /* @__PURE__ */ jsxRuntime.jsxs(
+            lib_components_Box_Box_cjs.Box,
+            {
+              component: "label",
+              htmlFor: id,
+              display: "flex",
+              alignItems: "center",
+              paddingLeft: icon ? void 0 : fieldPadding,
+              height: "touchable",
+              flexShrink: 0,
+              className: icon ? lib_components_private_Field_Field_css_cjs.iconSpace : null,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { tone: "secondary", baseline: false, children: prefix }),
+                /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { padding: fieldPadding, paddingRight: "none", height: "full", children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { height: "full", className: lib_components_private_Field_Field_css_cjs.verticalDivider }) })
+              ]
+            }
+          ) : null
+        )
+      }
+    ),
+    message || secondaryMessage || reserveMessageSpace ? /* @__PURE__ */ jsxRuntime.jsx(
+      lib_components_FieldMessage_FieldMessage_cjs.FieldMessage,
+      {
+        id: messageId,
+        tone,
+        disabled,
+        message,
+        secondaryMessage,
+        reserveMessageSpace
+      }
+    ) : null
+  ] });
+};
+exports.Field = Field;

package/dist/lib/components/private/Field/Field.css.cjs

@@ -0,0 +1,53 @@
+"use strict";
+const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const cssUtils = require("@vanilla-extract/css-utils");
+const lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
+const lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
+__vanilla_filescope__.setFileScope("src/lib/components/private/Field/Field.css.ts", "braid-design-system");
+const field = css.style({}, "field");
+const placeholderColor = css.style({
+  "::placeholder": {
+    color: lib_themes_vars_css_cjs.vars.foregroundColor.secondary
+  }
+}, "placeholderColor");
+const secondaryIconSpace = css.style({
+  paddingRight: lib_themes_vars_css_cjs.vars.touchableSize
+}, "secondaryIconSpace");
+const textLeftOffset = "2px";
+const iconSpace = css.style({
+  paddingLeft: cssUtils.calc.subtract(lib_themes_vars_css_cjs.vars.touchableSize, textLeftOffset)
+}, "iconSpace");
+const hideBorderOnDarkBackgroundInLightMode = css.style(lib_css_colorModeStyle_cjs.colorModeStyle({
+  lightMode: {
+    opacity: 0
+  }
+}), "hideBorderOnDarkBackgroundInLightMode");
+const focusOverlay = css.style({
+  selectors: {
+    [`${field}:focus ~ &`]: {
+      opacity: 1
+    }
+  }
+}, "focusOverlay");
+const hoverOverlay = css.style({
+  selectors: {
+    [`${field}:hover:not(:disabled) ~ &, ${field}:focus ~ &`]: {
+      opacity: 1
+    }
+  }
+}, "hoverOverlay");
+const verticalDivider = css.style({
+  width: lib_themes_vars_css_cjs.vars.borderWidth.standard,
+  background: lib_themes_vars_css_cjs.vars.borderColor.field,
+  opacity: 0.4
+}, "verticalDivider");
+__vanilla_filescope__.endFileScope();
+exports.field = field;
+exports.focusOverlay = focusOverlay;
+exports.hideBorderOnDarkBackgroundInLightMode = hideBorderOnDarkBackgroundInLightMode;
+exports.hoverOverlay = hoverOverlay;
+exports.iconSpace = iconSpace;
+exports.placeholderColor = placeholderColor;
+exports.secondaryIconSpace = secondaryIconSpace;
+exports.verticalDivider = verticalDivider;

package/dist/lib/components/private/Field/Field.mjs

@@ -0,0 +1,193 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import assert from "assert";
+import { Fragment } from "react";
+import clsx from "clsx";
+import { Box } from "../../Box/Box.mjs";
+import { FieldLabel } from "../../FieldLabel/FieldLabel.mjs";
+import { FieldMessage } from "../../FieldMessage/FieldMessage.mjs";
+import { FieldOverlay } from "../FieldOverlay/FieldOverlay.mjs";
+import { Stack } from "../../Stack/Stack.mjs";
+import { buildDataAttributes } from "../buildDataAttributes.mjs";
+import { textStyles } from "../../../css/typography.mjs";
+import { touchableText } from "../../../css/typography.css.mjs";
+import { Text } from "../../Text/Text.mjs";
+import { mergeIds } from "../mergeIds.mjs";
+import { secondaryIconSpace, field, placeholderColor, iconSpace, verticalDivider, hideBorderOnDarkBackgroundInLightMode, focusOverlay, hoverOverlay } from "./Field.css.mjs";
+import { useBackgroundLightness } from "../../Box/BackgroundContext.mjs";
+const Field = ({
+  id,
+  value,
+  name,
+  disabled,
+  autoComplete,
+  children,
+  description,
+  message,
+  secondaryMessage,
+  reserveMessageSpace = false,
+  tone,
+  "aria-describedby": ariaDescribedBy,
+  data,
+  secondaryIcon,
+  alwaysShowSecondaryIcon = false,
+  autoFocus,
+  icon,
+  prefix,
+  required,
+  ...restProps
+}) => {
+  assert(
+    prefix === void 0 || typeof prefix === "string",
+    "Prefix must be a string"
+  );
+  const messageId = `${id}-message`;
+  const descriptionId = description ? `${id}-description` : void 0;
+  const fieldBackground = disabled ? { lightMode: "neutralSoft", darkMode: "neutral" } : { lightMode: "surface" };
+  const hasValue = typeof value === "string" ? value.length > 0 : value != null;
+  const hasVisualLabelOrDescription = "label" in restProps || description;
+  const showSecondaryIcon = alwaysShowSecondaryIcon || secondaryIcon && hasValue;
+  const { lightMode } = useBackgroundLightness();
+  const overlays = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FieldOverlay,
+      {
+        variant: disabled ? "disabled" : "default",
+        visible: tone !== "critical" || disabled,
+        className: {
+          [hideBorderOnDarkBackgroundInLightMode]: lightMode === "dark"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FieldOverlay,
+      {
+        variant: "critical",
+        visible: tone === "critical" && !disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(FieldOverlay, { variant: "focus", className: focusOverlay }),
+    /* @__PURE__ */ jsx(FieldOverlay, { variant: "formAccent", className: hoverOverlay })
+  ] });
+  const fieldPadding = "small";
+  return /* @__PURE__ */ jsxs(Stack, { space: "xsmall", children: [
+    hasVisualLabelOrDescription ? /* @__PURE__ */ jsx(
+      FieldLabel,
+      {
+        htmlFor: id,
+        label: "label" in restProps ? restProps.label : void 0,
+        disabled,
+        secondaryLabel: "secondaryLabel" in restProps ? restProps.secondaryLabel : void 0,
+        tertiaryLabel: "tertiaryLabel" in restProps ? restProps.tertiaryLabel : void 0,
+        description,
+        descriptionId
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "relative",
+        background: fieldBackground,
+        borderRadius: "standard",
+        display: "flex",
+        className: showSecondaryIcon ? secondaryIconSpace : void 0,
+        children: children(
+          overlays,
+          {
+            id,
+            name,
+            background: fieldBackground,
+            width: "full",
+            paddingLeft: fieldPadding,
+            paddingRight: showSecondaryIcon ? void 0 : fieldPadding,
+            borderRadius: "standard",
+            outline: "none",
+            "aria-describedby": mergeIds(
+              ariaDescribedBy,
+              message || secondaryMessage ? messageId : void 0,
+              descriptionId
+            ),
+            "aria-required": required,
+            ..."aria-label" in restProps ? { "aria-label": restProps["aria-label"] } : {},
+            ..."aria-labelledby" in restProps ? { "aria-labelledby": restProps["aria-labelledby"] } : {},
+            disabled,
+            autoComplete,
+            autoFocus,
+            ...buildDataAttributes({ data, validateRestProps: restProps }),
+            className: clsx(
+              field,
+              placeholderColor,
+              textStyles({
+                tone: hasValue && !disabled ? "neutral" : "secondary",
+                size: "standard",
+                baseline: false
+              }),
+              touchableText.standard,
+              icon && !prefix ? iconSpace : null
+            )
+          },
+          icon ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              position: "absolute",
+              height: "touchable",
+              width: "touchable",
+              pointerEvents: "none",
+              top: 0,
+              left: 0,
+              children: /* @__PURE__ */ jsx(Text, { baseline: false, tone: prefix ? "secondary" : void 0, children: icon })
+            }
+          ) : null,
+          secondaryIcon ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "span",
+              position: "absolute",
+              width: "touchable",
+              height: "touchable",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              top: 0,
+              right: 0,
+              children: secondaryIcon
+            }
+          ) : null,
+          prefix ? /* @__PURE__ */ jsxs(
+            Box,
+            {
+              component: "label",
+              htmlFor: id,
+              display: "flex",
+              alignItems: "center",
+              paddingLeft: icon ? void 0 : fieldPadding,
+              height: "touchable",
+              flexShrink: 0,
+              className: icon ? iconSpace : null,
+              children: [
+                /* @__PURE__ */ jsx(Text, { tone: "secondary", baseline: false, children: prefix }),
+                /* @__PURE__ */ jsx(Box, { padding: fieldPadding, paddingRight: "none", height: "full", children: /* @__PURE__ */ jsx(Box, { height: "full", className: verticalDivider }) })
+              ]
+            }
+          ) : null
+        )
+      }
+    ),
+    message || secondaryMessage || reserveMessageSpace ? /* @__PURE__ */ jsx(
+      FieldMessage,
+      {
+        id: messageId,
+        tone,
+        disabled,
+        message,
+        secondaryMessage,
+        reserveMessageSpace
+      }
+    ) : null
+  ] });
+};
+export {
+  Field
+};

package/dist/lib/components/private/Field/getCharacterLimitStatus.cjs

@@ -0,0 +1,16 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_components_Text_Text_cjs = require("../../Text/Text.cjs");
+const getCharacterLimitStatus = ({
+  characterLimit,
+  value
+}) => {
+  const inputLength = String(value).length;
+  if (inputLength < Math.ceil(characterLimit * 0.7 / 10) * 10) {
+    return null;
+  }
+  const diff = characterLimit - inputLength;
+  const valid = diff >= 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { size: "small", tone: valid ? "secondary" : "critical", children: diff });
+};
+exports.getCharacterLimitStatus = getCharacterLimitStatus;

package/dist/lib/components/private/Field/getCharacterLimitStatus.mjs

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Text } from "../../Text/Text.mjs";
+const getCharacterLimitStatus = ({
+  characterLimit,
+  value
+}) => {
+  const inputLength = String(value).length;
+  if (inputLength < Math.ceil(characterLimit * 0.7 / 10) * 10) {
+    return null;
+  }
+  const diff = characterLimit - inputLength;
+  const valid = diff >= 0;
+  return /* @__PURE__ */ jsx(Text, { size: "small", tone: valid ? "secondary" : "critical", children: diff });
+};
+export {
+  getCharacterLimitStatus
+};