@asantemedia-org/edwardsvacuum-design-system 1.6.1 → 1.6.3

package/dist/app/api/hello/route.d.ts

@@ -0,0 +1 @@
+export declare function GET(request: Request): Promise<Response>;

package/dist/app/api/hello/route.js

@@ -0,0 +1,43 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+export function GET(request) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, new Response('Hello, Next.js!')];
+        });
+    });
+}

package/dist/app/layout.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import './globals.css';
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function RootLayout({ children, }: {
+    children: React.ReactNode;
+}): JSX.Element;

package/dist/app/layout.js

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import './globals.css';
+export var metadata = {
+    title: 'Create Next App',
+    description: 'Generated by create next app',
+};
+export default function RootLayout(_a) {
+    var children = _a.children;
+    return (_jsx("html", __assign({ lang: "en" }, { children: _jsx("body", { children: children }) })));
+}

package/dist/app/page.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Home(): JSX.Element;

package/dist/app/page.js

@@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { Inter } from 'next/font/google';
+var inter = Inter({ subsets: ['latin'] });
+export default function Home() {
+    return (_jsxs("main", __assign({ className: "flex min-h-screen flex-col items-center justify-between p-24" }, { children: [_jsxs("div", __assign({ className: "z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex" }, { children: [_jsxs("p", __assign({ className: "fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30" }, { children: ["Get started by editing\u00A0", _jsx("code", __assign({ className: "font-mono font-bold" }, { children: "src/app/page.tsx" }))] })), _jsx("div", __assign({ className: "fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none" }, { children: _jsxs("a", __assign({ className: "pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0", href: "https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", target: "_blank", rel: "noopener noreferrer" }, { children: ["By", ' ', _jsx(Image, { src: "/vercel.svg", alt: "Vercel Logo", className: "dark:invert", width: 100, height: 24, priority: true })] })) }))] })), _jsx("div", __assign({ className: "relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]" }, { children: _jsx(Image, { className: "relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert", src: "/next.svg", alt: "Next.js Logo", width: 180, height: 37, priority: true }) })), _jsxs("div", __assign({ className: "mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left" }, { children: [_jsxs("a", __assign({ href: "https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30", target: "_blank", rel: "noopener noreferrer" }, { children: [_jsxs("h2", __assign({ className: "".concat(inter.className, " mb-3 text-2xl font-semibold") }, { children: ["Docs", ' ', _jsx("span", __assign({ className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none" }, { children: "->" }))] })), _jsx("p", __assign({ className: "".concat(inter.className, " m-0 max-w-[30ch] text-sm opacity-50") }, { children: "Find in-depth information about Next.js features and API." }))] })), _jsxs("a", __assign({ href: "https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30", target: "_blank", rel: "noopener noreferrer" }, { children: [_jsxs("h2", __assign({ className: "".concat(inter.className, " mb-3 text-2xl font-semibold") }, { children: ["Learn", ' ', _jsx("span", __assign({ className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none" }, { children: "->" }))] })), _jsx("p", __assign({ className: "".concat(inter.className, " m-0 max-w-[30ch] text-sm opacity-50") }, { children: "Learn about Next.js in an interactive course with\u00A0quizzes!" }))] })), _jsxs("a", __assign({ href: "https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30", target: "_blank", rel: "noopener noreferrer" }, { children: [_jsxs("h2", __assign({ className: "".concat(inter.className, " mb-3 text-2xl font-semibold") }, { children: ["Templates", ' ', _jsx("span", __assign({ className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none" }, { children: "->" }))] })), _jsx("p", __assign({ className: "".concat(inter.className, " m-0 max-w-[30ch] text-sm opacity-50") }, { children: "Explore the Next.js 13 playground." }))] })), _jsxs("a", __assign({ href: "https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30", target: "_blank", rel: "noopener noreferrer" }, { children: [_jsxs("h2", __assign({ className: "".concat(inter.className, " mb-3 text-2xl font-semibold") }, { children: ["Deploy", ' ', _jsx("span", __assign({ className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none" }, { children: "->" }))] })), _jsx("p", __assign({ className: "".concat(inter.className, " m-0 max-w-[30ch] text-sm opacity-50") }, { children: "Instantly deploy your Next.js site to a shareable URL with Vercel." }))] }))] }))] })));
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as AlgoliaDynamicSearch } from "@stories/experiences/Algolia-dynamic-search/algolia-dynamic-search";

package/dist/stories/atoms/forms/checkbox/checkbox.d.ts

@@ -0,0 +1,10 @@
+import './checkbox.scss';
+interface CheckboxProps {
+    label?: string;
+    name?: string;
+    onChange?: any;
+    containerClassName?: string;
+    custom?: boolean;
+}
+export declare const Checkbox: ({ label, name, onChange, containerClassName, custom }: CheckboxProps) => JSX.Element;
+export {};

package/dist/stories/atoms/forms/checkbox/checkbox.js

@@ -0,0 +1,26 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './checkbox.scss';
+import { useState } from 'react';
+export var Checkbox = function (_a) {
+    var label = _a.label, name = _a.name, onChange = _a.onChange, containerClassName = _a.containerClassName, custom = _a.custom;
+    var _b = useState(false), isChecked = _b[0], setIsChecked = _b[1];
+    var handleChange = function (e) {
+        setIsChecked(e.target.checked);
+        onChange(e.target.checked);
+    };
+    return (_jsx("div", __assign({ className: containerClassName }, { children: _jsx("div", __assign({ className: "cmp-form__checkbox" }, { children: custom ?
+                (_jsxs("div", __assign({ className: "cmp-form__checkbox__custom" }, { children: [_jsx("input", { type: "checkbox", name: name, id: name, className: 'cmp-form__checkbox__custom__input', onChange: handleChange, checked: isChecked }), _jsx("div", { className: "cmp-form__checkbox__custom__check" }), label && _jsx("label", __assign({ htmlFor: name }, { children: label }))] })))
+                :
+                    (_jsxs(_Fragment, { children: [_jsx("input", { type: "checkbox", name: name, id: name, onChange: handleChange, checked: isChecked }), label && _jsx("label", __assign({ htmlFor: name }, { children: label }))] })) })) })));
+};

package/dist/stories/atoms/forms/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+import { Checkbox } from "./checkbox";
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+export declare const Default: () => JSX.Element;
+export declare const Custom: () => JSX.Element;

package/dist/stories/atoms/forms/checkbox/checkbox.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from "./checkbox";
+var meta = {
+    title: "Atoms/Form Elements/Checkbox",
+    component: Checkbox,
+    argTypes: {
+        containerClassName: {
+            options: ["cmp-form__checkbox__container", "cmp-form__checkbox--is-active"],
+            table: {
+                disable: true
+            }
+        },
+        onChange: {
+            action: 'onChange'
+        }
+    }
+};
+export default meta;
+export var Default = function () {
+    return _jsx(Checkbox, { containerClassName: "cmp-form__checkbox__container", label: "I have read and accepted the privacy policy" });
+};
+export var Custom = function () {
+    return _jsx(Checkbox, { containerClassName: "cmp-form__checkbox__container", label: "I have read and accepted the privacy policy", custom: true });
+};

package/dist/stories/atoms/forms/input/input.d.ts

@@ -0,0 +1,30 @@
+import './input.scss';
+interface InputProps {
+    label?: string;
+    placeholder?: string;
+    type?: string;
+    name?: string;
+    id?: string;
+    value?: string;
+    onClick?: any;
+    onChange?: any;
+    onFocus?: any;
+    className?: string;
+    icon?: any;
+    containerClassName?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    pattern?: string;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    readOnly?: boolean;
+    size?: number;
+    step?: number;
+    tabIndex?: number;
+    iconOnClick?: any;
+    showButton?: boolean;
+}
+export declare const Input: ({ label, placeholder, type, name, id, className, containerClassName, onClick, onFocus, onChange, icon, iconOnClick, showButton, value }: InputProps) => JSX.Element;
+export {};

package/dist/stories/atoms/forms/input/input.js

@@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './input.scss';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+export var Input = function (_a) {
+    var label = _a.label, placeholder = _a.placeholder, type = _a.type, name = _a.name, id = _a.id, className = _a.className, containerClassName = _a.containerClassName, onClick = _a.onClick, onFocus = _a.onFocus, onChange = _a.onChange, icon = _a.icon, iconOnClick = _a.iconOnClick, showButton = _a.showButton, value = _a.value;
+    return (_jsxs("div", __assign({ className: containerClassName }, { children: [label && _jsx("label", __assign({ htmlFor: id }, { children: label })), icon && !showButton && _jsx("div", __assign({ className: "cmp-form__input-icon", onClick: iconOnClick }, { children: _jsx(FontAwesomeIcon, { icon: icon }) })), _jsx("input", { className: className, type: type, name: name, id: id, placeholder: placeholder, onClick: onClick, onFocus: onFocus, onChange: onChange, value: value }), showButton && _jsx("button", __assign({ className: "cmp-form__input-submit-btn" }, { children: _jsx(FontAwesomeIcon, { icon: icon }) }))] })));
+};

package/dist/stories/atoms/forms/input/input.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta } from "@storybook/react";
+import { Input } from "./input";
+declare const meta: Meta<typeof Input>;
+export default meta;
+export declare const Search: (props: any) => JSX.Element;
+export declare const SearchWithButton: () => JSX.Element;

package/dist/stories/atoms/forms/input/input.stories.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Input } from "./input";
+import { faClose, faMagnifyingGlass } from "@fortawesome/pro-solid-svg-icons";
+var meta = {
+    title: "Atoms/Form Elements/Input",
+    component: Input,
+    tags: ['autodocs'],
+    argTypes: {
+        className: {
+            options: ["input-search", "input-text", "input-textarea"],
+            table: {
+                disable: true
+            }
+        },
+        onFocus: {
+            action: 'focusedCallback'
+        },
+        onClick: {
+            action: 'clickedCallback'
+        }
+    }
+};
+export default meta;
+export var Search = function (props) {
+    var open = props.open, openState = props.openState;
+    var _a = useState(open), active = _a[0], setActive = _a[1];
+    useEffect(function () {
+        setActive(open);
+    }, [open]);
+    var activate = function () {
+        setActive(true);
+        openState(true);
+    };
+    var deactivate = function (e) {
+        e.stopPropagation();
+        setActive(false);
+        openState(false);
+        var container = e.target.closest('.cmp-form__input-container');
+        var input = container.querySelector('input');
+        input.blur();
+    };
+    var containerActiveClassNameString = ['cmp-form__input-container', "cmp-form__input-search", "cmp-form__input-search--is-active"].join(' ');
+    var containerClassNameString = ['cmp-form__input-container', "cmp-form__input-search", "cmp-form__input-search--is-inactive"].join(' ');
+    return active ?
+        _jsx(Input, { containerClassName: containerActiveClassNameString, className: "cmp-form__input", type: "search", icon: faClose, iconOnClick: deactivate })
+        :
+            _jsx(Input, { containerClassName: containerClassNameString, className: "cmp-form__input", placeholder: "Search Edwards Vacuum", type: "search", icon: faMagnifyingGlass, onClick: activate, iconOnClick: activate, onFocus: activate, value: '' });
+};
+export var SearchWithButton = function () {
+    return _jsx(Input, { containerClassName: "cmp-form__input-container cmp-form__input-search-with-button", className: "cmp-form__input", placeholder: "Search Edwards Vacuum", type: "search", icon: faMagnifyingGlass, iconOnClick: function () { }, showButton: true });
+};

package/dist/stories/atoms/forms/select/script.d.ts

@@ -0,0 +1 @@
+export function customDropdownInit(element: any): void;

package/dist/stories/atoms/forms/select/script.js

@@ -0,0 +1,111 @@
+export var customDropdownInit = function (element) {
+    //define variables
+    var select = element;
+    var selectOptions = select.querySelectorAll("option");
+    var parentElement = select.parentElement;
+    var selectBox = parentElement.querySelector(".custom-dropdown .dropdown-select-box");
+    var selectBoxLabel = parentElement.querySelector(".custom-dropdown .dropdown-select-box > span");
+    var selectBoxOptions = parentElement.querySelector(".dropdown-select-options");
+    // const selectBoxOptionItem = parentElement.querySelector(".dropdown-select-options-item");
+    // fill options
+    createDropdownOptions(selectOptions, selectBox, selectBoxOptions, selectBoxLabel);
+    //hide original select box
+    select.style.display = "none";
+    //show custom select box
+    parentElement.querySelector(".custom-dropdown").classList.remove("hidden");
+    // add event listeners
+    selectBox.addEventListener("click", function () {
+        toggleCustomDropdown(selectBox, selectBoxOptions);
+    });
+    // accessiblity
+    selectBox.addEventListener("keydown", function (e) {
+        if (e.key === "ArrowDown" || e.key === 'Enter') {
+            toggleCustomDropdown(selectBox, selectBoxOptions);
+            // focus first option
+            selectBoxOptions.querySelector(".dropdown-select-options-item").focus();
+        }
+    });
+};
+var createDropdownOptions = function (selectOptions, selectBox, selectBoxOptions, selectBoxLabel) {
+    selectOptions.forEach(function (option) {
+        var isSelected = option.getAttribute("data-selected");
+        var selectedValue = option.value;
+        var selectedValueText = option.innerHTML.trim().replace(/\n /g, "");
+        // create option item
+        var optionItem = document.createElement("div");
+        var optionItemText = document.createElement("span");
+        // add classes and attributes
+        optionItem.classList.add("dropdown-select-options-item");
+        optionItem.setAttribute("data-value", selectedValue);
+        optionItemText.innerHTML = selectedValueText;
+        optionItem.appendChild(optionItemText);
+        // add accessibility
+        optionItem.setAttribute("tabindex", "0");
+        optionItem.setAttribute("role", "option");
+        optionItem.setAttribute("aria-selected", isSelected);
+        if (isSelected === "true") {
+            selectBoxLabel.innerHTML = selectedValueText;
+            setDataAttribute(selectBoxLabel, "selected", isSelected);
+        }
+        // add event listener
+        optionItem.addEventListener("click", function () {
+            setSelectedValue(this);
+        });
+        // accessiblity
+        optionItem.addEventListener("keydown", function (e) {
+            if (e.key === 'Enter') {
+                setSelectedValue(e.target);
+            }
+            if (e.key === "ArrowDown") {
+                // focus next option
+                e.target.nextElementSibling.focus();
+            }
+            if (e.key === "ArrowUp") {
+                // focus previous option
+                if (e.target.previousElementSibling === null) {
+                    // focus select box
+                    selectBox.focus();
+                }
+                else {
+                    e.target.previousElementSibling.focus();
+                }
+            }
+        });
+        selectBoxOptions.appendChild(optionItem);
+    });
+};
+var toggleCustomDropdown = function (selectBox, selectBoxOptions) {
+    // postion options
+    selectBox.classList.toggle("folded");
+    selectBoxOptions.classList.toggle("hidden");
+    if (selectBox.classList.contains("folded")) {
+        selectBoxOptions.style.marginTop = selectBox.offsetHeight - 1 + "px";
+    }
+};
+var setSelectedValue = function (item) {
+    var select = item.parentElement.parentElement.parentElement.querySelector("select");
+    var selectOptions = select.querySelectorAll("option");
+    var selectBox = item.parentElement.parentElement;
+    var selectBoxOptionItems = item.parentElement.childNodes;
+    var selectBoxLabel = selectBox.querySelector("span");
+    var selectedValueText = item.innerHTML.trim().replace(/\n /g, "");
+    selectBoxOptionItems.forEach(function (sibling) {
+        if (sibling !== item) {
+            setDataAttribute(sibling, "selected", "false");
+            setDataAttribute(select.querySelector('option[value="' + sibling.getAttribute("data-value") + '"]'), "selected", "false");
+        }
+        else {
+            setDataAttribute(sibling, "selected", "true");
+            setDataAttribute(select.querySelector('option[value="' + sibling.getAttribute("data-value") + '"]'), "selected", "true");
+        }
+    });
+    selectBoxLabel.innerHTML = selectedValueText;
+    toggleCustomDropdown(selectBox, selectBox.querySelector(".dropdown-select-options"));
+    selectBox.dispatchEvent(new Event("datachange"));
+    select.dispatchEvent(new Event("change"));
+};
+var setDataAttribute = function (element, dataAttr, value) {
+    if (element === null)
+        return;
+    element.setAttribute("data-" + dataAttr, value);
+};

package/dist/stories/atoms/forms/select/select.d.ts

@@ -0,0 +1,15 @@
+import './select.scss';
+interface SelectProps {
+    label?: string;
+    name?: string;
+    id?: string;
+    options?: any;
+    className?: string;
+    containerClassName?: string;
+    custom?: boolean;
+    icon?: any;
+    iconPosition?: string;
+    style?: any;
+}
+export declare const Select: ({ label, name, id, className, containerClassName, options, custom, icon, iconPosition, style }: SelectProps) => JSX.Element;
+export {};

package/dist/stories/atoms/forms/select/select.js

@@ -0,0 +1,37 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './select.scss';
+import { useEffect, useRef } from 'react';
+import { customDropdownInit } from './script';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronDown } from "@fortawesome/pro-solid-svg-icons";
+export var Select = function (_a) {
+    var label = _a.label, name = _a.name, id = _a.id, className = _a.className, containerClassName = _a.containerClassName, options = _a.options, custom = _a.custom, icon = _a.icon, iconPosition = _a.iconPosition, style = _a.style;
+    var selectRef = useRef(null);
+    var faIcon = icon ? icon : faChevronDown;
+    useEffect(function () {
+        if (custom) {
+            var select = selectRef.current;
+            customDropdownInit(select);
+        }
+    }, [custom]);
+    var customSelectProps = {
+        className: "dropdown-select-box folded icon-poistion-".concat(iconPosition),
+        tabIndex: 0
+    };
+    var styleClass = style ? "cmp-form__select__container--style-".concat(style) : '';
+    return (_jsxs("div", __assign({ className: "cmp-form__select__container ".concat(custom ? "cmp-form__select__container--custom-select" : "", " ").concat(containerClassName ? containerClassName : "", " ").concat(styleClass) }, { children: [label && _jsx("label", __assign({ htmlFor: id, className: 'cmp-form__label' }, { children: label })), _jsx("select", __assign({ className: "cmp-form__select ".concat(className ? className : ""), name: name, id: id, ref: selectRef }, { children: options && options.map(function (option, index) {
+                    return (_jsx("option", __assign({ value: option.value, "data-selected": index === 0 ? true : false }, { children: option.label }), index));
+                }) })), custom &&
+                _jsxs("div", __assign({ className: "custom-dropdown hidden" }, { children: [_jsxs("div", __assign({}, customSelectProps, { children: [_jsx(FontAwesomeIcon, { icon: faIcon }), _jsx("span", { "data-selected": "" })] })), _jsx("div", { className: "dropdown-select-options hidden" })] }))] })));
+};

package/dist/stories/atoms/forms/select/select.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select } from './select';
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Default: Story;
+export declare const Styled: Story;

package/dist/stories/atoms/forms/select/select.stories.js

@@ -0,0 +1,101 @@
+import { Select } from './select';
+var meta = {
+    title: 'Atoms/Form Elements/Select',
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: {
+        className: {
+            table: {
+                disable: true,
+            },
+        },
+        containerClassName: {
+            table: {
+                disable: true,
+            },
+        },
+        options: {
+            table: {
+                disable: true,
+            },
+        },
+        label: {
+            table: {
+                disable: true,
+            },
+        },
+        id: {
+            table: {
+                disable: true,
+            },
+        },
+        name: {
+            table: {
+                disable: true,
+            },
+        },
+        custom: {
+            control: { type: "boolean" },
+        },
+        iconPosition: {
+            options: ["left", "right"],
+            control: { type: "radio" },
+        },
+        style: {
+            options: ["default", "lite"],
+        }
+    }
+};
+export default meta;
+export var Default = {
+    name: 'Select Default',
+    args: {
+        className: 'cmp-form__select',
+        containerClassName: 'cmp-form__select__container',
+        options: [
+            { value: '', label: 'Select' },
+            { value: '1', label: 'Option 1' },
+            { value: '2', label: 'Option 2' },
+            { value: '3', label: 'Option 3' },
+            { value: '4', label: 'Option 4' },
+            { value: '5', label: 'Option 5' },
+            { value: '6', label: 'Option 6' }
+        ],
+        // label: 'Select',
+    },
+    parameters: {
+        controls: {
+            exclude: ['iconPosition', 'custom', 'icon']
+        }
+    }
+};
+export var Styled = {
+    name: 'Select Styled',
+    args: {
+        className: "cmp-form__select",
+        containerClassName: "cmp-form__select__container cmp-form__select__container--custom-select",
+        options: [
+            { value: '0', label: 'Select' },
+            { value: '1', label: 'Option 1' },
+            { value: '2', label: 'Option 2' },
+            { value: '3', label: 'Option 3' },
+            { value: '4', label: 'Option 4' },
+            { value: '5', label: 'Option 5' },
+            { value: '6', label: 'Option 6' }
+        ],
+        custom: true,
+        iconPosition: 'right',
+    },
+    argTypes: {
+        style: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    parameters: {
+        controls: {
+            exclude: ['icon']
+        }
+    }
+};

package/dist/stories/atoms/forms/text/counrties.json

@@ -0,0 +1,50 @@
+[
+    {
+        "name": "United States",
+        "telephoneCode": "+1",
+        "countryCode": "US",
+        "exampleNumber": "2015550123"
+    },
+    {
+        "name": "United Kingdom",
+        "telephoneCode": "+44",
+        "countryCode": "GB",
+        "exampleNumber": "07400123456"
+    },
+    {
+        "name": "France",
+        "telephoneCode": "+33",
+        "countryCode": "FR",
+        "exampleNumber": "0612345678"
+    },
+    {
+        "name": "Germany",
+        "telephoneCode": "+49",
+        "countryCode": "DE",
+        "exampleNumber": "015123456789"
+    },
+    {
+        "name": "Canada",
+        "telephoneCode": "+1",
+        "countryCode": "CA",
+        "exampleNumber": "2045550123"
+    },
+    {
+        "name": "Australia",
+        "telephoneCode": "+61",
+        "countryCode": "AU",
+        "exampleNumber": "0412345678"
+    },
+    {
+        "name": "India",
+        "telephoneCode": "+91",
+        "countryCode": "IN",
+        "exampleNumber": "08123456789"
+    },
+    {
+        "name": "Japan",
+        "telephoneCode": "+81",
+        "countryCode": "JP",
+        "exampleNumber": "09012345678"
+    }
+]

package/dist/stories/atoms/forms/text/counrty-selector.d.ts

@@ -0,0 +1,9 @@
+/**
+ *  A component to select a country from a list of countries
+ */
+import './counrty-selector.scss';
+interface CountrySelectorProps {
+    countries?: Array<any>;
+}
+export declare const CountrySelector: ({ countries }: CountrySelectorProps) => JSX.Element;
+export {};