@jamesodwyer/gds-figma-vite 1.0.0

package/dist/index12.cjs

@@ -0,0 +1,174 @@
+"use client";
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const matchSorter = require("match-sorter");
+const react = require("@ariakit/react");
+const index_styles = require("./index539.cjs");
+const index = require("./index20.cjs");
+const allCodesToFlags = require("./index51.cjs");
+const usePortalElement = require("./index122.cjs");
+const CrossIcon = require("./index179.cjs");
+const EMPTY_STATE = {
+  id: "",
+  name: ""
+};
+const CountryPicker = ({
+  countries,
+  label,
+  id = "country-picker",
+  name = "country",
+  selectedItem,
+  inputRef,
+  labelClear,
+  required = false,
+  screenReaderErrorPrefix,
+  errorMessage,
+  onSelect,
+  onClear,
+  className,
+  visibleField = "name",
+  disabled = false,
+  autocomplete = true,
+  canClearSelection = true,
+  showFlag = false,
+  popOverTranslateX,
+  isOpen = false,
+  onOpenChange,
+  ...rest
+}) => {
+  const isUpdatingRef = React.useRef(false);
+  const comboBoxRef = React.useRef(null);
+  const inputFieldRef = React.useRef(null);
+  const portalElement = usePortalElement.usePortalElement();
+  const [searchValue, setSearchValue] = React.useState({
+    ...EMPTY_STATE,
+    ...selectedItem
+  });
+  const previousValidCountryRef = React.useRef(EMPTY_STATE);
+  React.useEffect(() => {
+    if (searchValue && countries.some((c) => c.id === searchValue.id)) {
+      previousValidCountryRef.current = searchValue;
+    }
+  }, [searchValue, countries]);
+  const isPickerClearable = !!searchValue.name && canClearSelection;
+  const handleInputChange = React.useCallback((value) => {
+    if (!autocomplete) {
+      return;
+    }
+    const code = Array.isArray(value) ? value[0] ?? "" : value;
+    const selectedCountry = countries.find((country) => country.id === code);
+    if (!selectedCountry) {
+      setSearchValue((prev) => ({
+        ...prev,
+        id: "",
+        name: code,
+        [visibleField]: code
+      }));
+    } else {
+      setSearchValue(selectedCountry);
+    }
+  }, [autocomplete, countries, visibleField]);
+  const onSelectValue = (value) => {
+    isUpdatingRef.current = true;
+    setTimeout(() => {
+      const code = Array.isArray(value) ? value[0] ?? "" : value;
+      const selectedCountry = countries.find((country) => country.id === code);
+      if (!selectedCountry) {
+        return;
+      }
+      setSearchValue(selectedCountry);
+      isUpdatingRef.current = false;
+      if (onSelect) {
+        onSelect(selectedCountry);
+      }
+    }, 0);
+  };
+  const comboboxStore = react.useComboboxStore({
+    setOpen: onOpenChange,
+    defaultSelectedValue: "",
+    setSelectedValue: onSelectValue,
+    setValue: handleInputChange
+  });
+  React.useEffect(() => {
+    if (isOpen) {
+      comboboxStore.show();
+    } else {
+      comboboxStore.hide();
+    }
+  }, [isOpen, comboboxStore]);
+  const handleOnClearSelection = React.useCallback(() => {
+    var _a;
+    React.startTransition(() => {
+      setSearchValue(EMPTY_STATE);
+      comboboxStore.setValue("");
+    });
+    (_a = comboBoxRef.current) == null ? void 0 : _a.focus();
+  }, [comboboxStore]);
+  const matches = React.useMemo(() => {
+    if (!autocomplete) {
+      return countries;
+    }
+    return matchSorter.matchSorter(countries, searchValue.name, {
+      keys: [visibleField],
+      threshold: matchSorter.rankings.ACRONYM
+    });
+  }, [visibleField, searchValue.name]);
+  const rowWidth = React.useMemo(() => {
+    if (visibleField === "name") {
+      return "100%";
+    }
+    return showFlag ? "14ch" : "12ch";
+  }, [visibleField, showFlag]);
+  const handleBlur = () => {
+    setTimeout(() => {
+      if (isUpdatingRef.current) {
+        return;
+      }
+      if (!countries.some((c) => c.id === searchValue.id)) {
+        if (searchValue.name) {
+          setSearchValue(previousValidCountryRef.current);
+        } else {
+          if (onSelect && !(searchValue == null ? void 0 : searchValue.id)) {
+            setSearchValue(EMPTY_STATE);
+            onSelect(null);
+          }
+        }
+      }
+    }, 0);
+  };
+  const handleFocus = () => {
+    setTimeout(() => {
+      if (comboBoxRef.current) {
+        const value = comboBoxRef.current.value;
+        comboBoxRef.current.setSelectionRange(value.length, value.length);
+      }
+    }, 0);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.default, { id, className, ref: inputFieldRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.default.Label, { disabled, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(index_styles.Row, { width: rowWidth, marginTop: "lounge", children: [
+      showFlag && !!searchValue.id && /* @__PURE__ */ jsxRuntime.jsx(index_styles.FlagWrapper, { children: allCodesToFlags.allCodesToFlags[searchValue.id] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(react.ComboboxProvider, { store: comboboxStore, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Combobox, { onBlur: handleBlur, disabled, render: (props) => /* @__PURE__ */ jsxRuntime.jsx(index_styles.CountryNameInput, { ...props, ...rest, onFocus: handleFocus, disabled, isErrored: !!errorMessage, name, autocomplete, showFlags: showFlag, selected: !!searchValue.id, required, value: `${searchValue[visibleField] || ""}`, ref: comboBoxRef }) }),
+        !disabled && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isPickerClearable ? /* @__PURE__ */ jsxRuntime.jsxs(index_styles.StyledIconButton, { onClick: handleOnClearSelection, tabIndex: 0, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: labelClear }),
+          /* @__PURE__ */ jsxRuntime.jsx(CrossIcon.default, { size: "0.8em" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(index_styles.ChevronIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(index_styles.StyledChevronIcon, {}) }) }),
+        matches.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(index_styles.Popover, { gutter: 2, portal: true, fixed: true, portalElement, sameWidth: true, getAnchorRect: () => {
+          if (!inputFieldRef.current) {
+            return null;
+          }
+          return inputFieldRef.current.getBoundingClientRect();
+        }, $translateX: popOverTranslateX || "0", children: /* @__PURE__ */ jsxRuntime.jsx(index_styles.PopupCountriesList, { children: matches.map((value) => /* @__PURE__ */ jsxRuntime.jsxs(index_styles.StyledSelectItem, { value: `${value.id}`, children: [
+          showFlag && allCodesToFlags.allCodesToFlags[`${value["countryCode"] || ""}`],
+          visibleField === "dialCode" ? `${value.dialCode || ""} ${value.name}` : `${value.name}`
+        ] }, `${value.id}`)) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.default.Validation, { screenReaderErrorPrefix, children: errorMessage })
+  ] });
+};
+exports.default = CountryPicker;
+//# sourceMappingURL=index12.cjs.map

package/dist/index12.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index12.cjs","sources":["../src/components/CountryPicker/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n  startTransition,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { matchSorter, rankings } from \"match-sorter\";\n\nimport {\n  Combobox,\n  ComboboxProvider,\n  useComboboxStore,\n  VisuallyHidden,\n} from \"@ariakit/react\";\n\nimport {\n  ChevronIconWrapper,\n  CountryNameInput,\n  FlagWrapper,\n  Popover,\n  PopupCountriesList,\n  Row,\n  StyledChevronIcon,\n  StyledIconButton,\n  StyledSelectItem,\n} from \"./index.styles\";\n\nimport InputField from \"../InputField\";\nimport { CrossIcon } from \"../../icons\";\nimport { allCodesToFlags } from \"../../flag-icons/allCodesToFlags\";\nimport { usePortalElement } from \"../../hooks/usePortalElement\";\n\nexport type Country = {\n  id: string | number;\n  name: string;\n  [key: string]: unknown;\n};\n\nexport type CountryPickerProps<T extends Country> = {\n  countries: Array<T>;\n  showFlag?: boolean;\n\n  selectedItem?: T | null;\n\n  /** The visual form element label  */\n  label: React.ReactNode;\n  /**\n   * @default 'country-picker'\n   */\n  id?: string;\n  /**\n   * @default 'country'\n   */\n  name?: string;\n  inputRef?: React.Ref<HTMLInputElement>;\n  /** The visually hidden a11y label in the button when Downshift is clearable and has a selected item  */\n  labelClear: React.ReactNode;\n  /**\n   * @default false\n   */\n  required?: boolean;\n  /** Visually hidden prefix announced to screen readers before the error message (e.g., \"Error: \").   */\n  screenReaderErrorPrefix: string;\n  /**\n   * If set, the form field border colour will switch to red and the defined message will be displayed below the field\n   */\n  errorMessage?: React.ReactNode;\n  onClear?: () => void;\n  className?: string;\n  /**\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Toggles the `readOnly` attribute on the input field, which prevents typing in the field, but still allows to select options from the dropdown.\n   * @default true\n   */\n  autocomplete?: boolean;\n  /**\n   * The property of the country object in the countries array that will be used as the Downshift and selected item visual display\n   * The width of the Downshift is also altered by the value defined here (dialCode = 12ch, name = 100%)\n   * @default 'name'\n   * */\n  visibleField?: \"name\" | \"dialCode\";\n\n  /** id of element(s) that describe the country picker input */\n  \"aria-describedby\"?: string;\n\n  /**\n   * Toggles the `clear` functionality, when set to false, the open/close buttons will be maintained on selection, no clear functionality and button will be suppressed\n   * @default true\n   * */\n  canClearSelection?: boolean;\n  onSelect?: (value: T | null) => void;\n\n  popOverTranslateX?: string;\n  isOpen?: boolean;\n  /**\n   * When set to false, the popover will be closed when the component is mounted\n   * If set to true, the popover will be open\n   * When set to false, the popover will be closed (useful for controlled components)\n   * @default false\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Callback function that is called when the state of popover is changed from open to closed or vice versa\n   */\n};\n\nconst EMPTY_STATE: Country = {\n  id: \"\",\n  name: \"\",\n};\n\nconst CountryPicker = <T extends Country>({\n  countries,\n  label,\n  id = \"country-picker\",\n  name = \"country\",\n  selectedItem,\n  inputRef,\n  labelClear,\n  required = false,\n  screenReaderErrorPrefix,\n  errorMessage,\n  onSelect,\n  onClear,\n  className,\n  visibleField = \"name\",\n  disabled = false,\n  autocomplete = true,\n  canClearSelection = true,\n  showFlag = false,\n  popOverTranslateX,\n  isOpen = false,\n  onOpenChange,\n  ...rest\n}: CountryPickerProps<T>) => {\n  const isUpdatingRef = useRef(false);\n  const comboBoxRef = useRef<HTMLInputElement>(null);\n  const inputFieldRef = useRef<HTMLDivElement>(null);\n\n  const portalElement = usePortalElement();\n\n  const [searchValue, setSearchValue] = useState<Country>({\n    ...EMPTY_STATE,\n    ...selectedItem,\n  });\n\n  const previousValidCountryRef = useRef<Country>(EMPTY_STATE);\n\n  useEffect(() => {\n    if (searchValue && countries.some((c) => c.id === searchValue.id)) {\n      // If the searchValue is a valid country, update the previous valid country reference\n      previousValidCountryRef.current = searchValue;\n    }\n  }, [searchValue, countries]);\n\n  const isPickerClearable = !!searchValue.name && canClearSelection;\n\n  const handleInputChange = useCallback(\n    (value: string | string[]) => {\n      if (!autocomplete) {\n        return;\n      }\n\n      const code = Array.isArray(value) ? (value[0] ?? \"\") : value;\n\n      const selectedCountry = countries.find(\n        (country) => country.id === code,\n      ) as T;\n\n      // country not found yet\n      if (!selectedCountry) {\n        setSearchValue((prev) => ({\n          ...prev,\n          id: \"\",\n          name: code,\n          [visibleField]: code,\n        }));\n      } else {\n        setSearchValue(selectedCountry);\n      }\n    },\n    [autocomplete, countries, visibleField],\n  );\n\n  const onSelectValue = (value: string | string[]) => {\n    // helper to prevent onBlur validation before onSelect is processed (iOS issue)\n    isUpdatingRef.current = true;\n    setTimeout(() => {\n      const code = Array.isArray(value) ? (value[0] ?? \"\") : value;\n      const selectedCountry = countries.find(\n        (country) => country.id === code,\n      ) as T;\n\n      if (!selectedCountry) {\n        return;\n      }\n\n      setSearchValue(selectedCountry);\n      isUpdatingRef.current = false;\n\n      if (onSelect) {\n        onSelect(selectedCountry);\n      }\n    }, 0);\n  };\n\n  const comboboxStore = useComboboxStore({\n    setOpen: onOpenChange,\n    defaultSelectedValue: \"\",\n    setSelectedValue: onSelectValue,\n    setValue: handleInputChange,\n  });\n\n  // TODO: this shouldn't be the way to do it\n  useEffect(() => {\n    if (isOpen) {\n      comboboxStore.show();\n    } else {\n      comboboxStore.hide();\n    }\n  }, [isOpen, comboboxStore]);\n\n  const handleOnClearSelection = useCallback(() => {\n    startTransition(() => {\n      setSearchValue(EMPTY_STATE);\n      comboboxStore.setValue(\"\");\n    });\n\n    comboBoxRef.current?.focus();\n  }, [comboboxStore]);\n\n  const matches = useMemo(() => {\n    if (!autocomplete) {\n      return countries;\n    }\n\n    return matchSorter(countries, searchValue.name, {\n      keys: [visibleField],\n      threshold: rankings.ACRONYM,\n    });\n\n    // missing countries in deps to not make cache huge\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visibleField, searchValue.name]);\n\n  const rowWidth = useMemo(() => {\n    if (visibleField === \"name\") {\n      return \"100%\";\n    }\n\n    return showFlag ? \"14ch\" : \"12ch\";\n  }, [visibleField, showFlag]);\n\n  const handleBlur = () => {\n    //the setTimeout is needed to ensure that the Blur() event is fired after the onChange(), which only occurs on iOS devices\n    setTimeout(() => {\n      if (isUpdatingRef.current) {\n        return;\n      }\n      // this reset is needed to prevent the input from being cleared when the user types a value that doesn't match any country\n      // if the user types a value that doesn't match any country, we want to keep the previous valid country\n      if (!countries.some((c) => c.id === searchValue.id)) {\n        if (searchValue.name) {\n          // If the searchValue is not empty, revert to the previous valid country\n          setSearchValue(previousValidCountryRef.current);\n        } else {\n          // If the searchValue is empty, reset to EMPTY_STATE\n          if (onSelect && !searchValue?.id) {\n            setSearchValue(EMPTY_STATE);\n            // Call onSelect with null if no valid country is selected\n            // This is to ensure that the parent component can handle the case where no country is selected\n            onSelect(null);\n          }\n        }\n      }\n    }, 0);\n  };\n\n  const handleFocus = () => {\n    // set the cursor to the end of the input field when it is focused\n    // the setTimeout is used to ensure that the input field is focused before setting the selection range\n    setTimeout(() => {\n      if (comboBoxRef.current) {\n        const value = comboBoxRef.current.value;\n        comboBoxRef.current.setSelectionRange(value.length, value.length);\n      }\n    }, 0);\n  };\n\n  return (\n    <InputField id={id} className={className} ref={inputFieldRef}>\n      <InputField.Label disabled={disabled}>{label}</InputField.Label>\n\n      <Row width={rowWidth} marginTop=\"lounge\">\n        {showFlag && !!searchValue.id && (\n          <FlagWrapper>{allCodesToFlags[searchValue.id]}</FlagWrapper>\n        )}\n        <ComboboxProvider store={comboboxStore}>\n          <Combobox\n            onBlur={handleBlur}\n            disabled={disabled}\n            render={(props) => (\n              <CountryNameInput\n                {...props}\n                {...rest}\n                onFocus={handleFocus}\n                disabled={disabled}\n                isErrored={!!errorMessage}\n                name={name}\n                autocomplete={autocomplete}\n                showFlags={showFlag}\n                selected={!!searchValue.id}\n                required={required}\n                value={`${searchValue[visibleField] || \"\"}`}\n                ref={comboBoxRef}\n              />\n            )}\n          />\n\n          {!disabled && (\n            <>\n              {isPickerClearable ? (\n                <StyledIconButton onClick={handleOnClearSelection} tabIndex={0}>\n                  <VisuallyHidden>{labelClear}</VisuallyHidden>\n                  <CrossIcon size=\"0.8em\" />\n                </StyledIconButton>\n              ) : (\n                <ChevronIconWrapper>\n                  <StyledChevronIcon />\n                </ChevronIconWrapper>\n              )}\n            </>\n          )}\n\n          {matches.length > 0 && (\n            <Popover\n              gutter={2}\n              portal\n              fixed\n              portalElement={portalElement}\n              sameWidth\n              getAnchorRect={() => {\n                if (!inputFieldRef.current) {\n                  return null;\n                }\n                return inputFieldRef.current.getBoundingClientRect();\n              }}\n              $translateX={popOverTranslateX || \"0\"}\n            >\n              <PopupCountriesList>\n                {matches.map((value) => (\n                  <StyledSelectItem key={`${value.id}`} value={`${value.id}`}>\n                    {showFlag &&\n                      allCodesToFlags[`${value[\"countryCode\"] || \"\"}`]}\n                    {visibleField === \"dialCode\"\n                      ? `${value.dialCode || \"\"} ${value.name}`\n                      : `${value.name}`}\n                  </StyledSelectItem>\n                ))}\n              </PopupCountriesList>\n            </Popover>\n          )}\n        </ComboboxProvider>\n      </Row>\n\n      <InputField.Validation screenReaderErrorPrefix={screenReaderErrorPrefix}>\n        {errorMessage}\n      </InputField.Validation>\n    </InputField>\n  );\n};\n\nexport default CountryPicker;\n"],"names":["countries","label","selectedItem","inputRef","labelClear","screenReaderErrorPrefix","errorMessage","onSelect","onClear","className","popOverTranslateX","onOpenChange","EMPTY_STATE","useEffect","previousValidCountryRef","searchValue","setSearchValue","prev","code","isUpdatingRef","setTimeout","onSelectValue","handleInputChange","comboboxStore","show","hide","startTransition","comboBoxRef","focus","ACRONYM","showFlag","getBoundingClientRect"],"mappings":";;;;;;;;;;;;AAiHA;AAA6B;AACvB;AAEN;AAEA;AAA0C;AACxCA;AACAC;AACK;AACE;AACPC;AACAC;AACAC;AACW;AACXC;AACAC;AACAC;AACAC;AACAC;AACe;AACJ;AACI;AACK;AACT;AACXC;AACS;AACTC;AAEqB;AACrB;AACA;AACA;AAEA;AAEA;AAAwD;AACnDC;AACAV;AAGL;AAEAW;AACE;AAEEC;AAAkCC;AACpC;AAGF;AAEA;AAEI;AACE;AAAA;AAGF;AAEA;AAKA;AACEC;AAA0B;AACrBC;AACC;AACEC;AACUA;AAChB;AAEFF;AAA8B;AAChC;AAKJ;AAEEG;AACAC;AACE;AACA;AAIA;AACE;AAAA;AAGFJ;AACAG;AAEA;AACEZ;AAAwB;AAC1B;AACE;AAGN;AAAuC;AAC5BI;AACa;AACJU;AACRC;AAIZT;AACE;AACEU;AAAcC;AAEdD;AAAcE;AAChB;AAGF;;AACEC;AACEV;AACAO;AAAyB;AAG3BI;AAAqBC;AAGvB;AACE;AACE;AAAO5B;AAGT;AAAgD;AAC3B;AACC6B;AACrB;AAMH;AACE;AACE;AAAO;AAGT;AAA2B;AAG7B;AAEET;AACE;AACE;AAAA;AAIF;AACE;AAEEJ;AAA8C;AAG9C;AACEA;AAGAT;AAAa;AACf;AACF;AACF;AACE;AAGN;AAGEa;AACE;AACE;AACAO;AAAgE;AAClE;AACE;AAGN;AAEI;AAA6C;AAG1CG;AAC+C;AAG9C;AAkBI;AAOI;AAA4B;AACL;AAO7B;AAWI;AACE;AAAO;AAET;AAA6BC;AAOxBD;AACgD;AAGhC;AAIzB;AAEJ;AACF;AAIA;AAGN;;"}

package/dist/index12.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback, startTransition, useMemo } from "react";
+import { matchSorter, rankings } from "match-sorter";
+import { useComboboxStore, ComboboxProvider, Combobox, VisuallyHidden } from "@ariakit/react";
+import { Row, FlagWrapper, CountryNameInput, StyledIconButton, ChevronIconWrapper, StyledChevronIcon, Popover, PopupCountriesList, StyledSelectItem } from "./index539.js";
+import InputField from "./index20.js";
+import { allCodesToFlags } from "./index51.js";
+import { usePortalElement } from "./index122.js";
+import CrossIcon from "./index179.js";
+const EMPTY_STATE = {
+  id: "",
+  name: ""
+};
+const CountryPicker = ({
+  countries,
+  label,
+  id = "country-picker",
+  name = "country",
+  selectedItem,
+  inputRef,
+  labelClear,
+  required = false,
+  screenReaderErrorPrefix,
+  errorMessage,
+  onSelect,
+  onClear,
+  className,
+  visibleField = "name",
+  disabled = false,
+  autocomplete = true,
+  canClearSelection = true,
+  showFlag = false,
+  popOverTranslateX,
+  isOpen = false,
+  onOpenChange,
+  ...rest
+}) => {
+  const isUpdatingRef = useRef(false);
+  const comboBoxRef = useRef(null);
+  const inputFieldRef = useRef(null);
+  const portalElement = usePortalElement();
+  const [searchValue, setSearchValue] = useState({
+    ...EMPTY_STATE,
+    ...selectedItem
+  });
+  const previousValidCountryRef = useRef(EMPTY_STATE);
+  useEffect(() => {
+    if (searchValue && countries.some((c) => c.id === searchValue.id)) {
+      previousValidCountryRef.current = searchValue;
+    }
+  }, [searchValue, countries]);
+  const isPickerClearable = !!searchValue.name && canClearSelection;
+  const handleInputChange = useCallback((value) => {
+    if (!autocomplete) {
+      return;
+    }
+    const code = Array.isArray(value) ? value[0] ?? "" : value;
+    const selectedCountry = countries.find((country) => country.id === code);
+    if (!selectedCountry) {
+      setSearchValue((prev) => ({
+        ...prev,
+        id: "",
+        name: code,
+        [visibleField]: code
+      }));
+    } else {
+      setSearchValue(selectedCountry);
+    }
+  }, [autocomplete, countries, visibleField]);
+  const onSelectValue = (value) => {
+    isUpdatingRef.current = true;
+    setTimeout(() => {
+      const code = Array.isArray(value) ? value[0] ?? "" : value;
+      const selectedCountry = countries.find((country) => country.id === code);
+      if (!selectedCountry) {
+        return;
+      }
+      setSearchValue(selectedCountry);
+      isUpdatingRef.current = false;
+      if (onSelect) {
+        onSelect(selectedCountry);
+      }
+    }, 0);
+  };
+  const comboboxStore = useComboboxStore({
+    setOpen: onOpenChange,
+    defaultSelectedValue: "",
+    setSelectedValue: onSelectValue,
+    setValue: handleInputChange
+  });
+  useEffect(() => {
+    if (isOpen) {
+      comboboxStore.show();
+    } else {
+      comboboxStore.hide();
+    }
+  }, [isOpen, comboboxStore]);
+  const handleOnClearSelection = useCallback(() => {
+    var _a;
+    startTransition(() => {
+      setSearchValue(EMPTY_STATE);
+      comboboxStore.setValue("");
+    });
+    (_a = comboBoxRef.current) == null ? void 0 : _a.focus();
+  }, [comboboxStore]);
+  const matches = useMemo(() => {
+    if (!autocomplete) {
+      return countries;
+    }
+    return matchSorter(countries, searchValue.name, {
+      keys: [visibleField],
+      threshold: rankings.ACRONYM
+    });
+  }, [visibleField, searchValue.name]);
+  const rowWidth = useMemo(() => {
+    if (visibleField === "name") {
+      return "100%";
+    }
+    return showFlag ? "14ch" : "12ch";
+  }, [visibleField, showFlag]);
+  const handleBlur = () => {
+    setTimeout(() => {
+      if (isUpdatingRef.current) {
+        return;
+      }
+      if (!countries.some((c) => c.id === searchValue.id)) {
+        if (searchValue.name) {
+          setSearchValue(previousValidCountryRef.current);
+        } else {
+          if (onSelect && !(searchValue == null ? void 0 : searchValue.id)) {
+            setSearchValue(EMPTY_STATE);
+            onSelect(null);
+          }
+        }
+      }
+    }, 0);
+  };
+  const handleFocus = () => {
+    setTimeout(() => {
+      if (comboBoxRef.current) {
+        const value = comboBoxRef.current.value;
+        comboBoxRef.current.setSelectionRange(value.length, value.length);
+      }
+    }, 0);
+  };
+  return /* @__PURE__ */ jsxs(InputField, { id, className, ref: inputFieldRef, children: [
+    /* @__PURE__ */ jsx(InputField.Label, { disabled, children: label }),
+    /* @__PURE__ */ jsxs(Row, { width: rowWidth, marginTop: "lounge", children: [
+      showFlag && !!searchValue.id && /* @__PURE__ */ jsx(FlagWrapper, { children: allCodesToFlags[searchValue.id] }),
+      /* @__PURE__ */ jsxs(ComboboxProvider, { store: comboboxStore, children: [
+        /* @__PURE__ */ jsx(Combobox, { onBlur: handleBlur, disabled, render: (props) => /* @__PURE__ */ jsx(CountryNameInput, { ...props, ...rest, onFocus: handleFocus, disabled, isErrored: !!errorMessage, name, autocomplete, showFlags: showFlag, selected: !!searchValue.id, required, value: `${searchValue[visibleField] || ""}`, ref: comboBoxRef }) }),
+        !disabled && /* @__PURE__ */ jsx(Fragment, { children: isPickerClearable ? /* @__PURE__ */ jsxs(StyledIconButton, { onClick: handleOnClearSelection, tabIndex: 0, children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: labelClear }),
+          /* @__PURE__ */ jsx(CrossIcon, { size: "0.8em" })
+        ] }) : /* @__PURE__ */ jsx(ChevronIconWrapper, { children: /* @__PURE__ */ jsx(StyledChevronIcon, {}) }) }),
+        matches.length > 0 && /* @__PURE__ */ jsx(Popover, { gutter: 2, portal: true, fixed: true, portalElement, sameWidth: true, getAnchorRect: () => {
+          if (!inputFieldRef.current) {
+            return null;
+          }
+          return inputFieldRef.current.getBoundingClientRect();
+        }, $translateX: popOverTranslateX || "0", children: /* @__PURE__ */ jsx(PopupCountriesList, { children: matches.map((value) => /* @__PURE__ */ jsxs(StyledSelectItem, { value: `${value.id}`, children: [
+          showFlag && allCodesToFlags[`${value["countryCode"] || ""}`],
+          visibleField === "dialCode" ? `${value.dialCode || ""} ${value.name}` : `${value.name}`
+        ] }, `${value.id}`)) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(InputField.Validation, { screenReaderErrorPrefix, children: errorMessage })
+  ] });
+};
+export {
+  CountryPicker as default
+};
+//# sourceMappingURL=index12.js.map

package/dist/index12.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index12.js","sources":["../src/components/CountryPicker/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n  startTransition,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { matchSorter, rankings } from \"match-sorter\";\n\nimport {\n  Combobox,\n  ComboboxProvider,\n  useComboboxStore,\n  VisuallyHidden,\n} from \"@ariakit/react\";\n\nimport {\n  ChevronIconWrapper,\n  CountryNameInput,\n  FlagWrapper,\n  Popover,\n  PopupCountriesList,\n  Row,\n  StyledChevronIcon,\n  StyledIconButton,\n  StyledSelectItem,\n} from \"./index.styles\";\n\nimport InputField from \"../InputField\";\nimport { CrossIcon } from \"../../icons\";\nimport { allCodesToFlags } from \"../../flag-icons/allCodesToFlags\";\nimport { usePortalElement } from \"../../hooks/usePortalElement\";\n\nexport type Country = {\n  id: string | number;\n  name: string;\n  [key: string]: unknown;\n};\n\nexport type CountryPickerProps<T extends Country> = {\n  countries: Array<T>;\n  showFlag?: boolean;\n\n  selectedItem?: T | null;\n\n  /** The visual form element label  */\n  label: React.ReactNode;\n  /**\n   * @default 'country-picker'\n   */\n  id?: string;\n  /**\n   * @default 'country'\n   */\n  name?: string;\n  inputRef?: React.Ref<HTMLInputElement>;\n  /** The visually hidden a11y label in the button when Downshift is clearable and has a selected item  */\n  labelClear: React.ReactNode;\n  /**\n   * @default false\n   */\n  required?: boolean;\n  /** Visually hidden prefix announced to screen readers before the error message (e.g., \"Error: \").   */\n  screenReaderErrorPrefix: string;\n  /**\n   * If set, the form field border colour will switch to red and the defined message will be displayed below the field\n   */\n  errorMessage?: React.ReactNode;\n  onClear?: () => void;\n  className?: string;\n  /**\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Toggles the `readOnly` attribute on the input field, which prevents typing in the field, but still allows to select options from the dropdown.\n   * @default true\n   */\n  autocomplete?: boolean;\n  /**\n   * The property of the country object in the countries array that will be used as the Downshift and selected item visual display\n   * The width of the Downshift is also altered by the value defined here (dialCode = 12ch, name = 100%)\n   * @default 'name'\n   * */\n  visibleField?: \"name\" | \"dialCode\";\n\n  /** id of element(s) that describe the country picker input */\n  \"aria-describedby\"?: string;\n\n  /**\n   * Toggles the `clear` functionality, when set to false, the open/close buttons will be maintained on selection, no clear functionality and button will be suppressed\n   * @default true\n   * */\n  canClearSelection?: boolean;\n  onSelect?: (value: T | null) => void;\n\n  popOverTranslateX?: string;\n  isOpen?: boolean;\n  /**\n   * When set to false, the popover will be closed when the component is mounted\n   * If set to true, the popover will be open\n   * When set to false, the popover will be closed (useful for controlled components)\n   * @default false\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Callback function that is called when the state of popover is changed from open to closed or vice versa\n   */\n};\n\nconst EMPTY_STATE: Country = {\n  id: \"\",\n  name: \"\",\n};\n\nconst CountryPicker = <T extends Country>({\n  countries,\n  label,\n  id = \"country-picker\",\n  name = \"country\",\n  selectedItem,\n  inputRef,\n  labelClear,\n  required = false,\n  screenReaderErrorPrefix,\n  errorMessage,\n  onSelect,\n  onClear,\n  className,\n  visibleField = \"name\",\n  disabled = false,\n  autocomplete = true,\n  canClearSelection = true,\n  showFlag = false,\n  popOverTranslateX,\n  isOpen = false,\n  onOpenChange,\n  ...rest\n}: CountryPickerProps<T>) => {\n  const isUpdatingRef = useRef(false);\n  const comboBoxRef = useRef<HTMLInputElement>(null);\n  const inputFieldRef = useRef<HTMLDivElement>(null);\n\n  const portalElement = usePortalElement();\n\n  const [searchValue, setSearchValue] = useState<Country>({\n    ...EMPTY_STATE,\n    ...selectedItem,\n  });\n\n  const previousValidCountryRef = useRef<Country>(EMPTY_STATE);\n\n  useEffect(() => {\n    if (searchValue && countries.some((c) => c.id === searchValue.id)) {\n      // If the searchValue is a valid country, update the previous valid country reference\n      previousValidCountryRef.current = searchValue;\n    }\n  }, [searchValue, countries]);\n\n  const isPickerClearable = !!searchValue.name && canClearSelection;\n\n  const handleInputChange = useCallback(\n    (value: string | string[]) => {\n      if (!autocomplete) {\n        return;\n      }\n\n      const code = Array.isArray(value) ? (value[0] ?? \"\") : value;\n\n      const selectedCountry = countries.find(\n        (country) => country.id === code,\n      ) as T;\n\n      // country not found yet\n      if (!selectedCountry) {\n        setSearchValue((prev) => ({\n          ...prev,\n          id: \"\",\n          name: code,\n          [visibleField]: code,\n        }));\n      } else {\n        setSearchValue(selectedCountry);\n      }\n    },\n    [autocomplete, countries, visibleField],\n  );\n\n  const onSelectValue = (value: string | string[]) => {\n    // helper to prevent onBlur validation before onSelect is processed (iOS issue)\n    isUpdatingRef.current = true;\n    setTimeout(() => {\n      const code = Array.isArray(value) ? (value[0] ?? \"\") : value;\n      const selectedCountry = countries.find(\n        (country) => country.id === code,\n      ) as T;\n\n      if (!selectedCountry) {\n        return;\n      }\n\n      setSearchValue(selectedCountry);\n      isUpdatingRef.current = false;\n\n      if (onSelect) {\n        onSelect(selectedCountry);\n      }\n    }, 0);\n  };\n\n  const comboboxStore = useComboboxStore({\n    setOpen: onOpenChange,\n    defaultSelectedValue: \"\",\n    setSelectedValue: onSelectValue,\n    setValue: handleInputChange,\n  });\n\n  // TODO: this shouldn't be the way to do it\n  useEffect(() => {\n    if (isOpen) {\n      comboboxStore.show();\n    } else {\n      comboboxStore.hide();\n    }\n  }, [isOpen, comboboxStore]);\n\n  const handleOnClearSelection = useCallback(() => {\n    startTransition(() => {\n      setSearchValue(EMPTY_STATE);\n      comboboxStore.setValue(\"\");\n    });\n\n    comboBoxRef.current?.focus();\n  }, [comboboxStore]);\n\n  const matches = useMemo(() => {\n    if (!autocomplete) {\n      return countries;\n    }\n\n    return matchSorter(countries, searchValue.name, {\n      keys: [visibleField],\n      threshold: rankings.ACRONYM,\n    });\n\n    // missing countries in deps to not make cache huge\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visibleField, searchValue.name]);\n\n  const rowWidth = useMemo(() => {\n    if (visibleField === \"name\") {\n      return \"100%\";\n    }\n\n    return showFlag ? \"14ch\" : \"12ch\";\n  }, [visibleField, showFlag]);\n\n  const handleBlur = () => {\n    //the setTimeout is needed to ensure that the Blur() event is fired after the onChange(), which only occurs on iOS devices\n    setTimeout(() => {\n      if (isUpdatingRef.current) {\n        return;\n      }\n      // this reset is needed to prevent the input from being cleared when the user types a value that doesn't match any country\n      // if the user types a value that doesn't match any country, we want to keep the previous valid country\n      if (!countries.some((c) => c.id === searchValue.id)) {\n        if (searchValue.name) {\n          // If the searchValue is not empty, revert to the previous valid country\n          setSearchValue(previousValidCountryRef.current);\n        } else {\n          // If the searchValue is empty, reset to EMPTY_STATE\n          if (onSelect && !searchValue?.id) {\n            setSearchValue(EMPTY_STATE);\n            // Call onSelect with null if no valid country is selected\n            // This is to ensure that the parent component can handle the case where no country is selected\n            onSelect(null);\n          }\n        }\n      }\n    }, 0);\n  };\n\n  const handleFocus = () => {\n    // set the cursor to the end of the input field when it is focused\n    // the setTimeout is used to ensure that the input field is focused before setting the selection range\n    setTimeout(() => {\n      if (comboBoxRef.current) {\n        const value = comboBoxRef.current.value;\n        comboBoxRef.current.setSelectionRange(value.length, value.length);\n      }\n    }, 0);\n  };\n\n  return (\n    <InputField id={id} className={className} ref={inputFieldRef}>\n      <InputField.Label disabled={disabled}>{label}</InputField.Label>\n\n      <Row width={rowWidth} marginTop=\"lounge\">\n        {showFlag && !!searchValue.id && (\n          <FlagWrapper>{allCodesToFlags[searchValue.id]}</FlagWrapper>\n        )}\n        <ComboboxProvider store={comboboxStore}>\n          <Combobox\n            onBlur={handleBlur}\n            disabled={disabled}\n            render={(props) => (\n              <CountryNameInput\n                {...props}\n                {...rest}\n                onFocus={handleFocus}\n                disabled={disabled}\n                isErrored={!!errorMessage}\n                name={name}\n                autocomplete={autocomplete}\n                showFlags={showFlag}\n                selected={!!searchValue.id}\n                required={required}\n                value={`${searchValue[visibleField] || \"\"}`}\n                ref={comboBoxRef}\n              />\n            )}\n          />\n\n          {!disabled && (\n            <>\n              {isPickerClearable ? (\n                <StyledIconButton onClick={handleOnClearSelection} tabIndex={0}>\n                  <VisuallyHidden>{labelClear}</VisuallyHidden>\n                  <CrossIcon size=\"0.8em\" />\n                </StyledIconButton>\n              ) : (\n                <ChevronIconWrapper>\n                  <StyledChevronIcon />\n                </ChevronIconWrapper>\n              )}\n            </>\n          )}\n\n          {matches.length > 0 && (\n            <Popover\n              gutter={2}\n              portal\n              fixed\n              portalElement={portalElement}\n              sameWidth\n              getAnchorRect={() => {\n                if (!inputFieldRef.current) {\n                  return null;\n                }\n                return inputFieldRef.current.getBoundingClientRect();\n              }}\n              $translateX={popOverTranslateX || \"0\"}\n            >\n              <PopupCountriesList>\n                {matches.map((value) => (\n                  <StyledSelectItem key={`${value.id}`} value={`${value.id}`}>\n                    {showFlag &&\n                      allCodesToFlags[`${value[\"countryCode\"] || \"\"}`]}\n                    {visibleField === \"dialCode\"\n                      ? `${value.dialCode || \"\"} ${value.name}`\n                      : `${value.name}`}\n                  </StyledSelectItem>\n                ))}\n              </PopupCountriesList>\n            </Popover>\n          )}\n        </ComboboxProvider>\n      </Row>\n\n      <InputField.Validation screenReaderErrorPrefix={screenReaderErrorPrefix}>\n        {errorMessage}\n      </InputField.Validation>\n    </InputField>\n  );\n};\n\nexport default CountryPicker;\n"],"names":["countries","label","selectedItem","inputRef","labelClear","screenReaderErrorPrefix","errorMessage","onSelect","onClear","className","popOverTranslateX","onOpenChange","EMPTY_STATE","useEffect","previousValidCountryRef","searchValue","setSearchValue","prev","code","isUpdatingRef","setTimeout","onSelectValue","handleInputChange","comboboxStore","show","hide","startTransition","comboBoxRef","focus","ACRONYM","showFlag","getBoundingClientRect"],"mappings":";;;;;;;;;;AAiHA;AAA6B;AACvB;AAEN;AAEA;AAA0C;AACxCA;AACAC;AACK;AACE;AACPC;AACAC;AACAC;AACW;AACXC;AACAC;AACAC;AACAC;AACAC;AACe;AACJ;AACI;AACK;AACT;AACXC;AACS;AACTC;AAEqB;AACrB;AACA;AACA;AAEA;AAEA;AAAwD;AACnDC;AACAV;AAGL;AAEAW;AACE;AAEEC;AAAkCC;AACpC;AAGF;AAEA;AAEI;AACE;AAAA;AAGF;AAEA;AAKA;AACEC;AAA0B;AACrBC;AACC;AACEC;AACUA;AAChB;AAEFF;AAA8B;AAChC;AAKJ;AAEEG;AACAC;AACE;AACA;AAIA;AACE;AAAA;AAGFJ;AACAG;AAEA;AACEZ;AAAwB;AAC1B;AACE;AAGN;AAAuC;AAC5BI;AACa;AACJU;AACRC;AAIZT;AACE;AACEU;AAAcC;AAEdD;AAAcE;AAChB;AAGF;;AACEC;AACEV;AACAO;AAAyB;AAG3BI;AAAqBC;AAGvB;AACE;AACE;AAAO5B;AAGT;AAAgD;AAC3B;AACC6B;AACrB;AAMH;AACE;AACE;AAAO;AAGT;AAA2B;AAG7B;AAEET;AACE;AACE;AAAA;AAIF;AACE;AAEEJ;AAA8C;AAG9C;AACEA;AAGAT;AAAa;AACf;AACF;AACF;AACE;AAGN;AAGEa;AACE;AACE;AACAO;AAAgE;AAClE;AACE;AAGN;AAEI;AAA6C;AAG1CG;AAC+C;AAG9C;AAkBI;AAOI;AAA4B;AACL;AAO7B;AAWI;AACE;AAAO;AAET;AAA6BC;AAOxBD;AACgD;AAGhC;AAIzB;AAEJ;AACF;AAIA;AAGN;;;;"}

package/dist/index120.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const unstyledlist = styled.css(["margin:0;padding:0;list-style:none;"]);
+const buttonreset = styled.css(["margin:initial;padding:initial;border:0;color:inherit;font-weight:inherit;font-size:inherit;font-family:inherit;line-height:inherit;letter-spacing:inherit;text-align:inherit;text-transform:inherit;background-color:transparent;"]);
+const inputReset = styled.css(["margin:0;padding:0;border:0;color:inherit;font-size:inherit;font-family:inherit;background-color:transparent;"]);
+const truncatetext = styled.css(["overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
+const visuallyhidden = styled.css(["position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%);"]);
+const undovisuallyhidden = styled.css(["position:static;width:auto;height:auto;margin:0;overflow:visible;white-space:inherit;clip-path:none;"]);
+exports.buttonreset = buttonreset;
+exports.inputReset = inputReset;
+exports.truncatetext = truncatetext;
+exports.undovisuallyhidden = undovisuallyhidden;
+exports.unstyledlist = unstyledlist;
+exports.visuallyhidden = visuallyhidden;
+//# sourceMappingURL=index120.cjs.map

package/dist/index120.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index120.cjs","sources":["../src/utils/snippets.ts"],"sourcesContent":["import { css } from \"styled-components\";\n\nexport const unstyledlist = css`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n`;\n\nexport const buttonreset = css`\n  margin: initial;\n  padding: initial;\n  border: 0;\n  color: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  text-align: inherit;\n  text-transform: inherit;\n  background-color: transparent;\n`;\n\nexport const inputReset = css`\n  margin: 0;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  background-color: transparent;\n`;\n\nexport const truncatetext = css`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\nexport const visuallyhidden = css`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  clip-path: inset(50%);\n`;\n\nexport const undovisuallyhidden = css`\n  position: static;\n  width: auto;\n  height: auto;\n  margin: 0;\n  overflow: visible;\n  white-space: inherit;\n  clip-path: none;\n`;\n"],"names":["unstyledlist","css","buttonreset","inputReset","truncatetext","visuallyhidden","undovisuallyhidden"],"mappings":";;;AAEO,MAAMA,eAAeC,OAAAA,IAAG,CAAA,qCAAA,CAAA;AAMxB,MAAMC,cAAcD,OAAAA,IAAG,CAAA,oOAAA,CAAA;AAevB,MAAME,aAAaF,OAAAA,IAAG,CAAA,+GAAA,CAAA;AAUtB,MAAMG,eAAeH,OAAAA,IAAG,CAAA,4DAAA,CAAA;AAMxB,MAAMI,iBAAiBJ,OAAAA,IAAG,CAAA,gIAAA,CAAA;AAY1B,MAAMK,qBAAqBL,OAAAA,IAAG,CAAA,sGAAA,CAAA;;;;;;;"}

package/dist/index120.js

@@ -0,0 +1,16 @@
+import { css } from "styled-components";
+const unstyledlist = css(["margin:0;padding:0;list-style:none;"]);
+const buttonreset = css(["margin:initial;padding:initial;border:0;color:inherit;font-weight:inherit;font-size:inherit;font-family:inherit;line-height:inherit;letter-spacing:inherit;text-align:inherit;text-transform:inherit;background-color:transparent;"]);
+const inputReset = css(["margin:0;padding:0;border:0;color:inherit;font-size:inherit;font-family:inherit;background-color:transparent;"]);
+const truncatetext = css(["overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
+const visuallyhidden = css(["position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%);"]);
+const undovisuallyhidden = css(["position:static;width:auto;height:auto;margin:0;overflow:visible;white-space:inherit;clip-path:none;"]);
+export {
+  buttonreset,
+  inputReset,
+  truncatetext,
+  undovisuallyhidden,
+  unstyledlist,
+  visuallyhidden
+};
+//# sourceMappingURL=index120.js.map

package/dist/index120.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index120.js","sources":["../src/utils/snippets.ts"],"sourcesContent":["import { css } from \"styled-components\";\n\nexport const unstyledlist = css`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n`;\n\nexport const buttonreset = css`\n  margin: initial;\n  padding: initial;\n  border: 0;\n  color: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  text-align: inherit;\n  text-transform: inherit;\n  background-color: transparent;\n`;\n\nexport const inputReset = css`\n  margin: 0;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  background-color: transparent;\n`;\n\nexport const truncatetext = css`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\nexport const visuallyhidden = css`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  clip-path: inset(50%);\n`;\n\nexport const undovisuallyhidden = css`\n  position: static;\n  width: auto;\n  height: auto;\n  margin: 0;\n  overflow: visible;\n  white-space: inherit;\n  clip-path: none;\n`;\n"],"names":["unstyledlist","css","buttonreset","inputReset","truncatetext","visuallyhidden","undovisuallyhidden"],"mappings":";AAEO,MAAMA,eAAeC,IAAG,CAAA,qCAAA,CAAA;AAMxB,MAAMC,cAAcD,IAAG,CAAA,oOAAA,CAAA;AAevB,MAAME,aAAaF,IAAG,CAAA,+GAAA,CAAA;AAUtB,MAAMG,eAAeH,IAAG,CAAA,4DAAA,CAAA;AAMxB,MAAMI,iBAAiBJ,IAAG,CAAA,gIAAA,CAAA;AAY1B,MAAMK,qBAAqBL,IAAG,CAAA,sGAAA,CAAA;"}

package/dist/index121.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const spacing = require("./index522.cjs");
+const accentBase = styled.css(['display:block;background-color:currentColor;content:"";']);
+const mauna = styled.css(["&:before{", ";width:", ";height:", ";margin-bottom:", ";}"], accentBase, spacing.spacing.stadium, spacing.spacing.club, spacing.spacing.auditorium);
+const maunaDesktop = styled.css(["&:before{", ";width:60px;height:", ";margin-bottom:", ";}"], accentBase, spacing.spacing.club, spacing.spacing.auditorium);
+const everest = styled.css(["&:before{", ";width:44px;height:6px;margin-bottom:", ";}"], accentBase, spacing.spacing.hall);
+const everestDesktop = styled.css(["&:before{", ";width:60px;height:", ";margin-bottom:", ";}"], accentBase, spacing.spacing.club, spacing.spacing.auditorium);
+const kilimanjaro = styled.css(["&:before{", ";width:", ";height:", ";margin-bottom:", ";}"], accentBase, spacing.spacing.arena, spacing.spacing.lounge, spacing.spacing.club);
+const kilimanjaroDesktop = styled.css(["&:before{", ";width:40px;height:6px;margin-bottom:", ";}"], accentBase, spacing.spacing.hall);
+const vinson = styled.css(["&:before{", ";width:", ";height:", ";margin-bottom:", ";}"], accentBase, spacing.spacing.arena, spacing.spacing.lounge, spacing.spacing.club);
+const blanc = styled.css(["&:before{", ";width:", ";height:", ";margin-bottom:", ";}"], accentBase, spacing.spacing.amphitheatre, spacing.spacing.lounge, spacing.spacing.club);
+const blancDesktop = styled.css(["&:before{", ";width:", ";height:", ";margin-bottom:", ";}"], accentBase, spacing.spacing.arena, spacing.spacing.lounge, spacing.spacing.club);
+const titleAccents = {
+  mauna,
+  maunaDesktop,
+  everest,
+  everestDesktop,
+  kilimanjaro,
+  kilimanjaroDesktop,
+  // Vinson is identical on mobile and desktop, but we export them seperately in case this changes at some point
+  vinson,
+  vinsonDesktop: vinson,
+  blanc,
+  blancDesktop
+};
+exports.titleAccents = titleAccents;
+//# sourceMappingURL=index121.cjs.map

package/dist/index121.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index121.cjs","sources":["../src/utils/titleAccents.ts"],"sourcesContent":["import { css } from \"styled-components\";\nimport { spacing } from \"../dimensions\";\n\nconst accentBase = css`\n  display: block;\n  background-color: currentColor;\n  content: \"\";\n`;\n\nconst mauna = css`\n  &:before {\n    ${accentBase};\n    width: ${spacing.stadium};\n    height: ${spacing.club};\n    margin-bottom: ${spacing.auditorium};\n  }\n`;\n\nconst maunaDesktop = css`\n  &:before {\n    ${accentBase};\n    width: 60px;\n    height: ${spacing.club};\n    margin-bottom: ${spacing.auditorium};\n  }\n`;\n\nconst everest = css`\n  &:before {\n    ${accentBase};\n    width: 44px;\n    height: 6px;\n    margin-bottom: ${spacing.hall};\n  }\n`;\n\nconst everestDesktop = css`\n  &:before {\n    ${accentBase};\n    width: 60px;\n    height: ${spacing.club};\n    margin-bottom: ${spacing.auditorium};\n  }\n`;\n\nconst kilimanjaro = css`\n  &:before {\n    ${accentBase};\n    width: ${spacing.arena};\n    height: ${spacing.lounge};\n    margin-bottom: ${spacing.club};\n  }\n`;\n\nconst kilimanjaroDesktop = css`\n  &:before {\n    ${accentBase};\n    width: 40px;\n    height: 6px;\n    margin-bottom: ${spacing.hall};\n  }\n`;\n\nconst vinson = css`\n  &:before {\n    ${accentBase};\n    width: ${spacing.arena};\n    height: ${spacing.lounge};\n    margin-bottom: ${spacing.club};\n  }\n`;\n\nconst blanc = css`\n  &:before {\n    ${accentBase};\n    width: ${spacing.amphitheatre};\n    height: ${spacing.lounge};\n    margin-bottom: ${spacing.club};\n  }\n`;\n\nconst blancDesktop = css`\n  &:before {\n    ${accentBase};\n    width: ${spacing.arena};\n    height: ${spacing.lounge};\n    margin-bottom: ${spacing.club};\n  }\n`;\n\nexport const titleAccents = {\n  mauna,\n  maunaDesktop,\n  everest,\n  everestDesktop,\n  kilimanjaro,\n  kilimanjaroDesktop,\n  // Vinson is identical on mobile and desktop, but we export them seperately in case this changes at some point\n  vinson,\n  vinsonDesktop: vinson,\n  blanc,\n  blancDesktop,\n};\n"],"names":["accentBase","css","mauna","spacing","stadium","club","auditorium","maunaDesktop","everest","hall","everestDesktop","kilimanjaro","arena","lounge","kilimanjaroDesktop","vinson","blanc","amphitheatre","blancDesktop","titleAccents","vinsonDesktop"],"mappings":";;;;AAGA,MAAMA,aAAaC,OAAAA,IAAG,CAAA,yDAAA,CAAA;AAMtB,MAAMC,QAAQD,OAAAA,IAAG,CAAA,aAAA,WAAA,YAAA,mBAAA,IAAA,GAEXD,YACOG,QAAAA,QAAQC,SACPD,QAAAA,QAAQE,MACDF,QAAAA,QAAQG,UAAU;AAIvC,MAAMC,eAAeN,OAAAA,IAAG,CAAA,aAAA,uBAAA,mBAAA,IAAA,GAElBD,YAEQG,QAAAA,QAAQE,MACDF,QAAAA,QAAQG,UAAU;AAIvC,MAAME,UAAUP,OAAAA,IAAG,CAAA,aAAA,yCAAA,IAAA,GAEbD,YAGeG,QAAAA,QAAQM,IAAI;AAIjC,MAAMC,iBAAiBT,OAAAA,IAAG,CAAA,aAAA,uBAAA,mBAAA,IAAA,GAEpBD,YAEQG,QAAAA,QAAQE,MACDF,QAAAA,QAAQG,UAAU;AAIvC,MAAMK,cAAcV,OAAAA,IAAG,CAAA,aAAA,WAAA,YAAA,mBAAA,IAAA,GAEjBD,YACOG,QAAAA,QAAQS,OACPT,QAAAA,QAAQU,QACDV,QAAAA,QAAQE,IAAI;AAIjC,MAAMS,qBAAqBb,OAAAA,IAAG,CAAA,aAAA,yCAAA,IAAA,GAExBD,YAGeG,QAAAA,QAAQM,IAAI;AAIjC,MAAMM,SAASd,OAAAA,IAAG,CAAA,aAAA,WAAA,YAAA,mBAAA,IAAA,GAEZD,YACOG,QAAAA,QAAQS,OACPT,QAAAA,QAAQU,QACDV,QAAAA,QAAQE,IAAI;AAIjC,MAAMW,QAAQf,OAAAA,IAAG,CAAA,aAAA,WAAA,YAAA,mBAAA,IAAA,GAEXD,YACOG,QAAAA,QAAQc,cACPd,QAAAA,QAAQU,QACDV,QAAAA,QAAQE,IAAI;AAIjC,MAAMa,eAAejB,OAAAA,IAAG,CAAA,aAAA,WAAA,YAAA,mBAAA,IAAA,GAElBD,YACOG,QAAAA,QAAQS,OACPT,QAAAA,QAAQU,QACDV,QAAAA,QAAQE,IAAI;AAI1B,MAAMc,eAAe;AAAA,EAC1BjB;AAAAA,EACAK;AAAAA,EACAC;AAAAA,EACAE;AAAAA,EACAC;AAAAA,EACAG;AAAAA;AAAAA,EAEAC;AAAAA,EACAK,eAAeL;AAAAA,EACfC;AAAAA,EACAE;AACF;;"}

package/dist/index121.js

@@ -0,0 +1,29 @@
+import { css } from "styled-components";
+import { spacing } from "./index522.js";
+const accentBase = css(['display:block;background-color:currentColor;content:"";']);
+const mauna = css(["&:before{", ";width:", ";height:", ";margin-bottom:", ";}"], accentBase, spacing.stadium, spacing.club, spacing.auditorium);
+const maunaDesktop = css(["&:before{", ";width:60px;height:", ";margin-bottom:", ";}"], accentBase, spacing.club, spacing.auditorium);
+const everest = css(["&:before{", ";width:44px;height:6px;margin-bottom:", ";}"], accentBase, spacing.hall);
+const everestDesktop = css(["&:before{", ";width:60px;height:", ";margin-bottom:", ";}"], accentBase, spacing.club, spacing.auditorium);
+const kilimanjaro = css(["&:before{", ";width:", ";height:", ";margin-bottom:", ";}"], accentBase, spacing.arena, spacing.lounge, spacing.club);
+const kilimanjaroDesktop = css(["&:before{", ";width:40px;height:6px;margin-bottom:", ";}"], accentBase, spacing.hall);
+const vinson = css(["&:before{", ";width:", ";height:", ";margin-bottom:", ";}"], accentBase, spacing.arena, spacing.lounge, spacing.club);
+const blanc = css(["&:before{", ";width:", ";height:", ";margin-bottom:", ";}"], accentBase, spacing.amphitheatre, spacing.lounge, spacing.club);
+const blancDesktop = css(["&:before{", ";width:", ";height:", ";margin-bottom:", ";}"], accentBase, spacing.arena, spacing.lounge, spacing.club);
+const titleAccents = {
+  mauna,
+  maunaDesktop,
+  everest,
+  everestDesktop,
+  kilimanjaro,
+  kilimanjaroDesktop,
+  // Vinson is identical on mobile and desktop, but we export them seperately in case this changes at some point
+  vinson,
+  vinsonDesktop: vinson,
+  blanc,
+  blancDesktop
+};
+export {
+  titleAccents
+};
+//# sourceMappingURL=index121.js.map

package/dist/index121.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index121.js","sources":["../src/utils/titleAccents.ts"],"sourcesContent":["import { css } from \"styled-components\";\nimport { spacing } from \"../dimensions\";\n\nconst accentBase = css`\n  display: block;\n  background-color: currentColor;\n  content: \"\";\n`;\n\nconst mauna = css`\n  &:before {\n    ${accentBase};\n    width: ${spacing.stadium};\n    height: ${spacing.club};\n    margin-bottom: ${spacing.auditorium};\n  }\n`;\n\nconst maunaDesktop = css`\n  &:before {\n    ${accentBase};\n    width: 60px;\n    height: ${spacing.club};\n    margin-bottom: ${spacing.auditorium};\n  }\n`;\n\nconst everest = css`\n  &:before {\n    ${accentBase};\n    width: 44px;\n    height: 6px;\n    margin-bottom: ${spacing.hall};\n  }\n`;\n\nconst everestDesktop = css`\n  &:before {\n    ${accentBase};\n    width: 60px;\n    height: ${spacing.club};\n    margin-bottom: ${spacing.auditorium};\n  }\n`;\n\nconst kilimanjaro = css`\n  &:before {\n    ${accentBase};\n    width: ${spacing.arena};\n    height: ${spacing.lounge};\n    margin-bottom: ${spacing.club};\n  }\n`;\n\nconst kilimanjaroDesktop = css`\n  &:before {\n    ${accentBase};\n    width: 40px;\n    height: 6px;\n    margin-bottom: ${spacing.hall};\n  }\n`;\n\nconst vinson = css`\n  &:before {\n    ${accentBase};\n    width: ${spacing.arena};\n    height: ${spacing.lounge};\n    margin-bottom: ${spacing.club};\n  }\n`;\n\nconst blanc = css`\n  &:before {\n    ${accentBase};\n    width: ${spacing.amphitheatre};\n    height: ${spacing.lounge};\n    margin-bottom: ${spacing.club};\n  }\n`;\n\nconst blancDesktop = css`\n  &:before {\n    ${accentBase};\n    width: ${spacing.arena};\n    height: ${spacing.lounge};\n    margin-bottom: ${spacing.club};\n  }\n`;\n\nexport const titleAccents = {\n  mauna,\n  maunaDesktop,\n  everest,\n  everestDesktop,\n  kilimanjaro,\n  kilimanjaroDesktop,\n  // Vinson is identical on mobile and desktop, but we export them seperately in case this changes at some point\n  vinson,\n  vinsonDesktop: vinson,\n  blanc,\n  blancDesktop,\n};\n"],"names":["accentBase","css","mauna","spacing","stadium","club","auditorium","maunaDesktop","everest","hall","everestDesktop","kilimanjaro","arena","lounge","kilimanjaroDesktop","vinson","blanc","amphitheatre","blancDesktop","titleAccents","vinsonDesktop"],"mappings":";;AAGA,MAAMA,aAAaC,IAAG,CAAA,yDAAA,CAAA;AAMtB,MAAMC,QAAQD,IAAG,CAAA,aAAA,WAAA,YAAA,mBAAA,IAAA,GAEXD,YACOG,QAAQC,SACPD,QAAQE,MACDF,QAAQG,UAAU;AAIvC,MAAMC,eAAeN,IAAG,CAAA,aAAA,uBAAA,mBAAA,IAAA,GAElBD,YAEQG,QAAQE,MACDF,QAAQG,UAAU;AAIvC,MAAME,UAAUP,IAAG,CAAA,aAAA,yCAAA,IAAA,GAEbD,YAGeG,QAAQM,IAAI;AAIjC,MAAMC,iBAAiBT,IAAG,CAAA,aAAA,uBAAA,mBAAA,IAAA,GAEpBD,YAEQG,QAAQE,MACDF,QAAQG,UAAU;AAIvC,MAAMK,cAAcV,IAAG,CAAA,aAAA,WAAA,YAAA,mBAAA,IAAA,GAEjBD,YACOG,QAAQS,OACPT,QAAQU,QACDV,QAAQE,IAAI;AAIjC,MAAMS,qBAAqBb,IAAG,CAAA,aAAA,yCAAA,IAAA,GAExBD,YAGeG,QAAQM,IAAI;AAIjC,MAAMM,SAASd,IAAG,CAAA,aAAA,WAAA,YAAA,mBAAA,IAAA,GAEZD,YACOG,QAAQS,OACPT,QAAQU,QACDV,QAAQE,IAAI;AAIjC,MAAMW,QAAQf,IAAG,CAAA,aAAA,WAAA,YAAA,mBAAA,IAAA,GAEXD,YACOG,QAAQc,cACPd,QAAQU,QACDV,QAAQE,IAAI;AAIjC,MAAMa,eAAejB,IAAG,CAAA,aAAA,WAAA,YAAA,mBAAA,IAAA,GAElBD,YACOG,QAAQS,OACPT,QAAQU,QACDV,QAAQE,IAAI;AAI1B,MAAMc,eAAe;AAAA,EAC1BjB;AAAAA,EACAK;AAAAA,EACAC;AAAAA,EACAE;AAAAA,EACAC;AAAAA,EACAG;AAAAA;AAAAA,EAEAC;AAAAA,EACAK,eAAeL;AAAAA,EACfC;AAAAA,EACAE;AACF;"}

package/dist/index122.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const GdsPortalRootId = "gds-portal-root";
+const usePortalElement = () => {
+  return React.useCallback(() => {
+    let wrapper = document.querySelector(`#${GdsPortalRootId}`);
+    if (!wrapper) {
+      wrapper = document.createElement("div");
+      wrapper.id = GdsPortalRootId;
+      const portalRoot = document.body;
+      portalRoot.appendChild(wrapper);
+    }
+    return wrapper;
+  }, []);
+};
+exports.GdsPortalRootId = GdsPortalRootId;
+exports.usePortalElement = usePortalElement;
+//# sourceMappingURL=index122.cjs.map

package/dist/index122.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index122.cjs","sources":["../src/hooks/usePortalElement.ts"],"sourcesContent":["import { useCallback } from \"react\";\n\n/**\n * The Root node id where the GDS popups appended to\n */\nexport const GdsPortalRootId = \"gds-portal-root\";\n\nexport const usePortalElement = () => {\n  return useCallback(() => {\n    let wrapper = document.querySelector<HTMLDivElement>(`#${GdsPortalRootId}`);\n    if (!wrapper) {\n      wrapper = document.createElement(\"div\");\n      wrapper.id = GdsPortalRootId;\n      const portalRoot = document.body;\n      portalRoot.appendChild(wrapper);\n    }\n    return wrapper;\n  }, []);\n};\n"],"names":["GdsPortalRootId","usePortalElement","useCallback","wrapper","document","querySelector","createElement","id","portalRoot","body","appendChild"],"mappings":";;;AAKO,MAAMA,kBAAkB;AAExB,MAAMC,mBAAmBA,MAAM;AACpC,SAAOC,MAAAA,YAAY,MAAM;AACvB,QAAIC,UAAUC,SAASC,cAA8B,IAAIL,eAAe,EAAE;AAC1E,QAAI,CAACG,SAAS;AACZA,gBAAUC,SAASE,cAAc,KAAK;AACtCH,cAAQI,KAAKP;AACb,YAAMQ,aAAaJ,SAASK;AAC5BD,iBAAWE,YAAYP,OAAO;AAAA,IAChC;AACA,WAAOA;AAAAA,EACT,GAAG,CAAA,CAAE;AACP;;;"}

package/dist/index122.js

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+const GdsPortalRootId = "gds-portal-root";
+const usePortalElement = () => {
+  return useCallback(() => {
+    let wrapper = document.querySelector(`#${GdsPortalRootId}`);
+    if (!wrapper) {
+      wrapper = document.createElement("div");
+      wrapper.id = GdsPortalRootId;
+      const portalRoot = document.body;
+      portalRoot.appendChild(wrapper);
+    }
+    return wrapper;
+  }, []);
+};
+export {
+  GdsPortalRootId,
+  usePortalElement
+};
+//# sourceMappingURL=index122.js.map

package/dist/index122.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index122.js","sources":["../src/hooks/usePortalElement.ts"],"sourcesContent":["import { useCallback } from \"react\";\n\n/**\n * The Root node id where the GDS popups appended to\n */\nexport const GdsPortalRootId = \"gds-portal-root\";\n\nexport const usePortalElement = () => {\n  return useCallback(() => {\n    let wrapper = document.querySelector<HTMLDivElement>(`#${GdsPortalRootId}`);\n    if (!wrapper) {\n      wrapper = document.createElement(\"div\");\n      wrapper.id = GdsPortalRootId;\n      const portalRoot = document.body;\n      portalRoot.appendChild(wrapper);\n    }\n    return wrapper;\n  }, []);\n};\n"],"names":["GdsPortalRootId","usePortalElement","useCallback","wrapper","document","querySelector","createElement","id","portalRoot","body","appendChild"],"mappings":";AAKO,MAAMA,kBAAkB;AAExB,MAAMC,mBAAmBA,MAAM;AACpC,SAAOC,YAAY,MAAM;AACvB,QAAIC,UAAUC,SAASC,cAA8B,IAAIL,eAAe,EAAE;AAC1E,QAAI,CAACG,SAAS;AACZA,gBAAUC,SAASE,cAAc,KAAK;AACtCH,cAAQI,KAAKP;AACb,YAAMQ,aAAaJ,SAASK;AAC5BD,iBAAWE,YAAYP,OAAO;AAAA,IAChC;AACA,WAAOA;AAAAA,EACT,GAAG,CAAA,CAAE;AACP;"}

package/dist/index123.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const htmlToImage = require("html-to-image");
+async function refToPng(ref, options) {
+  if (!ref.current) {
+    throw new Error("ref.current is null, element not mounted");
+  }
+  return htmlToImage.toPng(ref.current, {
+    pixelRatio: 2,
+    ...options ?? {}
+  });
+}
+exports.refToPng = refToPng;
+//# sourceMappingURL=index123.cjs.map

package/dist/index123.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index123.cjs","sources":["../src/utils/htmlToImage.ts"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { toPng } from \"html-to-image\";\n\n/**\n * Generates a `.png` image from a DOM node.\n *\n * **Note: Does not support all CSS rules so test thoroughly.**\n *\n * **Note: Only tested with the `ShareCard` component. Usage with other components might work but is not tested and thus might have breaking changes in minor/patch versions.**\n */\nexport async function refToPng(\n  ref: RefObject<HTMLElement>,\n  options?: Parameters<typeof toPng>[1],\n): Promise<string> {\n  if (!ref.current) {\n    throw new Error(\"ref.current is null, element not mounted\");\n  }\n\n  return toPng(ref.current, { pixelRatio: 2, ...(options ?? {}) });\n}\n"],"names":["refToPng","ref","options","current","Error","toPng","pixelRatio"],"mappings":";;;AAUA,eAAsBA,SACpBC,KACAC,SACiB;AACjB,MAAI,CAACD,IAAIE,SAAS;AAChB,UAAM,IAAIC,MAAM,0CAA0C;AAAA,EAC5D;AAEA,SAAOC,YAAAA,MAAMJ,IAAIE,SAAS;AAAA,IAAEG,YAAY;AAAA,IAAG,GAAIJ,WAAW,CAAA;AAAA,EAAC,CAAI;AACjE;;"}

package/dist/index123.js

@@ -0,0 +1,14 @@
+import { toPng } from "html-to-image";
+async function refToPng(ref, options) {
+  if (!ref.current) {
+    throw new Error("ref.current is null, element not mounted");
+  }
+  return toPng(ref.current, {
+    pixelRatio: 2,
+    ...options ?? {}
+  });
+}
+export {
+  refToPng
+};
+//# sourceMappingURL=index123.js.map

package/dist/index123.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index123.js","sources":["../src/utils/htmlToImage.ts"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { toPng } from \"html-to-image\";\n\n/**\n * Generates a `.png` image from a DOM node.\n *\n * **Note: Does not support all CSS rules so test thoroughly.**\n *\n * **Note: Only tested with the `ShareCard` component. Usage with other components might work but is not tested and thus might have breaking changes in minor/patch versions.**\n */\nexport async function refToPng(\n  ref: RefObject<HTMLElement>,\n  options?: Parameters<typeof toPng>[1],\n): Promise<string> {\n  if (!ref.current) {\n    throw new Error(\"ref.current is null, element not mounted\");\n  }\n\n  return toPng(ref.current, { pixelRatio: 2, ...(options ?? {}) });\n}\n"],"names":["refToPng","ref","options","current","Error","toPng","pixelRatio"],"mappings":";AAUA,eAAsBA,SACpBC,KACAC,SACiB;AACjB,MAAI,CAACD,IAAIE,SAAS;AAChB,UAAM,IAAIC,MAAM,0CAA0C;AAAA,EAC5D;AAEA,SAAOC,MAAMJ,IAAIE,SAAS;AAAA,IAAEG,YAAY;AAAA,IAAG,GAAIJ,WAAW,CAAA;AAAA,EAAC,CAAI;AACjE;"}