@salt-ds/lab 1.0.0-alpha.0

package/dist-cjs/packages/lab/src/focus-manager/internal/findAllTabbableElements.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@salt-ds/core');
+
+const anyKeyboardFocusedElementSelector = '*:not(style):not(script):not(noscript):not(link):not([tabindex="-1"])';
+function findAllTabbableElements(rootNode, selector, elementsToIgnore = []) {
+  if (!rootNode) {
+    return [];
+  }
+  const nodes = Array.from(
+    rootNode.querySelectorAll(anyKeyboardFocusedElementSelector)
+  ).slice();
+  return nodes.reduce((foundNodes, node) => {
+    var _a;
+    if (elementsToIgnore.indexOf(node) !== -1) {
+      return foundNodes;
+    }
+    const win = core.ownerWindow(node);
+    if ((node.getBoundingClientRect().width === 0 || win.getComputedStyle(node).visibility !== "visible") && node instanceof HTMLSlotElement && typeof node.assignedElements !== "function") {
+      return foundNodes;
+    }
+    if (node instanceof HTMLSlotElement && typeof node.assignedElements === "function") {
+      return foundNodes.concat(
+        node.assignedElements().filter((n) => !n.shadowRoot)
+      );
+    }
+    if (!node.shadowRoot && node.matches(selector)) {
+      const rootNode2 = (_a = node.parentNode) == null ? void 0 : _a.getRootNode();
+      return foundNodes.concat(
+        rootNode2 instanceof ShadowRoot ? rootNode2.host : node
+      );
+    }
+    if (node.shadowRoot) {
+      return foundNodes.concat(
+        findAllTabbableElements(node.shadowRoot, selector, elementsToIgnore)
+      );
+    }
+    return foundNodes;
+  }, []);
+}
+
+exports.findAllTabbableElements = findAllTabbableElements;
+//# sourceMappingURL=findAllTabbableElements.js.map

package/dist-cjs/packages/lab/src/focus-manager/internal/findAllTabbableElements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"findAllTabbableElements.js","sources":["../src/focus-manager/internal/findAllTabbableElements.ts"],"sourcesContent":["import { ownerWindow } from \"@salt-ds/core\";\n\n/**\n * Used to reduce the number of initial nodes that are checked to see if tabbable.\n *\n * Not possible to immediately check if a node is tabbable because the node may be a custom element\n * and therefore could potentially have a tabbable node within its shadow root.\n */\nconst anyKeyboardFocusedElementSelector =\n  '*:not(style):not(script):not(noscript):not(link):not([tabindex=\"-1\"])';\n\ntype HTMLElementOrNull = HTMLElement | null;\n\n/**\n * Finds all the elements in the given root node that can be focused by a 'tab' keypress.\n * In addition, the trap-start and trap-end sentinel nodes are excluded, and all contained shadow roots are walked recursively\n * @param {Node} rootNode The containing node from which traversal begins.\n * @param {string} selector The CSS selector used to query for matching, tabbable elements.\n * @param {Node[]} elementsToIgnore Elements to ignore\n */\nexport function findAllTabbableElements(\n  rootNode: HTMLElementOrNull | ShadowRoot,\n  selector: string,\n  elementsToIgnore: HTMLElementOrNull[] = []\n): HTMLElement[] {\n  if (!rootNode) {\n    return [];\n  }\n\n  const nodes = Array.from<HTMLElement | HTMLSlotElement>(\n    rootNode.querySelectorAll(anyKeyboardFocusedElementSelector)\n  ).slice();\n\n  return nodes.reduce((foundNodes, node) => {\n    if (elementsToIgnore.indexOf(node) !== -1) {\n      return foundNodes;\n    }\n\n    const win = ownerWindow(node);\n    // Skip hidden nodes. assignedElements needs to be checked here to make sure we don't ignore slots\n    if (\n      (node.getBoundingClientRect().width === 0 ||\n        win.getComputedStyle(node).visibility !== \"visible\") &&\n      node instanceof HTMLSlotElement &&\n      typeof node.assignedElements !== \"function\"\n    ) {\n      return foundNodes;\n    }\n\n    // If node is a slot return assigned elements.\n    if (\n      node instanceof HTMLSlotElement &&\n      typeof node.assignedElements === \"function\"\n    ) {\n      return foundNodes.concat(\n        node.assignedElements().filter((n) => !n.shadowRoot) as HTMLElement[]\n      );\n    }\n\n    if (!node.shadowRoot && node.matches(selector)) {\n      // If this element is inside a shadowRoot then the host not the element itself is needed.\n      const rootNode = node.parentNode?.getRootNode();\n      return foundNodes.concat(\n        rootNode instanceof ShadowRoot ? (rootNode.host as HTMLElement) : node\n      );\n    }\n    if (node.shadowRoot) {\n      return foundNodes.concat(\n        findAllTabbableElements(node.shadowRoot, selector, elementsToIgnore)\n      );\n    }\n\n    return foundNodes;\n  }, [] as HTMLElement[]);\n}\n"],"names":["ownerWindow","rootNode"],"mappings":";;;;;;AAQA,MAAM,iCACJ,GAAA,uEAAA,CAAA;AAWK,SAAS,uBACd,CAAA,QAAA,EACA,QACA,EAAA,gBAAA,GAAwC,EACzB,EAAA;AACf,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAA,OAAO,EAAC,CAAA;AAAA,GACV;AAEA,EAAA,MAAM,QAAQ,KAAM,CAAA,IAAA;AAAA,IAClB,QAAA,CAAS,iBAAiB,iCAAiC,CAAA;AAAA,IAC3D,KAAM,EAAA,CAAA;AAER,EAAA,OAAO,KAAM,CAAA,MAAA,CAAO,CAAC,UAAA,EAAY,IAAS,KAAA;AAjC5C,IAAA,IAAA,EAAA,CAAA;AAkCI,IAAA,IAAI,gBAAiB,CAAA,OAAA,CAAQ,IAAI,CAAA,KAAM,CAAI,CAAA,EAAA;AACzC,MAAO,OAAA,UAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,GAAA,GAAMA,iBAAY,IAAI,CAAA,CAAA;AAE5B,IAAA,IAAA,CACG,KAAK,qBAAsB,EAAA,CAAE,KAAU,KAAA,CAAA,IACtC,IAAI,gBAAiB,CAAA,IAAI,CAAE,CAAA,UAAA,KAAe,cAC5C,IAAgB,YAAA,eAAA,IAChB,OAAO,IAAA,CAAK,qBAAqB,UACjC,EAAA;AACA,MAAO,OAAA,UAAA,CAAA;AAAA,KACT;AAGA,IAAA,IACE,IAAgB,YAAA,eAAA,IAChB,OAAO,IAAA,CAAK,qBAAqB,UACjC,EAAA;AACA,MAAA,OAAO,UAAW,CAAA,MAAA;AAAA,QAChB,IAAA,CAAK,kBAAmB,CAAA,MAAA,CAAO,CAAC,CAAM,KAAA,CAAC,EAAE,UAAU,CAAA;AAAA,OACrD,CAAA;AAAA,KACF;AAEA,IAAA,IAAI,CAAC,IAAK,CAAA,UAAA,IAAc,IAAK,CAAA,OAAA,CAAQ,QAAQ,CAAG,EAAA;AAE9C,MAAMC,MAAAA,SAAAA,GAAAA,CAAW,EAAK,GAAA,IAAA,CAAA,UAAA,KAAL,IAAiB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA,EAAA,CAAA;AAClC,MAAA,OAAO,UAAW,CAAA,MAAA;AAAA,QAChBA,SAAAA,YAAoB,UAAcA,GAAAA,SAAAA,CAAS,IAAuB,GAAA,IAAA;AAAA,OACpE,CAAA;AAAA,KACF;AACA,IAAA,IAAI,KAAK,UAAY,EAAA;AACnB,MAAA,OAAO,UAAW,CAAA,MAAA;AAAA,QAChB,uBAAwB,CAAA,IAAA,CAAK,UAAY,EAAA,QAAA,EAAU,gBAAgB,CAAA;AAAA,OACrE,CAAA;AAAA,KACF;AAEA,IAAO,OAAA,UAAA,CAAA;AAAA,GACT,EAAG,EAAmB,CAAA,CAAA;AACxB;;;;"}

package/dist-cjs/packages/lab/src/focus-manager/internal/useReturnFocus.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var core = require('@salt-ds/core');
+
+function getActiveElement(doc) {
+  if (!doc) {
+    return null;
+  }
+  const activeElement = doc.activeElement;
+  if (activeElement == null ? void 0 : activeElement.shadowRoot) {
+    return getActiveElement(activeElement.shadowRoot);
+  }
+  return activeElement;
+}
+function useReturnFocus({
+  focusOptions: focusOptionsProp,
+  disabled,
+  active,
+  document
+}) {
+  const previousFocusedElement = React.useRef();
+  core.useIsomorphicLayoutEffect(() => {
+    if (active) {
+      previousFocusedElement.current = getActiveElement(document);
+    }
+  }, [document, active]);
+  const focusOptionsRef = React.useRef(focusOptionsProp);
+  React.useEffect(() => {
+    focusOptionsRef.current = focusOptionsProp;
+  }, [focusOptionsProp]);
+  core.useIsomorphicLayoutEffect(() => {
+    const returnFocus = () => {
+      const focusOptions = typeof focusOptionsRef.current === "object" ? focusOptionsRef.current : void 0;
+      setTimeout(() => {
+        var _a;
+        if (previousFocusedElement.current) {
+          (_a = previousFocusedElement.current) == null ? void 0 : _a.focus(focusOptions);
+        }
+      }, 0);
+    };
+    if (!disabled) {
+      if (!active) {
+        returnFocus();
+      }
+      return () => {
+        if (active) {
+          returnFocus();
+        }
+      };
+    }
+    return void 0;
+  }, [disabled, active]);
+}
+
+exports.useReturnFocus = useReturnFocus;
+//# sourceMappingURL=useReturnFocus.js.map

package/dist-cjs/packages/lab/src/focus-manager/internal/useReturnFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReturnFocus.js","sources":["../src/focus-manager/internal/useReturnFocus.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n\nfunction getActiveElement(doc: DocumentOrShadowRoot): HTMLElement | null {\n  if (!doc) {\n    return null;\n  }\n\n  const activeElement = doc.activeElement;\n\n  if (activeElement?.shadowRoot) {\n    return getActiveElement(activeElement.shadowRoot);\n  }\n\n  return activeElement as HTMLElement;\n}\n\nexport interface UseReturnFocusProps {\n  active?: boolean;\n  disabled?: boolean;\n  document: DocumentOrShadowRoot;\n  focusOptions?: FocusOptions;\n}\n\nexport function useReturnFocus({\n  focusOptions: focusOptionsProp,\n  disabled,\n  active,\n  document,\n}: UseReturnFocusProps): void {\n  const previousFocusedElement = useRef<HTMLElement | null>();\n\n  useIsomorphicLayoutEffect(() => {\n    if (active) {\n      previousFocusedElement.current = getActiveElement(document);\n    }\n  }, [document, active]);\n\n  const focusOptionsRef = useRef(focusOptionsProp);\n\n  useEffect(() => {\n    focusOptionsRef.current = focusOptionsProp;\n  }, [focusOptionsProp]);\n\n  useIsomorphicLayoutEffect(() => {\n    const returnFocus = () => {\n      const focusOptions =\n        typeof focusOptionsRef.current === \"object\"\n          ? focusOptionsRef.current\n          : undefined;\n\n      setTimeout(() => {\n        if (previousFocusedElement.current) {\n          previousFocusedElement.current?.focus(focusOptions);\n        }\n      }, 0);\n    };\n\n    if (!disabled) {\n      if (!active) {\n        returnFocus();\n      }\n\n      return () => {\n        if (active) {\n          returnFocus();\n        }\n      };\n    }\n\n    return undefined;\n  }, [disabled, active]);\n}\n"],"names":["useRef","useIsomorphicLayoutEffect","useEffect"],"mappings":";;;;;;;AAGA,SAAS,iBAAiB,GAA+C,EAAA;AACvE,EAAA,IAAI,CAAC,GAAK,EAAA;AACR,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,gBAAgB,GAAI,CAAA,aAAA,CAAA;AAE1B,EAAA,IAAI,+CAAe,UAAY,EAAA;AAC7B,IAAO,OAAA,gBAAA,CAAiB,cAAc,UAAU,CAAA,CAAA;AAAA,GAClD;AAEA,EAAO,OAAA,aAAA,CAAA;AACT,CAAA;AASO,SAAS,cAAe,CAAA;AAAA,EAC7B,YAAc,EAAA,gBAAA;AAAA,EACd,QAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AACF,CAA8B,EAAA;AAC5B,EAAA,MAAM,yBAAyBA,YAA2B,EAAA,CAAA;AAE1D,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,MAAQ,EAAA;AACV,MAAuB,sBAAA,CAAA,OAAA,GAAU,iBAAiB,QAAQ,CAAA,CAAA;AAAA,KAC5D;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,MAAM,CAAC,CAAA,CAAA;AAErB,EAAM,MAAA,eAAA,GAAkBD,aAAO,gBAAgB,CAAA,CAAA;AAE/C,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,eAAA,CAAgB,OAAU,GAAA,gBAAA,CAAA;AAAA,GAC5B,EAAG,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAErB,EAAAD,8BAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,cAAc,MAAM;AACxB,MAAA,MAAM,eACJ,OAAO,eAAA,CAAgB,OAAY,KAAA,QAAA,GAC/B,gBAAgB,OAChB,GAAA,KAAA,CAAA,CAAA;AAEN,MAAA,UAAA,CAAW,MAAM;AAnDvB,QAAA,IAAA,EAAA,CAAA;AAoDQ,QAAA,IAAI,uBAAuB,OAAS,EAAA;AAClC,UAAuB,CAAA,EAAA,GAAA,sBAAA,CAAA,OAAA,KAAvB,mBAAgC,KAAM,CAAA,YAAA,CAAA,CAAA;AAAA,SACxC;AAAA,SACC,CAAC,CAAA,CAAA;AAAA,KACN,CAAA;AAEA,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAY,WAAA,EAAA,CAAA;AAAA,OACd;AAEA,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,MAAQ,EAAA;AACV,UAAY,WAAA,EAAA,CAAA;AAAA,SACd;AAAA,OACF,CAAA;AAAA,KACF;AAEA,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACN,EAAA,CAAC,QAAU,EAAA,MAAM,CAAC,CAAA,CAAA;AACvB;;;;"}

package/dist-cjs/packages/lab/src/form-field/FormActivationIndicator.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-touch {\n  --formField-activationIndicator-icon-size: 7px;\n}\n.salt-density-low {\n  --formField-activationIndicator-icon-size: 5px;\n}\n.salt-density-medium {\n  --formField-activationIndicator-icon-size: 5px;\n}\n.salt-density-high {\n  --formField-activationIndicator-icon-size: 3px;\n}\n\n.saltFormActivationIndicator {\n  height: 0px;\n  width: 100%;\n  position: relative;\n}\n\n/* Styles applied to the indication bar */\n.saltFormActivationIndicator-bar {\n  bottom: 0px;\n  border-color: var(--saltFormField-activationIndicator-borderColor, var(--formField-activationIndicator-color));\n  border-bottom-width: var(--saltFormField-activationIndicator-borderWidth, var(--formField-activationIndicator-size));\n  border-bottom-style: var(--saltFormField-activationIndicator-borderStyle, var(--formField-activationIndicator-style));\n  height: 0;\n  opacity: var(--saltFormField-activationIndicator-opacity, 1);\n  position: absolute;\n  width: 100%;\n}\n\n/* Styles applied to the indication icon */\n.saltFormActivationIndicator-icon {\n  width: var(--saltFormField-activationIndicator-icon-size, var(--formField-activationIndicator-icon-size));\n  height: var(--saltFormField-activationIndicator-icon-size, var(--formField-activationIndicator-icon-size));\n  fill: var(--saltFormField-activationIndicator-icon-color, var(--formField-activationIndicator-color));\n  /**\n * It's only a solid icon showing different color for validation states.\n * Applying opacity instead of re-defining all colors.\n */\n  opacity: var(--saltFormField-activationIndicator-opacity, 1);\n  position: absolute;\n  bottom: 3px;\n  right: 2px;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=FormActivationIndicator.css.js.map

package/dist-cjs/packages/lab/src/form-field/FormActivationIndicator.css.js.map

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

package/dist-cjs/packages/lab/src/form-field/FormActivationIndicator.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+require('./FormActivationIndicator.css.js');
+
+const ErrorIndicatorIcon = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", {
+    viewBox: "0 0 16 16",
+    focusable: false,
+    "data-testid": "ErrorIndicatorIcon",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("circle", {
+      cx: 8,
+      cy: 8,
+      r: 8
+    })
+  });
+};
+const WarningIndicatorIcon = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", {
+    viewBox: "0 0 16 16",
+    focusable: false,
+    "data-testid": "WarningIndicatorIcon",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("polygon", {
+      points: "0, 16 16, 16 16, 0"
+    })
+  });
+};
+const withBaseName = core.makePrefixer("saltFormActivationIndicator");
+const ActivationIndicatorIcon = ({
+  validationStatus,
+  ...restSvgProps
+}) => {
+  if (validationStatus === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ErrorIndicatorIcon, {
+      ...restSvgProps
+    });
+  } else if (validationStatus === "warning") {
+    return /* @__PURE__ */ jsxRuntime.jsx(WarningIndicatorIcon, {
+      ...restSvgProps
+    });
+  } else {
+    return null;
+  }
+};
+const FormActivationIndicator = ({
+  hasIcon,
+  validationStatus
+}) => {
+  const rootClass = "saltFormActivationIndicator";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: withBaseName(),
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: withBaseName("bar"),
+      children: hasIcon && validationStatus && /* @__PURE__ */ jsxRuntime.jsx(ActivationIndicatorIcon, {
+        className: `${rootClass}-icon`,
+        validationStatus
+      })
+    })
+  });
+};
+
+exports.FormActivationIndicator = FormActivationIndicator;
+//# sourceMappingURL=FormActivationIndicator.js.map

package/dist-cjs/packages/lab/src/form-field/FormActivationIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormActivationIndicator.js","sources":["../src/form-field/FormActivationIndicator.tsx"],"sourcesContent":["import { SVGAttributes } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { FormFieldProps } from \"./FormField\";\n\nimport \"./FormActivationIndicator.css\";\n\nconst ErrorIndicatorIcon = (props: SVGAttributes<SVGSVGElement>) => {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      focusable={false}\n      data-testid=\"ErrorIndicatorIcon\"\n      {...props}\n    >\n      <circle cx={8} cy={8} r={8} />\n    </svg>\n  );\n};\n\nconst WarningIndicatorIcon = (props: SVGAttributes<SVGSVGElement>) => {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      focusable={false}\n      data-testid=\"WarningIndicatorIcon\"\n      {...props}\n    >\n      <polygon points=\"0, 16 16, 16 16, 0\" />\n    </svg>\n  );\n};\n\nconst withBaseName = makePrefixer(\"saltFormActivationIndicator\");\n\nconst ActivationIndicatorIcon = ({\n  validationStatus,\n  ...restSvgProps\n}: Pick<FormFieldProps, \"validationStatus\"> & SVGAttributes<SVGSVGElement>) => {\n  if (validationStatus === \"error\") {\n    return <ErrorIndicatorIcon {...restSvgProps} />;\n  } else if (validationStatus === \"warning\") {\n    return <WarningIndicatorIcon {...restSvgProps} />;\n  } else {\n    return null;\n  }\n};\n\n// Removed `enabled` prop, it's better to let parent to control render\nexport interface FormActivationIndicatorProps\n  extends Pick<FormFieldProps, \"validationStatus\"> {\n  hasIcon?: boolean;\n}\n\nexport const FormActivationIndicator = ({\n  hasIcon,\n  validationStatus,\n}: FormActivationIndicatorProps) => {\n  const rootClass = \"saltFormActivationIndicator\";\n\n  return (\n    <div className={withBaseName()}>\n      <div className={withBaseName(\"bar\")}>\n        {hasIcon && validationStatus && (\n          <ActivationIndicatorIcon\n            className={`${rootClass}-icon`}\n            validationStatus={validationStatus}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["jsx","makePrefixer"],"mappings":";;;;;;;;AAMA,MAAM,kBAAA,GAAqB,CAAC,KAAwC,KAAA;AAClE,EAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,OAAQ,EAAA,WAAA;AAAA,IACR,SAAW,EAAA,KAAA;AAAA,IACX,aAAY,EAAA,oBAAA;AAAA,IACX,GAAG,KAAA;AAAA,IAEJ,QAAC,kBAAAA,cAAA,CAAA,QAAA,EAAA;AAAA,MAAO,EAAI,EAAA,CAAA;AAAA,MAAG,EAAI,EAAA,CAAA;AAAA,MAAG,CAAG,EAAA,CAAA;AAAA,KAAG,CAAA;AAAA,GAC9B,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,MAAM,oBAAA,GAAuB,CAAC,KAAwC,KAAA;AACpE,EAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,OAAQ,EAAA,WAAA;AAAA,IACR,SAAW,EAAA,KAAA;AAAA,IACX,aAAY,EAAA,sBAAA;AAAA,IACX,GAAG,KAAA;AAAA,IAEJ,QAAC,kBAAAA,cAAA,CAAA,SAAA,EAAA;AAAA,MAAQ,MAAO,EAAA,oBAAA;AAAA,KAAqB,CAAA;AAAA,GACvC,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,MAAM,YAAA,GAAeC,kBAAa,6BAA6B,CAAA,CAAA;AAE/D,MAAM,0BAA0B,CAAC;AAAA,EAC/B,gBAAA;AAAA,EACG,GAAA,YAAA;AACL,CAA+E,KAAA;AAC7E,EAAA,IAAI,qBAAqB,OAAS,EAAA;AAChC,IAAA,uBAAQD,cAAA,CAAA,kBAAA,EAAA;AAAA,MAAoB,GAAG,YAAA;AAAA,KAAc,CAAA,CAAA;AAAA,GAC/C,MAAA,IAAW,qBAAqB,SAAW,EAAA;AACzC,IAAA,uBAAQA,cAAA,CAAA,oBAAA,EAAA;AAAA,MAAsB,GAAG,YAAA;AAAA,KAAc,CAAA,CAAA;AAAA,GAC1C,MAAA;AACL,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAQO,MAAM,0BAA0B,CAAC;AAAA,EACtC,OAAA;AAAA,EACA,gBAAA;AACF,CAAoC,KAAA;AAClC,EAAA,MAAM,SAAY,GAAA,6BAAA,CAAA;AAElB,EAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAC3B,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,MAC/B,QAAA,EAAA,OAAA,IAAW,oCACTA,cAAA,CAAA,uBAAA,EAAA;AAAA,QACC,WAAW,CAAG,EAAA,SAAA,CAAA,KAAA,CAAA;AAAA,QACd,gBAAA;AAAA,OACF,CAAA;AAAA,KAEJ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/form-field/FormField.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".salt-density-high {\n  --formField-label-top-marginBottom: 2px;\n}\n.salt-density-medium {\n  --formField-label-top-marginBottom: 2px;\n}\n.salt-density-low {\n  --formField-label-top-marginBottom: 4px;\n}\n.salt-density-touch {\n  --formField-label-top-marginBottom: 8px;\n}\n\n/* Style applied to the root element */\n.saltFormField {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor);\n  --formField-activationIndicator-size: var(--salt-size-border);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle);\n  --formField-background: var(--salt-editable-primary-background);\n  --formField-focused-outlineColor: var(--salt-focused-outlineColor);\n  /* Set to 0 until helper text class provided */\n  --formField-helperText-height: 0px;\n}\n\n.saltFormField-tertiary.saltFormField {\n  --formField-background: var(--salt-editable-tertiary-background);\n}\n\n.saltFormField-secondary.saltFormField {\n  --formField-background: var(--salt-editable-secondary-background);\n}\n\n.saltFormField {\n  border: 0;\n  display: inline-grid;\n  font-size: var(--saltFormField-fontSize, var(--salt-text-fontSize));\n  margin: var(--saltFormField-margin, 0);\n  padding: 0;\n  position: relative;\n  min-width: 0;\n  vertical-align: top;\n  width: var(--saltFormField-width, auto);\n}\n\n/* Class applied to the root element on hover */\n.saltFormField:hover {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-hover);\n  --formField-activationIndicator-size: var(--salt-size-border);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle-hover);\n\n  --saltInput-cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Class applied to the root element when focused */\n.saltFormField-focused,\n.saltFormField-lowFocused,\n.saltFormField.saltFormField-focused:hover,\n.saltFormField.saltFormField-lowFocused:hover {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-active);\n  --formField-activationIndicator-size: var(--salt-editable-borderWidth-active);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle-active);\n\n  --saltInput-cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied when helper text is provided */\n.saltFormField-withHelperText {\n  --formField-helperText-marginTop: var(--formField-helperText-marginTop-default);\n  --formField-activationIndicator-offsetBottom: calc(var(--formField-helperText-marginTop) + var(--saltFormField-helperText-lineHeight, var(--formField-helperText-height)));\n}\n\n/* Class applied if `fullWidth={true}` and helper text is provided */\n.saltFormField-fullWidth.saltFormField-withHelperText {\n  --formField-helperText-marginTop: var(--formField-helperText-marginTop-fullWidth);\n  --formField-activationIndicator-offsetBottom: calc(var(--formField-helperText-marginTop-fullWidth) + var(--saltFormField-helperText-lineHeight, var(--formField-helperText-height)));\n}\n\n/* Class applied when helper text is provided */\n.saltFormField-withHelperText {\n  --formField-helperText-fontSize: var(--saltFormField-helperText-fontSize, var(--salt-text-fontSize));\n  --formField-helperText-baseHeight: calc(1.3 * var(--formField-helperText-fontSize));\n  --formField-helperText-calculatedHeight: max(var(--salt-text-label-minHeight), var(--formField-helperText-baseHeight));\n  --formField-helperText-height: calc(var(--formField-helperText-calculatedHeight) + var(--formField-helperText-marginTop));\n}\n\n/* Class applied to the root element if `fillWidth={true}` */\n.saltFormField-fullWidth {\n  width: 100%;\n}\n\n/* Class applied to the root element if `disabled={true}` */\n.saltFormField-disabled {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formField-activationIndicator-opacity: var(--salt-palette-opacity-foreground);\n  --formField-activationIndicator-size: var(--salt-size-border);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n  --formField-helperText-opacity: var(--salt-palette-opacity-foreground);\n\n  --saltControlLabel-color: var(--salt-text-primary-foreground-disabled);\n\n  --saltInput-cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Class applied to the root element on hover if `disabled={true}` */\n.saltFormField.saltFormField-disabled:hover {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formField-activationIndicator-size: var(--salt-size-border);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n\n  --saltInput-cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Class applied to the root element on warning state */\n.saltFormField.saltFormField-warning {\n  --formField-focused-outlineColor: var(--salt-status-warning-borderColor);\n  --formField-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on warning state on hover */\n.saltFormField.saltFormField-warning:hover {\n  --formField-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on error state */\n.saltFormField.saltFormField-error {\n  --formField-focused-outlineColor: var(--salt-status-error-borderColor);\n  --formField-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Class applied to the root element on error state on hover */\n.saltFormField.saltFormField-error:hover {\n  --formField-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Error state styling when `variant=\"secondary\"` */\n.saltFormField-secondary.saltFormField-error {\n  --formField-background: var(--salt-status-error-background-emphasize);\n}\n\n/* Warning state styling when `variant=\"secondary\"` */\n.saltFormField-secondary.saltFormField-warning {\n  --formField-background: var(--salt-status-warning-background-emphasize);\n}\n\n/* Class applied to the root element if `labelPlacement=\"left\"` */\n.saltFormField-labelLeft {\n  --formField-label-marginTop: var(--salt-size-unit);\n  --formField-label-paddingLeft: 0px;\n  --formField-label-paddingRight: calc(0.75 * var(--salt-size-unit));\n\n  align-self: start;\n  grid-template-columns: auto 1fr;\n}\n\n/* Class applied to the root element if `labelPlacement=\"top\"` or labelPlacement omitted (default is 'top') */\n.saltFormField-labelTop {\n  --formField-label-marginBottom: var(--formField-label-top-marginBottom);\n  --formField-label-marginTop: 0;\n  --formField-label-paddingLeft: var(--salt-size-unit);\n  --formField-label-paddingRight: var(--salt-size-unit);\n  /* Uses density invariant value unless helper text provided */\n  --formField-background-offset-height: calc(var(--formField-helperText-marginTop, 0px) + var(--saltFormField-helperText-lineHeight, var(--formField-helperText-height)));\n\n  background: linear-gradient(to top, transparent var(--formField-background-offset-height), var(--saltFormField-background, var(--formField-background)) var(--formField-background-offset-height));\n}\n\n/* Class applied if `labelPlacement=\"top\"` and helper text is provided */\n.saltFormField-labelTop.saltFormField-withHelperText {\n  /* Uses density aware value from FormHelperText */\n  --formField-background-offset-height: var(--formField-helperText-background-offset-height);\n}\n\n.saltFormField > * {\n  grid-column-start: 1;\n  grid-column-end: 2;\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormField-labelLeft > * {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormField > .saltFormLabel {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormField > .saltFormActivationIndicator {\n  grid-row-start: 3;\n  grid-row-end: 4;\n}\n\n.saltFormField > .saltFormFieldHelperText {\n  grid-row-start: 4;\n  grid-row-end: 5;\n}\n\n.saltFormField-labelLeft > .saltFormLabel ~ * {\n  grid-column-start: 2;\n  grid-column-end: 2;\n}\n\n/* Class applied if `readOnly={true}\"` */\n.saltFormField-readOnly {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n\n  --saltInput-cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Class applied to the root element if `readOnly={true}\"` on hover */\n.saltFormField.saltFormField-readOnly:hover {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n  --formField-activationIndicator-size: var(--salt-size-border);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle-readonly);\n\n  --saltInput-cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Class applied on focus with `labelTop={true}` and no helper text provided */\n.saltFormField:not(.saltFormField-withHelperText):not(.saltFormField-labelLeft).saltFormField-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--saltFormField-helperText-lineHeight, var(--formField-helperText-height, 0px));\n  outline-color: var(--formField-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n/* Class applied on focus with `labelTop={true}` and helper text provided */\n.saltFormField-withHelperText:not(.saltFormField-labelLeft).saltFormField-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--formField-helperText-height, 0px);\n  outline-color: var(--formField-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n.saltFormField-labelLeft.saltFormField-focused:before {\n  content: none;\n}\n\n/* Class applied on focus with `labelLeft={true}` */\n.saltFormField-labelLeft.saltFormField-focused > *:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n  outline-color: var(--formField-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  z-index: -1;\n}\n\n.saltFormField-labelLeft.saltFormField-focused > :is(.saltFormActivationIndicator, .saltFormFieldHelperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormField-labelLeft.saltFormField-focused {\n  outline: none;\n}\n\n.saltFormField-labelLeft.saltFormField-focused > :is(.saltFormField-activationIndicator, .saltFormField-helperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormField-labelLeft.saltFormField-focused .saltFormLabel + * {\n  outline: none;\n}\n\n.saltFormField-tertiary.saltFormField.saltFormField-labelLeft > .saltFormLabel ~ * {\n  background: var(--saltFormField-background, var(--formField-background));\n}\n\n/* TODO: I don't think this is needed, but commenting until work on FF done\n.saltFormField-primary.saltFormField > :not(.saltFormLabel):first-child {\n  background: var(--saltFormField-background, var(--formField-background));\n} */\n\n.saltFormField-labelLeft > .saltFormLabel ~ :not(.saltFormFieldHelperText) {\n  background: var(--saltFormField-background, var(--formField-background));\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=FormField.css.js.map

package/dist-cjs/packages/lab/src/form-field/FormField.css.js.map

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

package/dist-cjs/packages/lab/src/form-field/FormField.js

@@ -0,0 +1,196 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('classnames');
+var React = require('react');
+var core = require('@salt-ds/core');
+var FormFieldContext = require('../form-field-context/FormFieldContext.js');
+var Tooltip = require('../tooltip/Tooltip.js');
+require('../tooltip/TooltipContext.js');
+var useTooltip = require('../tooltip/useTooltip.js');
+var constant = require('./constant.js');
+var FormActivationIndicator = require('./FormActivationIndicator.js');
+var FormHelperText = require('./FormHelperText.js');
+var FormLabel = require('./FormLabel.js');
+require('./FormField.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const useA11yValue = ({
+  required,
+  disabled,
+  readOnly,
+  labelId,
+  helperTextId,
+  renderHelperText
+}) => {
+  return React.useMemo(
+    () => ({
+      "aria-labelledby": labelId,
+      "aria-required": required,
+      "aria-describedby": renderHelperText ? helperTextId : void 0,
+      disabled,
+      readOnly
+    }),
+    [labelId, disabled, readOnly, required, renderHelperText, helperTextId]
+  );
+};
+const useFormField = ({
+  onBlur,
+  onFocus
+}) => {
+  const [focused, setFocused] = React.useState(false);
+  const handleBlur = (event) => {
+    setFocused(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleFocus = (event) => {
+    setFocused(true);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  return [
+    {
+      focused
+    },
+    {
+      setFocused
+    },
+    {
+      onBlur: handleBlur,
+      onFocus: handleFocus
+    }
+  ];
+};
+const withBaseName = core.makePrefixer(constant.classBase);
+const FormField = React.forwardRef(
+  ({
+    ActivationIndicatorComponent = FormActivationIndicator.FormActivationIndicator,
+    children,
+    className,
+    disabled,
+    disableFocusRing = false,
+    fullWidth = true,
+    hasStatusIndicator,
+    HelperTextComponent = FormHelperText.FormHelperText,
+    HelperTextProps,
+    helperText,
+    helperTextPlacement = "bottom",
+    label,
+    LabelComponent = FormLabel.FormLabel,
+    labelPlacement = "top",
+    LabelProps = { displayedNecessity: "required" },
+    onBlur,
+    onFocus,
+    readOnly,
+    required,
+    StatusIndicatorProps: StatusIndicatorProps2,
+    validationStatus,
+    variant = "primary",
+    ...restProps
+  }, ref) => {
+    const labelId = core.useId(LabelProps == null ? void 0 : LabelProps.id);
+    const helperTextId = core.useId(HelperTextProps == null ? void 0 : HelperTextProps.id);
+    const rootRef = React.useRef(null);
+    const renderHelperText = !!helperText;
+    const a11yValue = useA11yValue({
+      required,
+      disabled,
+      readOnly,
+      labelId,
+      helperTextId,
+      renderHelperText
+    });
+    const [states, dispatchers, eventHandlers] = useFormField({
+      onBlur,
+      onFocus
+    });
+    const hasLabel = label !== void 0;
+    const labelTop = hasLabel && labelPlacement === "top";
+    const labelLeft = hasLabel && labelPlacement === "left";
+    const isWarning = validationStatus === "warning";
+    const isError = validationStatus === "error";
+    const focusClass = disableFocusRing ? "lowFocused" : "focused";
+    const inlineHelperText = renderHelperText && helperTextPlacement === "bottom";
+    const tooltipHelperText = renderHelperText && helperTextPlacement === "tooltip" && !hasStatusIndicator;
+    const { getTooltipProps, getTriggerProps } = useTooltip.useTooltip({
+      disabled: !tooltipHelperText
+    });
+    const { ref: triggerRef, ...triggerProps } = getTriggerProps({
+      className: cx__default["default"](
+        withBaseName(),
+        {
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("readOnly")]: readOnly,
+          [withBaseName("warning")]: isWarning,
+          [withBaseName("error")]: isError,
+          [withBaseName("fullWidth")]: fullWidth,
+          [withBaseName(focusClass)]: states.focused,
+          [withBaseName("labelTop")]: labelTop,
+          [withBaseName("labelLeft")]: labelLeft,
+          [withBaseName(`withHelperText`)]: inlineHelperText,
+          [withBaseName(variant)]: variant
+        },
+        className
+      ),
+      ...eventHandlers,
+      ...restProps
+    });
+    const handleTriggerRef = core.useForkRef(triggerRef, rootRef);
+    const handleRef = core.useForkRef(handleTriggerRef, ref);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          ref: handleRef,
+          ...triggerProps,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(FormFieldContext.FormFieldContext.Provider, {
+            value: {
+              ...states,
+              ...dispatchers,
+              ...eventHandlers,
+              a11yProps: a11yValue,
+              inFormField: true,
+              ref: rootRef
+            },
+            children: [
+              hasLabel && /* @__PURE__ */ jsxRuntime.jsx(LabelComponent, {
+                ...LabelProps,
+                validationStatus,
+                hasStatusIndicator,
+                StatusIndicatorProps: StatusIndicatorProps2,
+                className: LabelProps.className,
+                label,
+                disabled,
+                readOnly,
+                required,
+                tooltipText: helperText,
+                id: labelId
+              }),
+              children,
+              /* @__PURE__ */ jsxRuntime.jsx(ActivationIndicatorComponent, {
+                hasIcon: !hasStatusIndicator,
+                validationStatus
+              }),
+              renderHelperText && /* @__PURE__ */ jsxRuntime.jsx(HelperTextComponent, {
+                helperText,
+                helperTextPlacement,
+                ...HelperTextProps,
+                id: helperTextId
+              })
+            ]
+          })
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+          ...getTooltipProps({ title: helperText })
+        })
+      ]
+    });
+  }
+);
+
+exports.FormField = FormField;
+exports.useFormField = useFormField;
+//# sourceMappingURL=FormField.js.map

package/dist-cjs/packages/lab/src/form-field/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport {\n  Dispatch,\n  ElementType,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  SetStateAction,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { FormFieldContext } from \"../form-field-context\";\nimport { Tooltip, useTooltip } from \"../tooltip\";\nimport { classBase } from \"./constant\";\nimport {\n  FormActivationIndicator,\n  FormActivationIndicatorProps,\n} from \"./FormActivationIndicator\";\nimport { FormHelperText, FormHelperTextProps } from \"./FormHelperText\";\nimport { FormLabel, FormLabelProps } from \"./FormLabel\";\nimport { NecessityIndicatorOptions } from \"./NecessityIndicator\";\nimport { StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\nexport type FormFieldHelperTextPlacement = \"bottom\" | \"tooltip\";\nexport type FormFieldValidationStatus = \"error\" | \"warning\";\n\nexport interface A11yValueProps\n  extends Pick<NecessityIndicatorOptions, \"required\"> {\n  /**\n   * If `true`, the FormField will be disabled.\n   */\n  disabled?: boolean;\n  /** id of the helper text node */\n  helperTextId?: string;\n  /** id of the label node */\n  labelId?: string;\n  /**\n   * The FormField value is Readonly\n   */\n  readOnly?: boolean;\n\n  /**\n   * Whether the form field needs to render helper text\n   */\n  renderHelperText?: boolean;\n}\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * The component used for activation indicator. Default to `FormActivationIndicator`.\n   */\n  ActivationIndicatorComponent?: ElementType<FormActivationIndicatorProps>;\n  /**\n   * Outer focus ring focus will not be applied. Defaults to false.\n   */\n  disableFocusRing?: boolean;\n  // I hate this fullWidth business. We should support a width prop. The default should be 100% (standard block behaviour)\n  // we should also support 'auto' or explicit numeric values\n  /**\n   * Whether the form field is occupying full width.\n   */\n  fullWidth?: boolean;\n  /**\n   * Whether to show the StatusIndicator component for validation states.\n   */\n  hasStatusIndicator?: boolean;\n  /**\n   * The helper text content\n   */\n  helperText?: string;\n  /**\n   * The component used for the helper text. Default to `FormHelperText`.\n   */\n  HelperTextComponent?: ElementType<FormHelperTextProps>;\n  /**\n   * Location the helperText, values: 'bottom' (default) or 'tooltip'.\n   */\n  helperTextPlacement?: FormFieldHelperTextPlacement;\n  /**\n   * Props to be applied to the `HelperTextComponent`.\n   *\n   * Generic on `FormHelperTextProps` is omitted.\n   */\n  HelperTextProps?: Partial<FormHelperTextProps>;\n  /**\n   * The label value for the FormField\n   */\n  label?: string;\n  /**\n   * The component used for the label. Default to `FormLabel`.\n   */\n  LabelComponent?: ElementType;\n  /**\n   * Location the label, values: 'top' (default) or 'left'\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * Props to be applied to the `LabelComponent`\n   */\n  LabelProps?: Partial<FormLabelProps>;\n  /**\n   * Override props to be used with the StatusIndicator component\n   */\n  StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n  /**\n   * The state for the FormField: Must be one of: 'error'|'warning'|undefined\n   */\n  validationStatus?: FormFieldValidationStatus;\n  /**\n   * FormField variants; defaults to primary.\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport interface useA11yValueValue {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-required\": A11yValueProps[\"required\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n  disabled: A11yValueProps[\"disabled\"];\n  readOnly: A11yValueProps[\"readOnly\"];\n}\n\nconst useA11yValue = ({\n  required,\n  disabled,\n  readOnly,\n  labelId,\n  helperTextId,\n  renderHelperText,\n}: A11yValueProps) => {\n  return useMemo(\n    () => ({\n      \"aria-labelledby\": labelId,\n      \"aria-required\": required,\n      \"aria-describedby\": renderHelperText ? helperTextId : undefined,\n      disabled,\n      readOnly,\n    }),\n    [labelId, disabled, readOnly, required, renderHelperText, helperTextId]\n  );\n};\n\n// TODO: Add TS props for this\nexport const useFormField = ({\n  onBlur,\n  onFocus,\n}: {\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  onFocus?: FocusEventHandler<HTMLDivElement>;\n}): [\n  { focused: boolean },\n  { setFocused: Dispatch<SetStateAction<boolean>> },\n  {\n    onBlur: FocusEventHandler<HTMLDivElement>;\n    onFocus: FocusEventHandler<HTMLDivElement>;\n  }\n] => {\n  const [focused, setFocused] = useState(false);\n  const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n    setFocused(false);\n    onBlur?.(event);\n  };\n  const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n    setFocused(true);\n    onFocus?.(event);\n  };\n  return [\n    {\n      focused,\n    },\n    {\n      setFocused,\n    },\n    {\n      onBlur: handleBlur,\n      onFocus: handleFocus,\n    },\n  ];\n};\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const FormField = forwardRef(\n  (\n    {\n      ActivationIndicatorComponent = FormActivationIndicator,\n      children,\n      className,\n      disabled,\n      disableFocusRing = false,\n      fullWidth = true,\n      hasStatusIndicator,\n      HelperTextComponent = FormHelperText,\n      HelperTextProps,\n      helperText,\n      helperTextPlacement = \"bottom\",\n      label,\n      LabelComponent = FormLabel,\n      labelPlacement = \"top\",\n      LabelProps = { displayedNecessity: \"required\" },\n      onBlur,\n      onFocus,\n      readOnly,\n      required,\n      StatusIndicatorProps,\n      validationStatus,\n      variant = \"primary\",\n      ...restProps\n    }: FormFieldProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const labelId = useId(LabelProps?.id);\n    const helperTextId = useId(HelperTextProps?.id);\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const renderHelperText = !!helperText;\n\n    const a11yValue = useA11yValue({\n      required,\n      disabled,\n      readOnly,\n      labelId,\n      helperTextId,\n      renderHelperText,\n    });\n\n    const [states, dispatchers, eventHandlers] = useFormField({\n      onBlur,\n      onFocus,\n    });\n\n    const hasLabel = label !== undefined;\n    const labelTop = hasLabel && labelPlacement === \"top\";\n    const labelLeft = hasLabel && labelPlacement === \"left\";\n    const isWarning = validationStatus === \"warning\";\n    const isError = validationStatus === \"error\";\n    const focusClass = disableFocusRing\n      ? \"lowFocused\"\n      : \"focused\"; /* NOTE: need to look at */\n    const inlineHelperText =\n      renderHelperText && helperTextPlacement === \"bottom\";\n    const tooltipHelperText =\n      renderHelperText &&\n      helperTextPlacement === \"tooltip\" &&\n      !hasStatusIndicator;\n\n    const { getTooltipProps, getTriggerProps } = useTooltip({\n      disabled: !tooltipHelperText,\n    });\n\n    const { ref: triggerRef, ...triggerProps } = getTriggerProps({\n      className: cx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"readOnly\")]: readOnly,\n          [withBaseName(\"warning\")]: isWarning,\n          [withBaseName(\"error\")]: isError,\n          [withBaseName(\"fullWidth\")]: fullWidth,\n          [withBaseName(focusClass)]: states.focused,\n          [withBaseName(\"labelTop\")]: labelTop,\n          [withBaseName(\"labelLeft\")]: labelLeft,\n          [withBaseName(`withHelperText`)]: inlineHelperText,\n          [withBaseName(variant)]: variant,\n        },\n        className\n      ),\n      ...eventHandlers,\n      ...restProps,\n    });\n\n    const handleTriggerRef = useForkRef(triggerRef, rootRef);\n    const handleRef = useForkRef(handleTriggerRef, ref);\n\n    return (\n      <>\n        <div ref={handleRef} {...triggerProps}>\n          <FormFieldContext.Provider\n            value={{\n              ...states,\n              ...dispatchers,\n              ...eventHandlers,\n              a11yProps: a11yValue,\n              inFormField: true,\n              ref: rootRef,\n            }}\n          >\n            {hasLabel && (\n              <LabelComponent\n                {...LabelProps}\n                validationStatus={validationStatus}\n                hasStatusIndicator={hasStatusIndicator}\n                StatusIndicatorProps={StatusIndicatorProps}\n                className={LabelProps.className}\n                label={label}\n                disabled={disabled}\n                readOnly={readOnly}\n                required={required}\n                tooltipText={helperText}\n                id={labelId}\n              />\n            )}\n            {children}\n            <ActivationIndicatorComponent\n              hasIcon={!hasStatusIndicator}\n              validationStatus={validationStatus}\n            />\n            {renderHelperText && (\n              <HelperTextComponent\n                helperText={helperText}\n                helperTextPlacement={helperTextPlacement}\n                {...HelperTextProps}\n                id={helperTextId}\n              />\n            )}\n          </FormFieldContext.Provider>\n        </div>\n        <Tooltip {...getTooltipProps({ title: helperText })} />\n      </>\n    );\n  }\n);\n"],"names":["useMemo","useState","makePrefixer","classBase","forwardRef","FormActivationIndicator","FormHelperText","FormLabel","StatusIndicatorProps","useId","useRef","useTooltip","cx","useForkRef","jsxs","Fragment","jsx","FormFieldContext","Tooltip"],"mappings":"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"}

package/dist-cjs/packages/lab/src/form-field/FormHelperText.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-high {\n  --formField-helperText-marginTop-default: 2px;\n  --formField-helperText-marginTop-fullWidth: 3px;\n\n  --formField-helperText-background-offset-height: 17px;\n}\n.salt-density-medium {\n  --formField-helperText-marginTop-default: 2px;\n  --formField-helperText-marginTop-fullWidth: 3px;\n  --formField-helperText-transform: translate(0, 2px);\n\n  --formField-helperText-background-offset-height: 19px;\n}\n.salt-density-touch {\n  --formField-helperText-marginTop-default: 8px;\n  --formField-helperText-marginTop-fullWidth: 5px;\n  --formField-helperText-transform: translate(0, -3px);\n\n  --formField-helperText-background-offset-height: 21px;\n}\n.salt-density-low {\n  --formField-helperText-marginTop-default: 4px;\n  --formField-helperText-marginTop-fullWidth: 5px;\n  --formField-helperText-transform: translate(0, 1px);\n\n  --formField-helperText-background-offset-height: 21px;\n}\n\n/* Class applied if `fullWidth={true}` */\n.saltFormField-fullWidth {\n  --formField-helperText-transform: none;\n}\n\n/* Class applied to the helper text container */\n.saltFormFieldHelperText {\n  --formField-helperText-opacity: 1;\n\n  color: var(--saltFormField-helperText-color, var(--salt-text-secondary-foreground));\n  font-size: var(--formField-helperText-fontSize);\n  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n  letter-spacing: var(--saltFormField-helperText-letterSpacing, 0);\n  line-height: var(--saltFormField-helperText-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltFormField-helperText-minHeight, var(--salt-text-label-minHeight));\n  margin-bottom: var(--saltFormField-helperText-marginBottom, 0);\n  margin-top: var(--saltFormField-helperText-marginTop, var(--formField-helperText-marginTop));\n  opacity: var(--saltFormField-helperText-opacity, var(--formField-helperText-opacity));\n  padding-left: var(--saltFormField-helperText-paddingLeft, var(--salt-size-unit));\n  padding-right: var(--saltFormField-helperText-paddingRight, var(--salt-size-unit));\n  transform: var(--saltFormField-helperText-transform, var(--formField-helperText-transform, none));\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=FormHelperText.css.js.map

package/dist-cjs/packages/lab/src/form-field/FormHelperText.css.js.map

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

package/dist-cjs/packages/lab/src/form-field/FormHelperText.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./FormHelperText.css.js');
+
+const FormHelperText = ({
+  helperText,
+  helperTextPlacement,
+  ...restProps
+}) => {
+  if (helperText) {
+    if (helperTextPlacement === "bottom") {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", {
+        className: `saltFormFieldHelperText`,
+        ...restProps,
+        children: helperText
+      });
+    } else if (helperTextPlacement === "tooltip") {
+      console.warn("helperTextPlacement tooltip has not yet implemented");
+      return null;
+    } else {
+      return null;
+    }
+  } else {
+    return null;
+  }
+};
+
+exports.FormHelperText = FormHelperText;
+//# sourceMappingURL=FormHelperText.js.map

package/dist-cjs/packages/lab/src/form-field/FormHelperText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormHelperText.js","sources":["../src/form-field/FormHelperText.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from \"react\";\nimport { FormFieldProps } from \"./FormField\";\n\nimport \"./FormHelperText.css\";\n\nexport type FormHelperTextProps<E extends React.ElementType = \"p\"> =\n  ComponentPropsWithoutRef<E> & {\n    helperText: FormFieldProps[\"helperText\"];\n    helperTextPlacement: FormFieldProps[\"helperTextPlacement\"];\n  };\n\nexport const FormHelperText = <E extends React.ElementType = \"p\">({\n  helperText,\n  helperTextPlacement,\n  ...restProps\n}: FormHelperTextProps<E>) => {\n  if (helperText) {\n    if (helperTextPlacement === \"bottom\") {\n      return (\n        <p className={`saltFormFieldHelperText`} {...restProps}>\n          {helperText}\n        </p>\n      );\n    } else if (helperTextPlacement === \"tooltip\") {\n      console.warn(\"helperTextPlacement tooltip has not yet implemented\");\n      return null;\n    } else {\n      return null;\n    }\n  } else {\n    return null;\n  }\n};\n"],"names":["jsx"],"mappings":";;;;;;;AAWO,MAAM,iBAAiB,CAAoC;AAAA,EAChE,UAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,SAAA;AACL,CAA8B,KAAA;AAC5B,EAAA,IAAI,UAAY,EAAA;AACd,IAAA,IAAI,wBAAwB,QAAU,EAAA;AACpC,MAAA,uBACGA,cAAA,CAAA,GAAA,EAAA;AAAA,QAAE,SAAW,EAAA,CAAA,uBAAA,CAAA;AAAA,QAA4B,GAAG,SAAA;AAAA,QAC1C,QAAA,EAAA,UAAA;AAAA,OACH,CAAA,CAAA;AAAA,KAEJ,MAAA,IAAW,wBAAwB,SAAW,EAAA;AAC5C,MAAA,OAAA,CAAQ,KAAK,qDAAqD,CAAA,CAAA;AAClE,MAAO,OAAA,IAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAAA,GACK,MAAA;AACL,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF;;;;"}

package/dist-cjs/packages/lab/src/form-field/FormLabel.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "/* Styles applied to root element */\n.salt-density-touch {\n  --formField-label-default-top: 11px;\n  --formField-label-left-top: 16px;\n  --formField-label-minHeight: 16px;\n}\n.salt-density-low {\n  --formField-label-default-top: 7px;\n  --formField-label-left-top: 12px;\n}\n.salt-density-medium {\n  --formField-label-default-top: 5px;\n  --formField-label-left-top: 8px;\n}\n.salt-density-high {\n  --formField-label-default-top: 3px;\n  --formField-label-left-top: 4px;\n}\n\n.saltFormLabel {\n  --formField-label-fontSize: var(--saltFormField-label-fontSize, var(--salt-text-label-fontSize));\n  --formField-label-top: var(--formField-label-default-top);\n  --formField-label-width: 100%;\n}\n\n.saltFormField-labelLeft .saltFormLabel {\n  --formField-label-top: var(--formField-label-left-top);\n  --formField-label-width: auto;\n}\n\n.saltFormLabel {\n  align-items: center;\n  color: var(--saltFormField-label-text-color, var(--salt-text-secondary-foreground));\n  display: block;\n  font-size: var(--formField-label-fontSize);\n  margin-bottom: var(--saltFormField-label-marginBottom, var(--formField-label-marginBottom));\n  min-height: var(--saltFormField-label-minHeight, var(--formField-label-minHeight, var(--salt-text-label-minHeight)));\n  margin-top: var(--saltFormField-label-marginTop, 0px);\n  line-height: var(--saltFormField-label-lineHeight, var(--salt-text-label-lineHeight));\n  overflow: hidden;\n  padding-left: var(--saltFormField-label-paddingLeft, var(--formField-label-paddingLeft));\n  padding-right: var(--saltFormField-label-paddingRight, var(--formField-label-paddingRight));\n  padding-top: var(--saltFormField-label-paddingTop, 0);\n  padding-bottom: var(--saltFormField-label-paddingBottom, 0);\n  text-overflow: ellipsis;\n  top: var(--saltFormField-label-top, var(--formField-label-top));\n  transform: translate(var(--saltFormField-label-transform-x, 0), var(--saltFormField-label-transform-y, var(--formField-label-top)));\n  white-space: nowrap;\n  width: var(--saltFormField-label-width, var(--formField-label-width, 100%));\n}\n\n.saltFormLabel ~ * {\n  z-index: 1;\n}\n\n/* Styles applied when `disabled={true}` */\n.saltFormLabel-disabled {\n  color: var(--saltFormField-label-text-color-disabled, var(--salt-text-secondary-foreground-disabled));\n  cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Styles applied when displayedNecessity or necessityText provided */\n.saltFormLabel-necessityIndicator {\n  font-style: var(--saltFormField-label-necessityIndicator-fontStyle, var(--salt-editable-help-fontStyle));\n  margin-left: 1ch;\n}\n\n/* Styles applied if `hasStatusIndicator={true}` */\n.saltFormLabel-statusIndicator {\n  margin-left: 6px;\n  vertical-align: top;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=FormLabel.css.js.map

package/dist-cjs/packages/lab/src/form-field/FormLabel.css.js.map

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

package/dist-cjs/packages/lab/src/form-field/FormLabel.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('classnames');
+var core = require('@salt-ds/core');
+var NecessityIndicator = require('./NecessityIndicator.js');
+var StatusIndicator = require('./StatusIndicator.js');
+require('./FormLabel.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const withBaseName = core.makePrefixer("saltFormLabel");
+const FormLabel = ({
+  label,
+  NecessityIndicator: NecessityIndicator$1 = NecessityIndicator.NecessityIndicator,
+  required,
+  displayedNecessity,
+  hasStatusIndicator = false,
+  StatusIndicatorProps: StatusIndicatorProps2,
+  validationStatus,
+  necessityText,
+  className,
+  disabled,
+  readOnly,
+  tooltipText,
+  ...restProps
+}) => /* @__PURE__ */ jsxRuntime.jsxs("label", {
+  className: cx__default["default"](withBaseName(), className, {
+    [withBaseName("disabled")]: disabled
+  }),
+  ...restProps,
+  children: [
+    label,
+    /* @__PURE__ */ jsxRuntime.jsx(NecessityIndicator$1, {
+      required,
+      displayedNecessity,
+      necessityText,
+      className: withBaseName("necessityIndicator")
+    }),
+    hasStatusIndicator && /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
+      className: withBaseName("statusIndicator"),
+      status: validationStatus,
+      tooltipText,
+      hasTooltip: true,
+      ...StatusIndicatorProps2
+    })
+  ]
+});
+
+exports.FormLabel = FormLabel;
+//# sourceMappingURL=FormLabel.js.map

package/dist-cjs/packages/lab/src/form-field/FormLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.js","sources":["../src/form-field/FormLabel.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { ElementType, HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { FormFieldValidationStatus } from \"./FormField\";\nimport {\n  NecessityIndicator as DefaultNecessityIndicator,\n  NecessityIndicatorOptions,\n} from \"./NecessityIndicator\";\nimport { StatusIndicator, StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormLabel\");\nexport interface FormLabelProps\n  extends HTMLAttributes<HTMLLabelElement>,\n    NecessityIndicatorOptions {\n  /**\n   * Whether the form field is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Adjusts whether the StatusIndicator component is shown\n   */\n  hasStatusIndicator?: boolean;\n  /**\n   * The label value for the FormLabel\n   */\n  label?: string;\n  /**\n   * An optional renderer function used to customize the necessity adornment\n   */\n  NecessityIndicator?: ElementType<NecessityIndicatorOptions>;\n  /**\n   * Whether the form field is readOnly.\n   */\n  readOnly?: boolean;\n  /**\n   * Props used to configure the StatusIndicator component if hasStatusIndicator is true\n   */\n  StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n  /**\n   * The status for the FormField: Must be one of: 'error'|'warning'|undefined\n   */\n  validationStatus?: FormFieldValidationStatus;\n  /**\n   * Text to be shown in the Tooltip.\n   */\n  tooltipText?: string;\n}\n\nexport const FormLabel = ({\n  label,\n  NecessityIndicator = DefaultNecessityIndicator,\n  required,\n  displayedNecessity,\n  hasStatusIndicator = false,\n  StatusIndicatorProps,\n  validationStatus,\n  necessityText,\n  className,\n  disabled,\n  readOnly,\n  tooltipText,\n  ...restProps\n}: FormLabelProps) => (\n  <label\n    className={cx(withBaseName(), className, {\n      [withBaseName(\"disabled\")]: disabled,\n    })}\n    {...restProps}\n  >\n    {label}\n\n    <NecessityIndicator\n      required={required}\n      displayedNecessity={displayedNecessity}\n      necessityText={necessityText}\n      className={withBaseName(\"necessityIndicator\")}\n    />\n    {hasStatusIndicator && (\n      <StatusIndicator\n        className={withBaseName(\"statusIndicator\")}\n        status={validationStatus}\n        tooltipText={tooltipText}\n        hasTooltip\n        {...StatusIndicatorProps}\n      />\n    )}\n  </label>\n);\n"],"names":["makePrefixer","NecessityIndicator","DefaultNecessityIndicator","StatusIndicatorProps","jsxs","cx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAsC1C,MAAM,YAAY,CAAC;AAAA,EACxB,KAAA;AAAA,sBACAC,oBAAqB,GAAAC,qCAAA;AAAA,EACrB,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAqB,GAAA,KAAA;AAAA,EACrB,oBAAAC,EAAAA,qBAAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAA,qBACGC,eAAA,CAAA,OAAA,EAAA;AAAA,EACC,SAAW,EAAAC,sBAAA,CAAG,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,IACvC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,GAC7B,CAAA;AAAA,EACA,GAAG,SAAA;AAAA,EAEH,QAAA,EAAA;AAAA,IAAA,KAAA;AAAA,oBAEAC,cAAA,CAAAL,oBAAA,EAAA;AAAA,MACC,QAAA;AAAA,MACA,kBAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA,EAAW,aAAa,oBAAoB,CAAA;AAAA,KAC9C,CAAA;AAAA,IACC,sCACEK,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,MACzC,MAAQ,EAAA,gBAAA;AAAA,MACR,WAAA;AAAA,MACA,UAAU,EAAA,IAAA;AAAA,MACT,GAAGJ,qBAAAA;AAAA,KACN,CAAA;AAAA,GAAA;AAAA,CAEJ;;;;"}