@artsy/palette 45.13.1 → 45.14.0-canary.1497.33070.0

package/dist/esm/elements/TextArea/TextArea.js

@@ -0,0 +1,122 @@
+var _excluded = ["error", "disabled", "focus", "hover", "characterLimit", "characterLimitHelper", "title", "description", "defaultValue", "required", "onChange"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { themeGet } from "@styled-system/theme-get";
+import React, { useCallback, useMemo, useState } from "react";
+import styled, { css } from "styled-components";
+import { RequiredField } from "../../shared/RequiredField";
+import { Box, BoxProps, splitBoxProps } from "../Box";
+import { Text } from "../Text";
+import { Tooltip } from "../Tooltip";
+import { TEXTAREA_STATES } from "./tokens";
+import { FORM_ELEMENT_TRANSITION } from "../../helpers";
+/** TextArea */
+export var TextArea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var error = _ref.error,
+    disabled = _ref.disabled,
+    focus = _ref.focus,
+    hover = _ref.hover,
+    characterLimit = _ref.characterLimit,
+    characterLimitHelper = _ref.characterLimitHelper,
+    title = _ref.title,
+    description = _ref.description,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
+    required = _ref.required,
+    onChange = _ref.onChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _splitBoxProps = splitBoxProps(rest),
+    _splitBoxProps2 = _slicedToArray(_splitBoxProps, 2),
+    boxProps = _splitBoxProps2[0],
+    inputProps = _splitBoxProps2[1];
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var characterLimitExceeded = useCallback(function (text) {
+    return Boolean(characterLimit && text.length > characterLimit);
+  }, [characterLimit]);
+  var characterLimitReached = useCallback(function (text) {
+    return Boolean(characterLimit && text.length >= characterLimit);
+  }, [characterLimit]);
+  var handleChange = useCallback(function (event) {
+    var nextValue = event.currentTarget.value;
+    setValue(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      value: nextValue,
+      exceedsCharacterLimit: characterLimitExceeded(nextValue)
+    });
+  }, [characterLimitExceeded, onChange]);
+  var hasError = useMemo(function () {
+    return Boolean(error || characterLimitExceeded(value));
+  }, [characterLimitExceeded, error, value]);
+  var showCharacterLimitReached = characterLimitHelper && typeof characterLimit !== "undefined" && characterLimitReached(value);
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    width: "100%"
+  }, boxProps), !!description && /*#__PURE__*/React.createElement(Tooltip, {
+    pointer: true,
+    content: description,
+    placement: "top-end"
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "xs",
+    color: "mono60",
+    textAlign: "right"
+  }, /*#__PURE__*/React.createElement("u", null, "What is this?"))), /*#__PURE__*/React.createElement(Box, {
+    position: "relative",
+    mt: !!title && !description ? 1 : 0
+  }, /*#__PURE__*/React.createElement(StyledTextArea, _extends({
+    ref: ref,
+    disabled: disabled,
+    focus: focus,
+    hover: hover,
+    error: hasError,
+    onChange: handleChange,
+    defaultValue: defaultValue,
+    required: required,
+    title: title,
+    placeholder: inputProps.placeholder || " "
+  }, inputProps)), !!title && /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: inputProps.name
+  }, title, /*#__PURE__*/React.createElement("span", null))), (required || characterLimit) && !(error && typeof error === "string") && /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    mt: 0.5,
+    mx: 1
+  }, required && !showCharacterLimitReached && /*#__PURE__*/React.createElement(RequiredField, {
+    flex: 1,
+    disabled: disabled
+  }), showCharacterLimitReached && /*#__PURE__*/React.createElement(Text, {
+    flex: 1,
+    variant: "xs",
+    color: "mono60",
+    textAlign: "left"
+  }, "Character limit reached"), typeof characterLimit !== "undefined" && /*#__PURE__*/React.createElement(Text, {
+    flex: 1,
+    variant: "xs",
+    color: characterLimitExceeded(value) ? "red100" : "mono60",
+    textAlign: "right"
+  }, value.length, "/", characterLimit)), error && typeof error === "string" && /*#__PURE__*/React.createElement(Text, {
+    variant: "xs",
+    color: "red100",
+    mt: 0.5,
+    ml: 1
+  }, error));
+});
+TextArea.displayName = "TextArea";
+var StyledTextArea = styled.textarea.withConfig({
+  displayName: "TextArea__StyledTextArea",
+  componentId: "sc-tnq35k-0"
+})(["appearance:none;display:block;width:100%;background-color:", ";padding:", ";resize:vertical;transition:border-color 0.25s,color 0.25s;outline:none;border:1px solid;border-radius:3px;font-family:", ";&::placeholder{transition:color 0.25s,opacity 0.25s;}", ""], themeGet("colors.mono0"), themeGet("space.1"), themeGet("fonts.sans"), function (props) {
+  return css(["", " ", " ", " ", " ", " ", " &:hover{", "}&:not(:placeholder-shown){", " ", "}&:focus{outline:none;", " :not(:placeholder-shown){", " ", "}&::placeholder{opacity:1;}}&:disabled{cursor:default;", "}", ""], TEXTAREA_STATES.default, props.hover && TEXTAREA_STATES.hover, props.focus && TEXTAREA_STATES.focus, props.active && TEXTAREA_STATES.active, props.disabled && TEXTAREA_STATES.disabled, props.error && TEXTAREA_STATES.error, TEXTAREA_STATES.hover, TEXTAREA_STATES.completed, props.error && TEXTAREA_STATES.error, TEXTAREA_STATES.focus, !!props.placeholder && TEXTAREA_STATES.active, props.error && TEXTAREA_STATES.error, TEXTAREA_STATES.disabled, props.title && css(["&::placeholder{opacity:0;}"]));
+});
+var StyledLabel = styled.label.withConfig({
+  displayName: "TextArea__StyledLabel",
+  componentId: "sc-tnq35k-1"
+})(["position:absolute;top:25px;left:6px;padding:0 5px;background-color:transparent;transform:translateY(-50%);transition:", ";transition-property:color,transform,padding,font-size;font-family:", ";pointer-events:none;& > span{background-color:", ";height:100%;width:100%;display:block;position:absolute;top:0;left:0;z-index:-1;transition:", ";transition-property:height,top;transition-delay:0.1s;}"], FORM_ELEMENT_TRANSITION, themeGet("fonts.sans"), themeGet("colors.mono0"), FORM_ELEMENT_TRANSITION);
+//# sourceMappingURL=TextArea.js.map

package/dist/esm/elements/TextArea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","names":["themeGet","React","useCallback","useMemo","useState","styled","css","RequiredField","Box","BoxProps","splitBoxProps","Text","Tooltip","TEXTAREA_STATES","FORM_ELEMENT_TRANSITION","TextArea","forwardRef","_ref","ref","error","disabled","focus","hover","characterLimit","characterLimitHelper","title","description","_ref$defaultValue","defaultValue","required","onChange","rest","_objectWithoutProperties","_excluded","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","inputProps","_useState","_useState2","value","setValue","characterLimitExceeded","text","Boolean","length","characterLimitReached","handleChange","event","nextValue","currentTarget","exceedsCharacterLimit","hasError","showCharacterLimitReached","createElement","_extends","width","pointer","content","placement","variant","color","textAlign","position","mt","StyledTextArea","placeholder","StyledLabel","htmlFor","name","display","mx","flex","ml","displayName","textarea","withConfig","componentId","props","default","active","completed","label"],"sources":["../../../../src/elements/TextArea/TextArea.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { TEXTAREA_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface TextAreaProps\n  extends BoxProps,\n    Omit<\n      React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n      \"onChange\" | \"title\"\n    > {\n  active?: boolean\n  characterLimit?: number\n  characterLimitHelper?: boolean\n  defaultValue?: string\n  description?: React.ReactNode\n  required?: boolean\n  title?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  onChange?(result: TextAreaChange): void\n}\n\nexport interface TextAreaChange {\n  value: string\n  exceedsCharacterLimit: boolean\n}\n\n/** TextArea */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      error,\n      disabled,\n      focus,\n      hover,\n      characterLimit,\n      characterLimitHelper,\n      title,\n      description,\n      defaultValue = \"\",\n      required,\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [value, setValue] = useState(defaultValue)\n\n    const characterLimitExceeded = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length > characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const characterLimitReached = useCallback(\n      (text: string) => {\n        return Boolean(characterLimit && text.length >= characterLimit)\n      },\n      [characterLimit]\n    )\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.({\n          value: nextValue,\n          exceedsCharacterLimit: characterLimitExceeded(nextValue),\n        })\n      },\n      [characterLimitExceeded, onChange]\n    )\n\n    const hasError = useMemo(\n      () => Boolean(error || characterLimitExceeded(value)),\n      [characterLimitExceeded, error, value]\n    )\n\n    const showCharacterLimitReached =\n      characterLimitHelper &&\n      typeof characterLimit !== \"undefined\" &&\n      characterLimitReached(value)\n\n    return (\n      <Box width=\"100%\" {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledTextArea\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={hasError}\n            onChange={handleChange}\n            defaultValue={defaultValue}\n            required={required}\n            title={title}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n        </Box>\n\n        {(required || characterLimit) && !(error && typeof error === \"string\") && (\n          <Box display=\"flex\" mt={0.5} mx={1}>\n            {required && !showCharacterLimitReached && (\n              <RequiredField flex={1} disabled={disabled} />\n            )}\n\n            {showCharacterLimitReached && (\n              <Text flex={1} variant=\"xs\" color=\"mono60\" textAlign=\"left\">\n                Character limit reached\n              </Text>\n            )}\n\n            {typeof characterLimit !== \"undefined\" && (\n              <Text\n                flex={1}\n                variant=\"xs\"\n                color={characterLimitExceeded(value) ? \"red100\" : \"mono60\"}\n                textAlign=\"right\"\n              >\n                {value.length}/{characterLimit}\n              </Text>\n            )}\n          </Box>\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" color=\"red100\" mt={0.5} ml={1}>\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nTextArea.displayName = \"TextArea\"\n\ntype StyledTextAreaProps = Pick<\n  TextAreaProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\"\n>\n\nconst StyledTextArea = styled.textarea<StyledTextAreaProps>`\n  appearance: none;\n  display: block;\n  width: 100%;\n  background-color: ${themeGet(\"colors.mono0\")};\n  padding: ${themeGet(\"space.1\")};\n  resize: vertical;\n  transition: border-color 0.25s, color 0.25s;\n  outline: none;\n  border: 1px solid;\n  border-radius: 3px;\n  font-family: ${themeGet(\"fonts.sans\")};\n\n  &::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${TEXTAREA_STATES.default}\n      ${props.hover && TEXTAREA_STATES.hover}\n      ${props.focus && TEXTAREA_STATES.focus}\n      ${props.active && TEXTAREA_STATES.active}\n      ${props.disabled && TEXTAREA_STATES.disabled}\n      ${props.error && TEXTAREA_STATES.error}\n\n      &:hover {\n        ${TEXTAREA_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${TEXTAREA_STATES.completed}\n        ${props.error && TEXTAREA_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${TEXTAREA_STATES.focus}\n\n        :not(:placeholder-shown) {\n          ${!!props.placeholder && TEXTAREA_STATES.active}\n          ${props.error && TEXTAREA_STATES.error}\n        }\n\n        &::placeholder {\n          opacity: 1;\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${TEXTAREA_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        &::placeholder {\n          opacity: 0;\n        }\n      `}\n    `\n  }}\n`\nconst StyledLabel = styled.label`\n  position: absolute;\n  top: 25px;\n  left: 6px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.mono0\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n`\n"],"mappings":";;;;;;;;;;AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,KAAK,IAAIC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC7D,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,aAAa;AACtB,SAASC,GAAG,EAAEC,QAAQ,EAAEC,aAAa;AACrC,SAASC,IAAI;AACb,SAASC,OAAO;AAChB,SAASC,eAAe;AACxB,SAASC,uBAAuB;AA2BhC;AACA,OAAO,IAAMC,QAAQ,gBAAGd,KAAK,CAACe,UAAU,CACtC,UAAAC,IAAA,EAeEC,GAAG,EACA;EAAA,IAdDC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,KAAK,GAAAL,IAAA,CAALK,KAAK;IACLC,cAAc,GAAAN,IAAA,CAAdM,cAAc;IACdC,oBAAoB,GAAAP,IAAA,CAApBO,oBAAoB;IACpBC,KAAK,GAAAR,IAAA,CAALQ,KAAK;IACLC,WAAW,GAAAT,IAAA,CAAXS,WAAW;IAAAC,iBAAA,GAAAV,IAAA,CACXW,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,EAAE,GAAAA,iBAAA;IACjBE,QAAQ,GAAAZ,IAAA,CAARY,QAAQ;IACRC,QAAQ,GAAAb,IAAA,CAARa,QAAQ;IACLC,IAAI,GAAAC,wBAAA,CAAAf,IAAA,EAAAgB,SAAA;EAIT,IAAAC,cAAA,GAA+BxB,aAAa,CAACqB,IAAI,CAAC;IAAAI,eAAA,GAAAC,cAAA,CAAAF,cAAA;IAA3CG,QAAQ,GAAAF,eAAA;IAAEG,UAAU,GAAAH,eAAA;EAE3B,IAAAI,SAAA,GAA0BnC,QAAQ,CAACwB,YAAY,CAAC;IAAAY,UAAA,GAAAJ,cAAA,CAAAG,SAAA;IAAzCE,KAAK,GAAAD,UAAA;IAAEE,QAAQ,GAAAF,UAAA;EAEtB,IAAMG,sBAAsB,GAAGzC,WAAW,CACxC,UAAC0C,IAAY,EAAK;IAChB,OAAOC,OAAO,CAACtB,cAAc,IAAIqB,IAAI,CAACE,MAAM,GAAGvB,cAAc,CAAC;EAChE,CAAC,EACD,CAACA,cAAc,CAAC,CACjB;EAED,IAAMwB,qBAAqB,GAAG7C,WAAW,CACvC,UAAC0C,IAAY,EAAK;IAChB,OAAOC,OAAO,CAACtB,cAAc,IAAIqB,IAAI,CAACE,MAAM,IAAIvB,cAAc,CAAC;EACjE,CAAC,EACD,CAACA,cAAc,CAAC,CACjB;EAED,IAAMyB,YAAY,GAAG9C,WAAW,CAC9B,UAAC+C,KAA6C,EAAK;IACjD,IAAMC,SAAS,GAAGD,KAAK,CAACE,aAAa,CAACV,KAAK;IAC3CC,QAAQ,CAACQ,SAAS,CAAC;IACnBpB,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG;MACTW,KAAK,EAAES,SAAS;MAChBE,qBAAqB,EAAET,sBAAsB,CAACO,SAAS;IACzD,CAAC,CAAC;EACJ,CAAC,EACD,CAACP,sBAAsB,EAAEb,QAAQ,CAAC,CACnC;EAED,IAAMuB,QAAQ,GAAGlD,OAAO,CACtB;IAAA,OAAM0C,OAAO,CAAC1B,KAAK,IAAIwB,sBAAsB,CAACF,KAAK,CAAC,CAAC;EAAA,GACrD,CAACE,sBAAsB,EAAExB,KAAK,EAAEsB,KAAK,CAAC,CACvC;EAED,IAAMa,yBAAyB,GAC7B9B,oBAAoB,IACpB,OAAOD,cAAc,KAAK,WAAW,IACrCwB,qBAAqB,CAACN,KAAK,CAAC;EAE9B,oBACExC,KAAA,CAAAsD,aAAA,CAAC/C,GAAG,EAAAgD,QAAA;IAACC,KAAK,EAAC;EAAM,GAAKpB,QAAQ,GAC3B,CAAC,CAACX,WAAW,iBACZzB,KAAA,CAAAsD,aAAA,CAAC3C,OAAO;IAAC8C,OAAO;IAACC,OAAO,EAAEjC,WAAY;IAACkC,SAAS,EAAC;EAAS,gBACxD3D,KAAA,CAAAsD,aAAA,CAAC5C,IAAI;IAACkD,OAAO,EAAC,IAAI;IAACC,KAAK,EAAC,QAAQ;IAACC,SAAS,EAAC;EAAO,gBACjD9D,KAAA,CAAAsD,aAAA,YAAG,eAAa,CAAI,CACf,CAEV,eAEDtD,KAAA,CAAAsD,aAAA,CAAC/C,GAAG;IAACwD,QAAQ,EAAC,UAAU;IAACC,EAAE,EAAE,CAAC,CAACxC,KAAK,IAAI,CAACC,WAAW,GAAG,CAAC,GAAG;EAAE,gBAC3DzB,KAAA,CAAAsD,aAAA,CAACW,cAAc,EAAAV,QAAA;IACbtC,GAAG,EAAEA,GAAW;IAChBE,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA,KAAM;IACbC,KAAK,EAAEA,KAAM;IACbH,KAAK,EAAEkC,QAAS;IAChBvB,QAAQ,EAAEkB,YAAa;IACvBpB,YAAY,EAAEA,YAAa;IAC3BC,QAAQ,EAAEA,QAAS;IACnBJ,KAAK,EAAEA,KAAM;IACb0C,WAAW,EAAE7B,UAAU,CAAC6B,WAAW,IAAI;EAAI,GACvC7B,UAAU,EACd,EAED,CAAC,CAACb,KAAK,iBACNxB,KAAA,CAAAsD,aAAA,CAACa,WAAW;IAACC,OAAO,EAAE/B,UAAU,CAACgC;EAAK,GACnC7C,KAAK,eACNxB,KAAA,CAAAsD,aAAA,cAAQ,CAEX,CACG,EAEL,CAAC1B,QAAQ,IAAIN,cAAc,KAAK,EAAEJ,KAAK,IAAI,OAAOA,KAAK,KAAK,QAAQ,CAAC,iBACpElB,KAAA,CAAAsD,aAAA,CAAC/C,GAAG;IAAC+D,OAAO,EAAC,MAAM;IAACN,EAAE,EAAE,GAAI;IAACO,EAAE,EAAE;EAAE,GAChC3C,QAAQ,IAAI,CAACyB,yBAAyB,iBACrCrD,KAAA,CAAAsD,aAAA,CAAChD,aAAa;IAACkE,IAAI,EAAE,CAAE;IAACrD,QAAQ,EAAEA;EAAS,EAC5C,EAEAkC,yBAAyB,iBACxBrD,KAAA,CAAAsD,aAAA,CAAC5C,IAAI;IAAC8D,IAAI,EAAE,CAAE;IAACZ,OAAO,EAAC,IAAI;IAACC,KAAK,EAAC,QAAQ;IAACC,SAAS,EAAC;EAAM,GAAC,yBAE5D,CACD,EAEA,OAAOxC,cAAc,KAAK,WAAW,iBACpCtB,KAAA,CAAAsD,aAAA,CAAC5C,IAAI;IACH8D,IAAI,EAAE,CAAE;IACRZ,OAAO,EAAC,IAAI;IACZC,KAAK,EAAEnB,sBAAsB,CAACF,KAAK,CAAC,GAAG,QAAQ,GAAG,QAAS;IAC3DsB,SAAS,EAAC;EAAO,GAEhBtB,KAAK,CAACK,MAAM,EAAC,GAAC,EAACvB,cAAc,CAEjC,CAEJ,EAEAJ,KAAK,IAAI,OAAOA,KAAK,KAAK,QAAQ,iBACjClB,KAAA,CAAAsD,aAAA,CAAC5C,IAAI;IAACkD,OAAO,EAAC,IAAI;IAACC,KAAK,EAAC,QAAQ;IAACG,EAAE,EAAE,GAAI;IAACS,EAAE,EAAE;EAAE,GAC9CvD,KAAK,CAET,CACG;AAEV,CAAC,CACF;AAEDJ,QAAQ,CAAC4D,WAAW,GAAG,UAAU;AAOjC,IAAMT,cAAc,GAAG7D,MAAM,CAACuE,QAAQ,CAAAC,UAAA;EAAAF,WAAA;EAAAG,WAAA;AAAA,yQAIhB9E,QAAQ,CAAC,cAAc,CAAC,EACjCA,QAAQ,CAAC,SAAS,CAAC,EAMfA,QAAQ,CAAC,YAAY,CAAC,EAMnC,UAAC+E,KAAK,EAAK;EACX,OAAOzE,GAAG,iNACNO,eAAe,CAACmE,OAAO,EACvBD,KAAK,CAACzD,KAAK,IAAIT,eAAe,CAACS,KAAK,EACpCyD,KAAK,CAAC1D,KAAK,IAAIR,eAAe,CAACQ,KAAK,EACpC0D,KAAK,CAACE,MAAM,IAAIpE,eAAe,CAACoE,MAAM,EACtCF,KAAK,CAAC3D,QAAQ,IAAIP,eAAe,CAACO,QAAQ,EAC1C2D,KAAK,CAAC5D,KAAK,IAAIN,eAAe,CAACM,KAAK,EAGlCN,eAAe,CAACS,KAAK,EAIrBT,eAAe,CAACqE,SAAS,EACzBH,KAAK,CAAC5D,KAAK,IAAIN,eAAe,CAACM,KAAK,EAKpCN,eAAe,CAACQ,KAAK,EAGnB,CAAC,CAAC0D,KAAK,CAACZ,WAAW,IAAItD,eAAe,CAACoE,MAAM,EAC7CF,KAAK,CAAC5D,KAAK,IAAIN,eAAe,CAACM,KAAK,EAUtCN,eAAe,CAACO,QAAQ,EAG1B2D,KAAK,CAACtD,KAAK,IACbnB,GAAG,gCAIF;AAEL,CAAC,CACF;AACD,IAAM8D,WAAW,GAAG/D,MAAM,CAAC8E,KAAK,CAAAN,UAAA;EAAAF,WAAA;EAAAG,WAAA;AAAA,kZAOhBhE,uBAAuB,EAEtBd,QAAQ,CAAC,YAAY,CAAC,EAIfA,QAAQ,CAAC,cAAc,CAAC,EAQ9Bc,uBAAuB,CAIxC"}

package/dist/esm/elements/TextArea/TextArea.story.js

@@ -0,0 +1,121 @@
+import { fn } from "@storybook/test";
+import React from "react";
+import { Button } from "../Button";
+import { TextArea } from "./TextArea";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: TextArea,
+  title: "Components/TextArea",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A multi-line text input component with character limits, validation, and form states."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Default = {
+  args: {
+    placeholder: "Start typing...",
+    onChange: fn()
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic text area with placeholder text."
+      }
+    }
+  }
+};
+export var AllStates = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px"
+      }
+    }, /*#__PURE__*/React.createElement(TextArea, {
+      placeholder: "Default state",
+      onChange: fn()
+    }), /*#__PURE__*/React.createElement(TextArea, {
+      error: "Something went wrong.",
+      placeholder: "Error state",
+      onChange: fn()
+    }), /*#__PURE__*/React.createElement(TextArea, {
+      disabled: true,
+      placeholder: "Disabled state",
+      onChange: fn()
+    }), /*#__PURE__*/React.createElement(TextArea, {
+      title: "Note",
+      placeholder: "With title",
+      onChange: fn()
+    }), /*#__PURE__*/React.createElement(TextArea, {
+      title: "Note",
+      required: true,
+      placeholder: "Required field",
+      onChange: fn()
+    }), /*#__PURE__*/React.createElement(TextArea, {
+      characterLimit: 10,
+      placeholder: "Character limit",
+      onChange: fn()
+    }), /*#__PURE__*/React.createElement(TextArea, {
+      characterLimit: 10,
+      characterLimitHelper: true,
+      required: true,
+      placeholder: "With helper text",
+      onChange: fn()
+    }), /*#__PURE__*/React.createElement(TextArea, {
+      characterLimit: 10,
+      defaultValue: "hello",
+      placeholder: "Under limit",
+      onChange: fn()
+    }), /*#__PURE__*/React.createElement(TextArea, {
+      characterLimit: 10,
+      defaultValue: "hello world",
+      placeholder: "Over limit",
+      onChange: fn()
+    }), /*#__PURE__*/React.createElement(TextArea, {
+      name: "my-text-area",
+      title: "Note",
+      description: "This is my description",
+      placeholder: "With description",
+      onChange: fn()
+    }), /*#__PURE__*/React.createElement(TextArea, {
+      defaultValue: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nam iste beatae reiciendis ea harum, aspernatur, eius, omnis eveniet corporis consequatur minima assumenda ipsum dolor dolorum perferendis animi distinctio eligendi?",
+      placeholder: "With long content",
+      onChange: fn()
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "All available states and configurations of the TextArea component."
+      }
+    }
+  }
+};
+export var InForm = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement(TextArea, {
+      mt: 1,
+      title: "Example",
+      required: true,
+      placeholder: "Submission should be blocked unless this has a value"
+    }), /*#__PURE__*/React.createElement(Button, {
+      mt: 1
+    }, "Submit"));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "TextArea used within a form with required validation."
+      }
+    }
+  }
+};
+//# sourceMappingURL=TextArea.story.js.map

package/dist/esm/elements/TextArea/TextArea.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.story.js","names":["fn","React","Button","TextArea","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","placeholder","onChange","story","AllStates","render","createElement","style","display","flexDirection","gap","error","disabled","required","characterLimit","characterLimitHelper","defaultValue","name","InForm","mt"],"sources":["../../../../src/elements/TextArea/TextArea.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React from \"react\"\nimport { Button } from \"../Button\"\nimport { TextArea } from \"./TextArea\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: TextArea,\n  title: \"Components/TextArea\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A multi-line text input component with character limits, validation, and form states.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    placeholder: \"Start typing...\",\n    onChange: fn(),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic text area with placeholder text.\",\n      },\n    },\n  },\n}\n\nexport const AllStates = {\n  render: () => (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <TextArea placeholder=\"Default state\" onChange={fn()} />\n      <TextArea\n        error=\"Something went wrong.\"\n        placeholder=\"Error state\"\n        onChange={fn()}\n      />\n      <TextArea disabled placeholder=\"Disabled state\" onChange={fn()} />\n      <TextArea title=\"Note\" placeholder=\"With title\" onChange={fn()} />\n      <TextArea\n        title=\"Note\"\n        required\n        placeholder=\"Required field\"\n        onChange={fn()}\n      />\n      <TextArea\n        characterLimit={10}\n        placeholder=\"Character limit\"\n        onChange={fn()}\n      />\n      <TextArea\n        characterLimit={10}\n        characterLimitHelper\n        required\n        placeholder=\"With helper text\"\n        onChange={fn()}\n      />\n      <TextArea\n        characterLimit={10}\n        defaultValue=\"hello\"\n        placeholder=\"Under limit\"\n        onChange={fn()}\n      />\n      <TextArea\n        characterLimit={10}\n        defaultValue=\"hello world\"\n        placeholder=\"Over limit\"\n        onChange={fn()}\n      />\n      <TextArea\n        name=\"my-text-area\"\n        title=\"Note\"\n        description=\"This is my description\"\n        placeholder=\"With description\"\n        onChange={fn()}\n      />\n      <TextArea\n        defaultValue=\"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nam iste beatae reiciendis ea harum, aspernatur, eius, omnis eveniet corporis consequatur minima assumenda ipsum dolor dolorum perferendis animi distinctio eligendi?\"\n        placeholder=\"With long content\"\n        onChange={fn()}\n      />\n    </div>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"All available states and configurations of the TextArea component.\",\n      },\n    },\n  },\n}\n\nexport const InForm = {\n  render: () => (\n    <form>\n      <TextArea\n        mt={1}\n        title=\"Example\"\n        required\n        placeholder=\"Submission should be blocked unless this has a value\"\n      />\n      <Button mt={1}>Submit</Button>\n    </form>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"TextArea used within a form with required validation.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/TextArea/index.js

@@ -0,0 +1,2 @@
+export * from "./TextArea";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/TextArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/TextArea/index.tsx"],"sourcesContent":["export * from \"./TextArea\"\n"],"mappings":"AAAA"}

package/dist/esm/elements/TextArea/tokens.js

@@ -0,0 +1,13 @@
+import { themeGet } from "@styled-system/theme-get";
+import { css } from "styled-components";
+import { State } from "./types";
+export var TEXTAREA_STATES = {
+  default: css(["min-height:", ";font-size:", ";line-height:", ";color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";font-size:", ";}"], themeGet("space.12"), themeGet("textVariants.sm-display.fontSize"), themeGet("textVariants.sm.lineHeight"), themeGet("colors.mono100"), themeGet("colors.mono30"), themeGet("colors.mono60"), themeGet("colors.mono60"), themeGet("textVariants.sm-display.fontSize")),
+  focus: css(["color:", ";border-color:", ";::placeholder{color:", ";opacity:1;}& + label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], themeGet("colors.mono100"), themeGet("colors.blue100"), themeGet("colors.mono60"), themeGet("colors.blue100"), themeGet("textVariants.xs.fontSize")),
+  hover: css(["color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";}"], themeGet("colors.mono100"), themeGet("colors.mono60"), themeGet("colors.mono100"), themeGet("colors.mono100")),
+  active: css(["color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], themeGet("colors.mono100"), themeGet("colors.blue100"), themeGet("colors.mono100"), themeGet("colors.blue100"), themeGet("textVariants.xs.fontSize")),
+  completed: css(["color:", ";border-color:", ";& + label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], themeGet("colors.mono100"), themeGet("colors.mono60"), themeGet("colors.mono60"), themeGet("textVariants.xs.fontSize")),
+  disabled: css(["color:", ";border-color:", ";background-color:transparent;::placeholder{color:", ";}&:not(:placeholder-shown) + label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}&:placeholder-shown + label{color:", ";}"], themeGet("colors.mono30"), themeGet("colors.mono30"), themeGet("colors.mono30"), themeGet("colors.mono30"), themeGet("textVariants.xs.fontSize"), themeGet("colors.mono30")),
+  error: css(["border-color:", ";& + label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], themeGet("colors.red100"), themeGet("colors.red100"), themeGet("textVariants.xs.fontSize"))
+};
+//# sourceMappingURL=tokens.js.map

package/dist/esm/elements/TextArea/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":["themeGet","css","State","TEXTAREA_STATES","default","focus","hover","active","completed","disabled","error"],"sources":["../../../../src/elements/TextArea/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const TEXTAREA_STATES: Record<State, any> = {\n  default: css`\n    min-height: ${themeGet(\"space.12\")};\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    line-height: ${themeGet(\"textVariants.sm.lineHeight\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n      opacity: 1;\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n  `,\n  active: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  completed: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    & + label {\n      color: ${themeGet(\"colors.mono60\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    background-color: transparent;\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n\n    &:not(:placeholder-shown) + label {\n      color: ${themeGet(\"colors.mono30\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:placeholder-shown + label {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n  `,\n  error: css`\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & + label {\n      color: ${themeGet(\"colors.red100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAQ,mBAAmB;AACvC,SAASC,KAAK;AAEd,OAAO,IAAMC,eAAmC,GAAG;EACjDC,OAAO,EAAEH,GAAG,mJACID,QAAQ,CAAC,UAAU,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,EAC1CA,QAAQ,CAAC,4BAA4B,CAAC,EAC5CA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,CAE5D;EACDK,KAAK,EAAEJ,GAAG,sKACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,eAAe,CAAC,EAKzBA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EACDM,KAAK,EAAEL,GAAG,oFACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,CAEtC;EACDO,MAAM,EAAEN,GAAG,4JACAD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EACDQ,SAAS,EAAEP,GAAG,kIACHD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EACDS,QAAQ,EAAER,GAAG,yPACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,EASxCA,QAAQ,CAAC,eAAe,CAAC,CAErC;EACDU,KAAK,EAAET,GAAG,uHACQD,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC;AAQvD,CAAC"}

package/dist/esm/elements/TextArea/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/elements/TextArea/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/TextArea/types.ts"],"sourcesContent":["export type State =\n  | \"active\"\n  | \"default\"\n  | \"disabled\"\n  | \"error\"\n  | \"focus\"\n  | \"hover\"\n  | \"completed\"\n"],"mappings":""}

package/dist/esm/elements/Toasts/Toast.js

@@ -0,0 +1,78 @@
+var _excluded = ["id", "action", "description", "message", "onClose"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from "react";
+import styled from "styled-components";
+import { variant } from "styled-system";
+import { Box, BoxProps } from "../Box";
+import { Flex } from "../Flex";
+import { Clickable } from "../Clickable";
+import { Text } from "../Text";
+export var Toast = function Toast(_ref) {
+  var id = _ref.id,
+    action = _ref.action,
+    description = _ref.description,
+    message = _ref.message,
+    onClose = _ref.onClose,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var handleClick = function handleClick() {
+    onClose === null || onClose === void 0 ? void 0 : onClose(id);
+  };
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    width: "100%",
+    px: 2,
+    py: 1,
+    bg: "mono100",
+    color: "mono0",
+    role: "button",
+    tabIndex: 0,
+    onClick: handleClick,
+    onKeyPress: function onKeyPress(event) {
+      if (event.key === "Enter" || event.key === " ") {
+        onClose === null || onClose === void 0 ? void 0 : onClose(id);
+      }
+    },
+    style: {
+      cursor: "pointer"
+    }
+  }, rest), /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "flex-start",
+    justifyContent: "space-between"
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "sm-display"
+  }, message), action && /*#__PURE__*/React.createElement(Clickable, {
+    onClick: action.onClick,
+    textDecoration: "underline"
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "xs"
+  }, action.label))), description && /*#__PURE__*/React.createElement(Text, {
+    variant: "xs"
+  }, description));
+};
+Toast.displayName = "Toast";
+export var TOAST_VARIANTS = {
+  message: {
+    backgroundColor: "mono100",
+    color: "mono0"
+  },
+  alert: {
+    backgroundColor: "blue100",
+    color: "mono0"
+  },
+  success: {
+    backgroundColor: "green100",
+    color: "mono0"
+  },
+  error: {
+    backgroundColor: "red100",
+    color: "mono0"
+  }
+};
+var Container = styled(Box).withConfig({
+  displayName: "Toast__Container",
+  componentId: "sc-1c067m4-0"
+})(["", " user-select:none;"], variant({
+  variants: TOAST_VARIANTS
+}));
+//# sourceMappingURL=Toast.js.map

package/dist/esm/elements/Toasts/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","names":["React","styled","variant","Box","BoxProps","Flex","Clickable","Text","Toast","_ref","id","action","description","message","onClose","rest","_objectWithoutProperties","_excluded","handleClick","createElement","Container","_extends","width","px","py","bg","color","role","tabIndex","onClick","onKeyPress","event","key","style","cursor","alignItems","justifyContent","textDecoration","label","displayName","TOAST_VARIANTS","backgroundColor","alert","success","error","withConfig","componentId","variants"],"sources":["../../../../src/elements/Toasts/Toast.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Clickable } from \"../Clickable\"\nimport { Text } from \"../Text\"\n\nexport type ToastVariant = keyof typeof TOAST_VARIANTS\n\nexport interface ToastProps extends BoxProps {\n  id: string\n  action?: {\n    label: string\n    onClick(): void\n  }\n  description?: string\n  message: string\n  onClose?(id: string): void\n  variant?: ToastVariant\n}\n\nexport const Toast: React.FC<React.PropsWithChildren<ToastProps>> = ({\n  id,\n  action,\n  description,\n  message,\n  onClose,\n  ...rest\n}) => {\n  const handleClick = () => {\n    onClose?.(id)\n  }\n\n  return (\n    <Container\n      width=\"100%\"\n      px={2}\n      py={1}\n      bg=\"mono100\"\n      color=\"mono0\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleClick}\n      onKeyPress={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          onClose?.(id)\n        }\n      }}\n      style={{ cursor: \"pointer\" }}\n      {...rest}\n    >\n      <Flex alignItems=\"flex-start\" justifyContent=\"space-between\">\n        <Text variant=\"sm-display\">{message}</Text>\n\n        {action && (\n          <Clickable onClick={action.onClick} textDecoration=\"underline\">\n            <Text variant=\"xs\">{action.label}</Text>\n          </Clickable>\n        )}\n      </Flex>\n\n      {description && <Text variant=\"xs\">{description}</Text>}\n    </Container>\n  )\n}\n\nexport const TOAST_VARIANTS = {\n  message: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n  alert: {\n    backgroundColor: \"blue100\",\n    color: \"mono0\",\n  },\n  success: {\n    backgroundColor: \"green100\",\n    color: \"mono0\",\n  },\n  error: {\n    backgroundColor: \"red100\",\n    color: \"mono0\",\n  },\n}\n\nconst Container = styled(Box)`\n  ${variant({ variants: TOAST_VARIANTS })}\n  user-select: none;\n`\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,IAAI;AACb,SAASC,SAAS;AAClB,SAASC,IAAI;AAgBb,OAAO,IAAMC,KAAoD,GAAG,SAAvDA,KAAoDA,CAAAC,IAAA,EAO3D;EAAA,IANJC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACXC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACJC,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEP,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGJ,EAAE,CAAC;EACf,CAAC;EAED,oBACEV,KAAA,CAAAmB,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,KAAK,EAAC,MAAM;IACZC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAE,CAAE;IACNC,EAAE,EAAC,SAAS;IACZC,KAAK,EAAC,OAAO;IACbC,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE,CAAE;IACZC,OAAO,EAAEX,WAAY;IACrBY,UAAU,EAAE,SAAZA,UAAUA,CAAGC,KAAK,EAAK;MACrB,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;QAC9ClB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGJ,EAAE,CAAC;MACf;IACF,CAAE;IACFuB,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAU;EAAE,GACzBnB,IAAI,gBAERf,KAAA,CAAAmB,aAAA,CAACd,IAAI;IAAC8B,UAAU,EAAC,YAAY;IAACC,cAAc,EAAC;EAAe,gBAC1DpC,KAAA,CAAAmB,aAAA,CAACZ,IAAI;IAACL,OAAO,EAAC;EAAY,GAAEW,OAAO,CAAQ,EAE1CF,MAAM,iBACLX,KAAA,CAAAmB,aAAA,CAACb,SAAS;IAACuB,OAAO,EAAElB,MAAM,CAACkB,OAAQ;IAACQ,cAAc,EAAC;EAAW,gBAC5DrC,KAAA,CAAAmB,aAAA,CAACZ,IAAI;IAACL,OAAO,EAAC;EAAI,GAAES,MAAM,CAAC2B,KAAK,CAAQ,CAE3C,CACI,EAEN1B,WAAW,iBAAIZ,KAAA,CAAAmB,aAAA,CAACZ,IAAI;IAACL,OAAO,EAAC;EAAI,GAAEU,WAAW,CAAQ,CAC7C;AAEhB,CAAC;AA3CYJ,KAAoD,CAAA+B,WAAA;AA6CjE,OAAO,IAAMC,cAAc,GAAG;EAC5B3B,OAAO,EAAE;IACP4B,eAAe,EAAE,SAAS;IAC1Bf,KAAK,EAAE;EACT,CAAC;EACDgB,KAAK,EAAE;IACLD,eAAe,EAAE,SAAS;IAC1Bf,KAAK,EAAE;EACT,CAAC;EACDiB,OAAO,EAAE;IACPF,eAAe,EAAE,UAAU;IAC3Bf,KAAK,EAAE;EACT,CAAC;EACDkB,KAAK,EAAE;IACLH,eAAe,EAAE,QAAQ;IACzBf,KAAK,EAAE;EACT;AACF,CAAC;AAED,IAAMN,SAAS,GAAGnB,MAAM,CAACE,GAAG,CAAC,CAAA0C,UAAA;EAAAN,WAAA;EAAAO,WAAA;AAAA,+BACzB5C,OAAO,CAAC;EAAE6C,QAAQ,EAAEP;AAAe,CAAC,CAAC,CAExC"}

package/dist/esm/elements/Toasts/Toast.story.js

@@ -0,0 +1,98 @@
+import { fn } from "@storybook/test";
+import { Toast } from "./Toast";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: Toast,
+  title: "Components/Toast",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A toast notification component with different variants for messages, alerts, success, and errors."
+      }
+    },
+    controls: {
+      exclude: STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+export var Message = {
+  args: {
+    id: "example",
+    variant: "message",
+    message: "Message Title",
+    description: "This is placeholder text."
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic message toast notification."
+      }
+    }
+  }
+};
+export var Alert = {
+  args: {
+    id: "example",
+    variant: "alert",
+    message: "Alert Message",
+    description: "This is an alert notification."
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Alert toast notification for warnings."
+      }
+    }
+  }
+};
+export var Success = {
+  args: {
+    id: "example",
+    variant: "success",
+    message: "Success Message",
+    description: "This is a success notification."
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Success toast notification."
+      }
+    }
+  }
+};
+export var Error = {
+  args: {
+    id: "example",
+    variant: "error",
+    message: "Error Message",
+    description: "This is an error notification."
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Error toast notification."
+      }
+    }
+  }
+};
+export var WithAction = {
+  args: {
+    id: "example",
+    variant: "message",
+    message: "Message with Action",
+    description: "This toast has an action button.",
+    action: {
+      label: "Undo",
+      onClick: fn()
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Toast with an action button."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Toast.story.js.map

package/dist/esm/elements/Toasts/Toast.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.story.js","names":["fn","Toast","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Message","args","id","variant","message","story","Alert","Success","Error","WithAction","action","label","onClick"],"sources":["../../../../src/elements/Toasts/Toast.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport { Toast } from \"./Toast\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Toast,\n  title: \"Components/Toast\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A toast notification component with different variants for messages, alerts, success, and errors.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Message = {\n  args: {\n    id: \"example\",\n    variant: \"message\",\n    message: \"Message Title\",\n    description: \"This is placeholder text.\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic message toast notification.\",\n      },\n    },\n  },\n}\n\nexport const Alert = {\n  args: {\n    id: \"example\",\n    variant: \"alert\",\n    message: \"Alert Message\",\n    description: \"This is an alert notification.\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Alert toast notification for warnings.\",\n      },\n    },\n  },\n}\n\nexport const Success = {\n  args: {\n    id: \"example\",\n    variant: \"success\",\n    message: \"Success Message\",\n    description: \"This is a success notification.\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Success toast notification.\",\n      },\n    },\n  },\n}\n\nexport const Error = {\n  args: {\n    id: \"example\",\n    variant: \"error\",\n    message: \"Error Message\",\n    description: \"This is an error notification.\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Error toast notification.\",\n      },\n    },\n  },\n}\n\nexport const WithAction = {\n  args: {\n    id: \"example\",\n    variant: \"message\",\n    message: \"Message with Action\",\n    description: \"This toast has an action button.\",\n    action: { label: \"Undo\", onClick: fn() },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Toast with an action button.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,KAAK;AACd,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEF,KAAK;EAChBG,KAAK,EAAE,kBAAkB;EACzBC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACNC,OAAO,EAAER;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,EAAE,EAAE,SAAS;IACbC,OAAO,EAAE,SAAS;IAClBC,OAAO,EAAE,eAAe;IACxBP,WAAW,EAAE;EACf,CAAC;EACDF,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXQ,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,KAAK,GAAG;EACnBL,IAAI,EAAE;IACJC,EAAE,EAAE,SAAS;IACbC,OAAO,EAAE,OAAO;IAChBC,OAAO,EAAE,eAAe;IACxBP,WAAW,EAAE;EACf,CAAC;EACDF,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXQ,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAME,OAAO,GAAG;EACrBN,IAAI,EAAE;IACJC,EAAE,EAAE,SAAS;IACbC,OAAO,EAAE,SAAS;IAClBC,OAAO,EAAE,iBAAiB;IAC1BP,WAAW,EAAE;EACf,CAAC;EACDF,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXQ,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMG,KAAK,GAAG;EACnBP,IAAI,EAAE;IACJC,EAAE,EAAE,SAAS;IACbC,OAAO,EAAE,OAAO;IAChBC,OAAO,EAAE,eAAe;IACxBP,WAAW,EAAE;EACf,CAAC;EACDF,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXQ,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMI,UAAU,GAAG;EACxBR,IAAI,EAAE;IACJC,EAAE,EAAE,SAAS;IACbC,OAAO,EAAE,SAAS;IAClBC,OAAO,EAAE,qBAAqB;IAC9BP,WAAW,EAAE,kCAAkC;IAC/Ca,MAAM,EAAE;MAAEC,KAAK,EAAE,MAAM;MAAEC,OAAO,EAAEvB,EAAE;IAAG;EACzC,CAAC;EACDM,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXQ,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

package/dist/esm/elements/Toasts/Toasts.js

@@ -0,0 +1,47 @@
+var _excluded = ["limit"],
+  _excluded2 = ["id"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from "react";
+import { VisuallyHidden } from "../VisuallyHidden";
+import { Box, BoxProps } from "../Box";
+import { Join } from "../Join";
+import { Spacer } from "../Spacer";
+import { Toast } from "./Toast";
+import { useToasts } from "./useToasts";
+export var Toasts = function Toasts(_ref) {
+  var _ref$limit = _ref.limit,
+    limit = _ref$limit === void 0 ? 5 : _ref$limit,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useToasts = useToasts(),
+    toasts = _useToasts.toasts;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, rest, /*#__PURE__*/React.createElement(Join, {
+    separator: /*#__PURE__*/React.createElement(Spacer, {
+      y: 1
+    })
+  }, takeRight(toasts, limit).map(function (_ref2) {
+    var id = _ref2.id,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+    return /*#__PURE__*/React.createElement(Toast, _extends({
+      key: id,
+      id: id
+    }, rest));
+  }))), /*#__PURE__*/React.createElement(VisuallyHidden, {
+    "aria-live": "assertive",
+    "aria-atomic": "true",
+    "aria-relevant": "additions"
+  }, toasts.map(function (toast, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: i
+    }, toast.message, " - ", toast.description);
+  })));
+};
+var takeRight = function takeRight(xs) {
+  var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  if (xs.length < limit) {
+    return xs;
+  }
+  return xs.slice(xs.length - limit, xs.length);
+};
+//# sourceMappingURL=Toasts.js.map

package/dist/esm/elements/Toasts/Toasts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toasts.js","names":["React","VisuallyHidden","Box","BoxProps","Join","Spacer","Toast","useToasts","Toasts","_ref","_ref$limit","limit","rest","_objectWithoutProperties","_excluded","_useToasts","toasts","createElement","Fragment","separator","y","takeRight","map","_ref2","id","_excluded2","_extends","key","toast","i","message","description","xs","arguments","length","undefined","slice"],"sources":["../../../../src/elements/Toasts/Toasts.tsx"],"sourcesContent":["import React from \"react\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Toast } from \"./Toast\"\nimport { useToasts } from \"./useToasts\"\n\nexport interface ToastsProps extends BoxProps {\n  limit?: number\n}\n\nexport const Toasts: React.FC<React.PropsWithChildren<ToastsProps>> = ({ limit = 5, ...rest }) => {\n  const { toasts } = useToasts()\n\n  return (\n    <>\n      <Box {...rest}>\n        <Join separator={<Spacer y={1} />}>\n          {takeRight(toasts, limit).map(({ id, ...rest }) => (\n            <Toast key={id} id={id} {...rest} />\n          ))}\n        </Join>\n      </Box>\n\n      <VisuallyHidden\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        {toasts.map((toast, i) => {\n          return (\n            <div key={i}>\n              {toast.message} - {toast.description}\n            </div>\n          )\n        })}\n      </VisuallyHidden>\n    </>\n  )\n}\n\nconst takeRight = <T,>(xs: T[], limit = 1) => {\n  if (xs.length < limit) {\n    return xs\n  }\n\n  return xs.slice(xs.length - limit, xs.length)\n}\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc;AACvB,SAASC,GAAG,EAAEC,QAAQ;AACtB,SAASC,IAAI;AACb,SAASC,MAAM;AACf,SAASC,KAAK;AACd,SAASC,SAAS;AAMlB,OAAO,IAAMC,MAAsD,GAAG,SAAzDA,MAAsDA,CAAAC,IAAA,EAA+B;EAAA,IAAAC,UAAA,GAAAD,IAAA,CAAzBE,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,CAAC,GAAAA,UAAA;IAAKE,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACzF,IAAAC,UAAA,GAAmBR,SAAS,EAAE;IAAtBS,MAAM,GAAAD,UAAA,CAANC,MAAM;EAEd,oBACEhB,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAAkB,QAAA,qBACElB,KAAA,CAAAiB,aAAA,CAACf,GAAG,EAAKU,IAAI,eACXZ,KAAA,CAAAiB,aAAA,CAACb,IAAI;IAACe,SAAS,eAAEnB,KAAA,CAAAiB,aAAA,CAACZ,MAAM;MAACe,CAAC,EAAE;IAAE;EAAI,GAC/BC,SAAS,CAACL,MAAM,EAAEL,KAAK,CAAC,CAACW,GAAG,CAAC,UAAAC,KAAA;IAAA,IAAGC,EAAE,GAAAD,KAAA,CAAFC,EAAE;MAAKZ,IAAI,GAAAC,wBAAA,CAAAU,KAAA,EAAAE,UAAA;IAAA,oBAC1CzB,KAAA,CAAAiB,aAAA,CAACX,KAAK,EAAAoB,QAAA;MAACC,GAAG,EAAEH,EAAG;MAACA,EAAE,EAAEA;IAAG,GAAKZ,IAAI,EAAI;EAAA,CACrC,CAAC,CACG,CACH,eAENZ,KAAA,CAAAiB,aAAA,CAAChB,cAAc;IACb,aAAU,WAAW;IACrB,eAAY,MAAM;IAClB,iBAAc;EAAW,GAExBe,MAAM,CAACM,GAAG,CAAC,UAACM,KAAK,EAAEC,CAAC,EAAK;IACxB,oBACE7B,KAAA,CAAAiB,aAAA;MAAKU,GAAG,EAAEE;IAAE,GACTD,KAAK,CAACE,OAAO,EAAC,KAAG,EAACF,KAAK,CAACG,WAAW,CAChC;EAEV,CAAC,CAAC,CACa,CAChB;AAEP,CAAC;AAED,IAAMV,SAAS,GAAG,SAAZA,SAASA,CAAQW,EAAO,EAAgB;EAAA,IAAdrB,KAAK,GAAAsB,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;EACvC,IAAID,EAAE,CAACE,MAAM,GAAGvB,KAAK,EAAE;IACrB,OAAOqB,EAAE;EACX;EAEA,OAAOA,EAAE,CAACI,KAAK,CAACJ,EAAE,CAACE,MAAM,GAAGvB,KAAK,EAAEqB,EAAE,CAACE,MAAM,CAAC;AAC/C,CAAC"}