zengenti-ps-components - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

lib/components/button/button.d.ts

@@ -1,9 +0,13 @@
-/// <reference types="react" />
-export interface ButtonProps {
-    primary?: boolean;
+import React from "react";
+interface ButtonProps {
+    className?: string;
+    type: "button" | "submit" | "reset";
+    isPrimary: boolean;
+    isDisabled: boolean;
+    label: string;
+    onClick: (e: React.MouseEvent<HTMLElement>) => void;
     backgroundColor?: string;
-    size?: "small" | "medium" | "large";
-    label: string;
-    onClick?: () => void;
+    textColor?: string;
 }
-export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => JSX.Element;
+export declare const Button: ({ className, type, isPrimary, isDisabled, label, onClick, backgroundColor, textColor, }: ButtonProps) => JSX.Element;
+export {};

lib/index.cjs.js

@@ -5,14 +5,230 @@ 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
+var reactHelmet = require('react-helmet');
 
-// Primary UI component for user interaction
-const Button = (_a) => {
-    var { primary = false, size = "medium", backgroundColor, label } = _a, props = tslib.__rest(_a, ["primary", "size", "backgroundColor", "label"]);
-    const mode = primary
-        ? "storybook-button--primary"
-        : "storybook-button--secondary";
-    return (jsxRuntime.jsx("button", Object.assign({ type: "button", className: ["storybook-button", `storybook-button--${size}`, mode].join(" "), style: { backgroundColor } }, props, { children: label }), void 0));
+const Button = ({ className, type = "button", isPrimary = true, isDisabled = false, label, onClick, backgroundColor, textColor, }) => {
+    const _handleClick = (e) => {
+        if (onClick && !isDisabled)
+            onClick(e);
+    };
+    return (jsxRuntime.jsx("button", Object.assign({ style: { backgroundColor, color: textColor }, type: type, className: [className, `btn ${isPrimary ? "primary" : "secondary"}`].join(" "), disabled: isDisabled, onClick: (e) => _handleClick(e) }, { children: label }), void 0));
 };
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = ".embedded-media {\n  position: relative;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  overflow: hidden;\n}\n.embedded-media__wrapper-iframe {\n  position: relative;\n  padding-bottom: 56.25%;\n  overflow: hidden;\n}\n.embedded-media__wrapper-image {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\niframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n";
+styleInject(css_248z$1);
+
+const EmbeddedMedia = ({ src, caption, width, height, title, allow, placeholderImage, imageAlt, className, }) => {
+    const [showIframe, setShowIframe] = react.useState(false);
+    const handleClick = () => setShowIframe(true);
+    return (jsxRuntime.jsxs("figure", Object.assign({ className: ["embedded-media", className].join(" ") }, { children: [showIframe ? (jsxRuntime.jsx("div", Object.assign({ className: "embedded-media__wrapper-iframe" }, { children: jsxRuntime.jsx("iframe", { src: src, width: width, height: height, title: title, allow: allow, frameBorder: "0" }, void 0) }), void 0)) : (jsxRuntime.jsxs("div", Object.assign({ className: "embedded-media__wrapper-image" }, { children: [jsxRuntime.jsxs("button", Object.assign({ onClick: handleClick, className: "embedded-media__play" }, { children: [jsxRuntime.jsx("span", Object.assign({ className: "embedded-media__play--text" }, { children: "Play video" }), void 0), jsxRuntime.jsx("i", { className: "embedded-media__play--text--icon" }, void 0)] }), void 0), jsxRuntime.jsx("img", { src: placeholderImage, alt: imageAlt, className: "embedded-media__placeholder" }, void 0)] }), void 0)), caption && jsxRuntime.jsx("figcaption", { children: caption }, void 0)] }), void 0));
+};
+
+const Close = () => {
+    return (jsxRuntime.jsx("path", { d: "M19 6.4L17.6 5L12 10.6L6.4 5L5 6.4L10.6 12L5 17.6L6.4 19L12 13.4L17.6 19L19 17.6L13.4 12L19 6.4Z" }, void 0));
+};
+
+const Collapse = () => {
+    return jsxRuntime.jsx("rect", { x: "5", y: "11", width: "14", height: "2" }, void 0);
+};
+
+const Email = () => {
+    return (jsxRuntime.jsx("path", { d: "M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 8L12 13L4 8V6L12 11L20 6V8Z" }, void 0));
+};
+
+const Expand = () => {
+    return jsxRuntime.jsx("path", { d: "M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" }, void 0);
+};
+
+const Information = () => {
+    return (jsxRuntime.jsx("path", { d: "M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z" }, void 0));
+};
+
+const Question = () => {
+    return (jsxRuntime.jsx("path", { d: "M0.877075 7.49972C0.877075 3.84204 3.84222 0.876892 7.49991 0.876892C11.1576 0.876892 14.1227 3.84204 14.1227 7.49972C14.1227 11.1574 11.1576 14.1226 7.49991 14.1226C3.84222 14.1226 0.877075 11.1574 0.877075 7.49972ZM7.49991 1.82689C4.36689 1.82689 1.82708 4.36671 1.82708 7.49972C1.82708 10.6327 4.36689 13.1726 7.49991 13.1726C10.6329 13.1726 13.1727 10.6327 13.1727 7.49972C13.1727 4.36671 10.6329 1.82689 7.49991 1.82689ZM8.24993 10.5C8.24993 10.9142 7.91414 11.25 7.49993 11.25C7.08571 11.25 6.74993 10.9142 6.74993 10.5C6.74993 10.0858 7.08571 9.75 7.49993 9.75C7.91414 9.75 8.24993 10.0858 8.24993 10.5ZM6.05003 6.25C6.05003 5.57211 6.63511 4.925 7.50003 4.925C8.36496 4.925 8.95003 5.57211 8.95003 6.25C8.95003 6.74118 8.68002 6.99212 8.21447 7.27494C8.16251 7.30651 8.10258 7.34131 8.03847 7.37854L8.03841 7.37858C7.85521 7.48497 7.63788 7.61119 7.47449 7.73849C7.23214 7.92732 6.95003 8.23198 6.95003 8.7C6.95004 9.00376 7.19628 9.25 7.50004 9.25C7.8024 9.25 8.04778 9.00601 8.05002 8.70417L8.05056 8.7033C8.05924 8.6896 8.08493 8.65735 8.15058 8.6062C8.25207 8.52712 8.36508 8.46163 8.51567 8.37436L8.51571 8.37433C8.59422 8.32883 8.68296 8.27741 8.78559 8.21506C9.32004 7.89038 10.05 7.35382 10.05 6.25C10.05 4.92789 8.93511 3.825 7.50003 3.825C6.06496 3.825 4.95003 4.92789 4.95003 6.25C4.95003 6.55376 5.19628 6.8 5.50003 6.8C5.80379 6.8 6.05003 6.55376 6.05003 6.25Z" }, void 0));
+};
+
+const Warning = () => {
+    return (jsxRuntime.jsx("path", { d: "M8.4449 0.608765C8.0183 -0.107015 6.9817 -0.107015 6.55509 0.608766L0.161178 11.3368C-0.275824 12.07 0.252503 13 1.10608 13H13.8939C14.7475 13 15.2758 12.07 14.8388 11.3368L8.4449 0.608765ZM7.4141 1.12073C7.45288 1.05566 7.54712 1.05566 7.5859 1.12073L13.9798 11.8488C14.0196 11.9154 13.9715 12 13.8939 12H1.10608C1.02849 12 0.980454 11.9154 1.02018 11.8488L7.4141 1.12073ZM6.8269 4.48611C6.81221 4.10423 7.11783 3.78663 7.5 3.78663C7.88217 3.78663 8.18778 4.10423 8.1731 4.48612L8.01921 8.48701C8.00848 8.766 7.7792 8.98664 7.5 8.98664C7.2208 8.98664 6.99151 8.766 6.98078 8.48701L6.8269 4.48611ZM8.24989 10.476C8.24989 10.8902 7.9141 11.226 7.49989 11.226C7.08567 11.226 6.74989 10.8902 6.74989 10.476C6.74989 10.0618 7.08567 9.72599 7.49989 9.72599C7.9141 9.72599 8.24989 10.0618 8.24989 10.476Z" }, void 0));
+};
+
+const Facebook = () => {
+    return (jsxRuntime.jsx("path", { d: "M17 2V6H15C14.3 6 14 6.8 14 7.5V10H17V14H14V22H10V14H7V10H10V6C10 4.93913 10.4214 3.92172 11.1716 3.17157C11.9217 2.42143 12.9391 2 14 2H17Z" }, void 0));
+};
+
+const FacebookRev = () => {
+    return (jsxRuntime.jsx("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }, void 0));
+};
+
+const Instagram = () => {
+    return (jsxRuntime.jsx("path", { d: "M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" }, void 0));
+};
+
+const Linkedin = () => {
+    return (jsxRuntime.jsx("path", { d: "M21 21H17V14.25C17 13.19 15.8 12.31 14.75 12.31C13.7 12.31 13 13.2 13 14.25V21H9V9H13V11C13.66 9.93 15.36 9.24 16.5 9.24C17.6944 9.24265 18.839 9.71898 19.6826 10.5645C20.5262 11.41 21 12.5556 21 13.75V21ZM7 21H3V9H7V21ZM5 3C5.53043 3 6.03914 3.21071 6.41421 3.58579C6.78929 3.96086 7 4.46957 7 5C7 5.53043 6.78929 6.03914 6.41421 6.41421C6.03914 6.78929 5.53043 7 5 7C4.46957 7 3.96086 6.78929 3.58579 6.41421C3.21071 6.03914 3 5.53043 3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3Z" }, void 0));
+};
+
+const LinkedinRev = () => {
+    return (jsxRuntime.jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }, void 0));
+};
+
+const Tiktok = () => {
+    return (jsxRuntime.jsx("path", { d: "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" }, void 0));
+};
+
+const Twitter = () => {
+    return (jsxRuntime.jsx("path", { d: "M22.46 6C21.69 6.35 20.86 6.58 20 6.7C20.8949 6.16134 21.5632 5.31534 21.88 4.32C21.0394 4.82156 20.1196 5.17661 19.16 5.37C18.37 4.5 17.26 4 16 4C13.65 4 11.73 5.92 11.73 8.3C11.7303 8.62973 11.7672 8.9584 11.84 9.28C8.28 9.1 5.1 7.38 3 4.8C2.63 5.43 2.42 6.17 2.42 6.95C2.42 8.45 3.17 9.75 4.32 10.51C3.62 10.51 2.95 10.31 2.37 10.01V10.04C2.37 12.12 3.85 13.86 5.81 14.24C5.44185 14.3409 5.06172 14.3913 4.68 14.39C4.41 14.39 4.14 14.36 3.88 14.31C4.15161 15.1625 4.68354 15.9084 5.40102 16.4429C6.11849 16.9775 6.98545 17.2737 7.88 17.29C6.42 18.45 4.58 19.13 2.55 19.13C2.21 19.13 1.87 19.11 1.53 19.07C3.44 20.3 5.7 21 8.12 21C16 21 20.32 14.46 20.32 8.8C20.32 8.6 20.32 8.43 20.31 8.24C21.15 7.64 21.87 6.88 22.45 6.01L22.46 6Z" }, void 0));
+};
+
+const YouTube = () => {
+    return (jsxRuntime.jsx("path", { d: "M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z" }, void 0));
+};
+
+const iconDictionary = {
+    close: jsxRuntime.jsx(Close, {}, void 0),
+    collapse: jsxRuntime.jsx(Collapse, {}, void 0),
+    email: jsxRuntime.jsx(Email, {}, void 0),
+    expand: jsxRuntime.jsx(Expand, {}, void 0),
+    facebook: jsxRuntime.jsx(Facebook, {}, void 0),
+    facebookRev: jsxRuntime.jsx(FacebookRev, {}, void 0),
+    information: jsxRuntime.jsx(Information, {}, void 0),
+    instagram: jsxRuntime.jsx(Instagram, {}, void 0),
+    linkedin: jsxRuntime.jsx(Linkedin, {}, void 0),
+    linkedinRev: jsxRuntime.jsx(LinkedinRev, {}, void 0),
+    question: jsxRuntime.jsx(Question, {}, void 0),
+    tiktok: jsxRuntime.jsx(Tiktok, {}, void 0),
+    twitter: jsxRuntime.jsx(Twitter, {}, void 0),
+    warning: jsxRuntime.jsx(Warning, {}, void 0),
+    youtube: jsxRuntime.jsx(YouTube, {}, void 0),
+};
+const Icon = (_a) => {
+    var { fill, width, height, viewBox, type } = _a, props = tslib.__rest(_a, ["fill", "width", "height", "viewBox", "type"]);
+    if (!type || !iconDictionary[type])
+        return null;
+    return (jsxRuntime.jsx("svg", Object.assign({ role: "img", width: width, height: height, viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", className: `icon--${type}`, fill: fill }, props, { children: iconDictionary[type] }), void 0));
+};
+
+const AccordionItem = ({ className, title, content, idx = 1, pOpen, _handleToggle, }) => {
+    const [isOpen, setIsOpen] = react.useState(pOpen);
+    const _handleClick = () => {
+        if (pOpen === undefined)
+            setIsOpen(!isOpen);
+        else if (_handleToggle)
+            _handleToggle(idx);
+    };
+    react.useEffect(() => {
+        setIsOpen(pOpen);
+    }, [pOpen]);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: ["accordion-item", className].join(" ") }, { children: [jsxRuntime.jsxs("button", Object.assign({ type: "button", onClick: () => _handleClick(), "aria-expanded": isOpen ? true : false, className: "accordion-item__btn" }, { children: [title, jsxRuntime.jsx(Icon, { type: isOpen ? "collapse" : "expand", height: 24, width: 24, viewBox: "0 0 24 24" }, void 0)] }), void 0), isOpen && (jsxRuntime.jsx("div", { className: "accordion-item__content", dangerouslySetInnerHTML: { __html: content } }, void 0))] }), void 0));
+};
+
+const Accordion = ({ className, items, title }) => {
+    const [isAllOpen, setIsAllOpen] = react.useState(false);
+    const [wrapperAccordions, setWrapperAccordions] = react.useState();
+    const btnText = isAllOpen ? "Close all" : "Open all";
+    react.useEffect(() => {
+        setWrapperAccordions(items.map((item) => {
+            return Object.assign(Object.assign({}, item), { isOpen: false });
+        }));
+    }, [items]);
+    const _handleToggleAll = () => {
+        const toggledState = !isAllOpen;
+        setWrapperAccordions(wrapperAccordions &&
+            wrapperAccordions.map((item) => {
+                return Object.assign(Object.assign({}, item), { isOpen: toggledState });
+            }));
+        setIsAllOpen(toggledState);
+    };
+    const _handleToggle = (indexIn) => {
+        setWrapperAccordions(wrapperAccordions &&
+            wrapperAccordions.map((item, index) => {
+                if (indexIn === index) {
+                    return Object.assign(Object.assign({}, item), { isOpen: !item.isOpen });
+                }
+                else {
+                    return item;
+                }
+            }));
+    };
+    react.useEffect(() => {
+        if (wrapperAccordions) {
+            setIsAllOpen(wrapperAccordions.every((item) => item.isOpen === true));
+        }
+    }, [wrapperAccordions]);
+    if (!items || items.length < 1)
+        return null;
+    return (jsxRuntime.jsxs("div", Object.assign({ className: ["accordion__wrapper", className].join(" ") }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: "accordion__header" }, { children: [title && jsxRuntime.jsx("h2", Object.assign({ className: "accordion__header-title" }, { children: title }), void 0), jsxRuntime.jsx("button", Object.assign({ className: "accordion__header-btn", type: "button", onClick: () => _handleToggleAll() }, { children: btnText }), void 0)] }), void 0), wrapperAccordions &&
+                wrapperAccordions.map((item, idx) => {
+                    return (jsxRuntime.jsx(AccordionItem, { title: item.title, content: item.content, pOpen: item.isOpen, _handleToggle: _handleToggle, idx: idx }, idx));
+                })] }), void 0));
+};
+
+const Alert = ({ className, type = "high", text, iconColor = "#000", backgroundColor, iconBackgroundColor, }) => {
+    const [isClosed, setIsClosed] = react.useState(false);
+    const _handleClose = () => setIsClosed(true);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isClosed && (jsxRuntime.jsxs("div", Object.assign({ className: [className, `alert alert-${type}`].join(" "), style: { backgroundColor } }, { children: [jsxRuntime.jsx("div", Object.assign({ className: "alert-icon__wrapper", style: { backgroundColor: iconBackgroundColor } }, { children: jsxRuntime.jsx(Icon, { height: 24, width: 24, viewBox: "0 0 15 15", fill: iconColor, type: type === "low"
+                            ? "information"
+                            : type === "medium"
+                                ? "question"
+                                : "warning" }, void 0) }), void 0), jsxRuntime.jsx("p", Object.assign({ className: "alert-text" }, { children: text }), void 0), jsxRuntime.jsxs("button", Object.assign({ type: "button", className: "alert-btn--close", onClick: () => _handleClose() }, { children: [jsxRuntime.jsx("span", Object.assign({ className: "sr-only" }, { children: "Close" }), void 0), jsxRuntime.jsx(Icon, { type: "close", viewBox: "0 0 24 24", height: 16, width: 16 }, void 0)] }), void 0)] }), void 0)) }, void 0));
+};
+
+function Meta({ title, description, siteName, path, image }) {
+    return (jsxRuntime.jsxs(reactHelmet.Helmet, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("meta", { name: "description", content: description }, void 0), siteName && jsxRuntime.jsx("meta", { name: "og:site_name", content: siteName }, void 0), jsxRuntime.jsx("meta", { name: "og:title", content: title }, void 0), description && jsxRuntime.jsx("meta", { name: "og:description", content: description }, void 0), jsxRuntime.jsx("meta", { name: "og:url", content: path }, void 0), jsxRuntime.jsx("meta", { name: "og:image", content: image }, void 0), jsxRuntime.jsx("meta", { name: "og:type", content: "website" }, void 0), jsxRuntime.jsx("meta", { name: "twitter:card", content: "summary" }, void 0), siteName && jsxRuntime.jsx("meta", { name: "twitter:site", content: siteName }, void 0), siteName && jsxRuntime.jsx("meta", { name: "twitter:creator", content: siteName }, void 0), jsxRuntime.jsx("meta", { name: "twitter:title", content: title }, void 0), description && jsxRuntime.jsx("meta", { name: "twitter:description", content: description }, void 0), jsxRuntime.jsx("meta", { name: "twitter:url", content: path }, void 0), jsxRuntime.jsx("meta", { name: "twitter:image", content: image }, void 0)] }, void 0));
+}
+
+function BlockQuote({ cite, citeUrl, quote, className, }) {
+    if (!quote)
+        return null;
+    return (jsxRuntime.jsxs("figure", Object.assign({ className: [className, "block-quote"].join(" ") }, { children: [jsxRuntime.jsx("blockquote", Object.assign({ cite: citeUrl, className: "block-quote_text" }, { children: quote }), void 0), cite && (jsxRuntime.jsx("figcaption", Object.assign({ className: "block-quote--cite_wrapper" }, { children: jsxRuntime.jsx("cite", Object.assign({ className: "block-quote--cite_text" }, { children: cite }), void 0) }), void 0))] }), void 0));
+}
+
+var css_248z = ".breadcrumbs__list {\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n}\n";
+styleInject(css_248z);
+
+function Breadcrumbs({ nodes, separator = ">" }) {
+    if (!nodes || !nodes.length)
+        return null;
+    return (jsxRuntime.jsx("div", Object.assign({ className: "breadcrumbs" }, { children: jsxRuntime.jsx("ol", Object.assign({ className: "breadcrumbs__list" }, { children: nodes.map((node, index) => {
+                const currentNode = node.isCurrent ? "current" : "";
+                return (jsxRuntime.jsxs(react.Fragment, { children: [separator && index !== 0 && (jsxRuntime.jsx("span", Object.assign({ className: "breadcrumbs__list-separator", "aria-hidden": "true" }, { children: separator }), void 0)), jsxRuntime.jsx("li", Object.assign({ className: ["breadcrumbs__list-item", currentNode].join(" ") }, { children: jsxRuntime.jsx("a", Object.assign({ className: "breadcrumbs__link", href: node.uri }, { children: node.displayName }), void 0) }), void 0)] }, node.id));
+            }) }), void 0) }), void 0));
+}
+
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;
+exports.Alert = Alert;
+exports.BlockQuote = BlockQuote;
+exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
+exports.EmbeddedMedia = EmbeddedMedia;
+exports.Icon = Icon;
+exports.Meta = Meta;

lib/index.d.ts

 export * from "./components/button";
+export * from "./components/embeddedMedia";
+export * from "./components/accordion";
+export * from "./components/alert";
+export * from "./components/icon";
+export * from "./components/meta";
+export * from "./components/blockQuote";
+export * from "./components/breadcrumbs";

lib/index.esm.js

@@ -0,13 +1,221 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, Fragment as Fragment$1 } from 'react';
 import { __rest } from 'tslib';
-import { jsx } from 'react/jsx-runtime';
+import { Helmet } from 'react-helmet';
 
-// Primary UI component for user interaction
-const Button = (_a) => {
-    var { primary = false, size = "medium", backgroundColor, label } = _a, props = __rest(_a, ["primary", "size", "backgroundColor", "label"]);
-    const mode = primary
-        ? "storybook-button--primary"
-        : "storybook-button--secondary";
-    return (jsx("button", Object.assign({ type: "button", className: ["storybook-button", `storybook-button--${size}`, mode].join(" "), style: { backgroundColor } }, props, { children: label }), void 0));
+const Button = ({ className, type = "button", isPrimary = true, isDisabled = false, label, onClick, backgroundColor, textColor, }) => {
+    const _handleClick = (e) => {
+        if (onClick && !isDisabled)
+            onClick(e);
+    };
+    return (jsx("button", Object.assign({ style: { backgroundColor, color: textColor }, type: type, className: [className, `btn ${isPrimary ? "primary" : "secondary"}`].join(" "), disabled: isDisabled, onClick: (e) => _handleClick(e) }, { children: label }), void 0));
 };
 
-export { Button };
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = ".embedded-media {\n  position: relative;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  overflow: hidden;\n}\n.embedded-media__wrapper-iframe {\n  position: relative;\n  padding-bottom: 56.25%;\n  overflow: hidden;\n}\n.embedded-media__wrapper-image {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\niframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n";
+styleInject(css_248z$1);
+
+const EmbeddedMedia = ({ src, caption, width, height, title, allow, placeholderImage, imageAlt, className, }) => {
+    const [showIframe, setShowIframe] = useState(false);
+    const handleClick = () => setShowIframe(true);
+    return (jsxs("figure", Object.assign({ className: ["embedded-media", className].join(" ") }, { children: [showIframe ? (jsx("div", Object.assign({ className: "embedded-media__wrapper-iframe" }, { children: jsx("iframe", { src: src, width: width, height: height, title: title, allow: allow, frameBorder: "0" }, void 0) }), void 0)) : (jsxs("div", Object.assign({ className: "embedded-media__wrapper-image" }, { children: [jsxs("button", Object.assign({ onClick: handleClick, className: "embedded-media__play" }, { children: [jsx("span", Object.assign({ className: "embedded-media__play--text" }, { children: "Play video" }), void 0), jsx("i", { className: "embedded-media__play--text--icon" }, void 0)] }), void 0), jsx("img", { src: placeholderImage, alt: imageAlt, className: "embedded-media__placeholder" }, void 0)] }), void 0)), caption && jsx("figcaption", { children: caption }, void 0)] }), void 0));
+};
+
+const Close = () => {
+    return (jsx("path", { d: "M19 6.4L17.6 5L12 10.6L6.4 5L5 6.4L10.6 12L5 17.6L6.4 19L12 13.4L17.6 19L19 17.6L13.4 12L19 6.4Z" }, void 0));
+};
+
+const Collapse = () => {
+    return jsx("rect", { x: "5", y: "11", width: "14", height: "2" }, void 0);
+};
+
+const Email = () => {
+    return (jsx("path", { d: "M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 8L12 13L4 8V6L12 11L20 6V8Z" }, void 0));
+};
+
+const Expand = () => {
+    return jsx("path", { d: "M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" }, void 0);
+};
+
+const Information = () => {
+    return (jsx("path", { d: "M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z" }, void 0));
+};
+
+const Question = () => {
+    return (jsx("path", { d: "M0.877075 7.49972C0.877075 3.84204 3.84222 0.876892 7.49991 0.876892C11.1576 0.876892 14.1227 3.84204 14.1227 7.49972C14.1227 11.1574 11.1576 14.1226 7.49991 14.1226C3.84222 14.1226 0.877075 11.1574 0.877075 7.49972ZM7.49991 1.82689C4.36689 1.82689 1.82708 4.36671 1.82708 7.49972C1.82708 10.6327 4.36689 13.1726 7.49991 13.1726C10.6329 13.1726 13.1727 10.6327 13.1727 7.49972C13.1727 4.36671 10.6329 1.82689 7.49991 1.82689ZM8.24993 10.5C8.24993 10.9142 7.91414 11.25 7.49993 11.25C7.08571 11.25 6.74993 10.9142 6.74993 10.5C6.74993 10.0858 7.08571 9.75 7.49993 9.75C7.91414 9.75 8.24993 10.0858 8.24993 10.5ZM6.05003 6.25C6.05003 5.57211 6.63511 4.925 7.50003 4.925C8.36496 4.925 8.95003 5.57211 8.95003 6.25C8.95003 6.74118 8.68002 6.99212 8.21447 7.27494C8.16251 7.30651 8.10258 7.34131 8.03847 7.37854L8.03841 7.37858C7.85521 7.48497 7.63788 7.61119 7.47449 7.73849C7.23214 7.92732 6.95003 8.23198 6.95003 8.7C6.95004 9.00376 7.19628 9.25 7.50004 9.25C7.8024 9.25 8.04778 9.00601 8.05002 8.70417L8.05056 8.7033C8.05924 8.6896 8.08493 8.65735 8.15058 8.6062C8.25207 8.52712 8.36508 8.46163 8.51567 8.37436L8.51571 8.37433C8.59422 8.32883 8.68296 8.27741 8.78559 8.21506C9.32004 7.89038 10.05 7.35382 10.05 6.25C10.05 4.92789 8.93511 3.825 7.50003 3.825C6.06496 3.825 4.95003 4.92789 4.95003 6.25C4.95003 6.55376 5.19628 6.8 5.50003 6.8C5.80379 6.8 6.05003 6.55376 6.05003 6.25Z" }, void 0));
+};
+
+const Warning = () => {
+    return (jsx("path", { d: "M8.4449 0.608765C8.0183 -0.107015 6.9817 -0.107015 6.55509 0.608766L0.161178 11.3368C-0.275824 12.07 0.252503 13 1.10608 13H13.8939C14.7475 13 15.2758 12.07 14.8388 11.3368L8.4449 0.608765ZM7.4141 1.12073C7.45288 1.05566 7.54712 1.05566 7.5859 1.12073L13.9798 11.8488C14.0196 11.9154 13.9715 12 13.8939 12H1.10608C1.02849 12 0.980454 11.9154 1.02018 11.8488L7.4141 1.12073ZM6.8269 4.48611C6.81221 4.10423 7.11783 3.78663 7.5 3.78663C7.88217 3.78663 8.18778 4.10423 8.1731 4.48612L8.01921 8.48701C8.00848 8.766 7.7792 8.98664 7.5 8.98664C7.2208 8.98664 6.99151 8.766 6.98078 8.48701L6.8269 4.48611ZM8.24989 10.476C8.24989 10.8902 7.9141 11.226 7.49989 11.226C7.08567 11.226 6.74989 10.8902 6.74989 10.476C6.74989 10.0618 7.08567 9.72599 7.49989 9.72599C7.9141 9.72599 8.24989 10.0618 8.24989 10.476Z" }, void 0));
+};
+
+const Facebook = () => {
+    return (jsx("path", { d: "M17 2V6H15C14.3 6 14 6.8 14 7.5V10H17V14H14V22H10V14H7V10H10V6C10 4.93913 10.4214 3.92172 11.1716 3.17157C11.9217 2.42143 12.9391 2 14 2H17Z" }, void 0));
+};
+
+const FacebookRev = () => {
+    return (jsx("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }, void 0));
+};
+
+const Instagram = () => {
+    return (jsx("path", { d: "M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" }, void 0));
+};
+
+const Linkedin = () => {
+    return (jsx("path", { d: "M21 21H17V14.25C17 13.19 15.8 12.31 14.75 12.31C13.7 12.31 13 13.2 13 14.25V21H9V9H13V11C13.66 9.93 15.36 9.24 16.5 9.24C17.6944 9.24265 18.839 9.71898 19.6826 10.5645C20.5262 11.41 21 12.5556 21 13.75V21ZM7 21H3V9H7V21ZM5 3C5.53043 3 6.03914 3.21071 6.41421 3.58579C6.78929 3.96086 7 4.46957 7 5C7 5.53043 6.78929 6.03914 6.41421 6.41421C6.03914 6.78929 5.53043 7 5 7C4.46957 7 3.96086 6.78929 3.58579 6.41421C3.21071 6.03914 3 5.53043 3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3Z" }, void 0));
+};
+
+const LinkedinRev = () => {
+    return (jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }, void 0));
+};
+
+const Tiktok = () => {
+    return (jsx("path", { d: "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" }, void 0));
+};
+
+const Twitter = () => {
+    return (jsx("path", { d: "M22.46 6C21.69 6.35 20.86 6.58 20 6.7C20.8949 6.16134 21.5632 5.31534 21.88 4.32C21.0394 4.82156 20.1196 5.17661 19.16 5.37C18.37 4.5 17.26 4 16 4C13.65 4 11.73 5.92 11.73 8.3C11.7303 8.62973 11.7672 8.9584 11.84 9.28C8.28 9.1 5.1 7.38 3 4.8C2.63 5.43 2.42 6.17 2.42 6.95C2.42 8.45 3.17 9.75 4.32 10.51C3.62 10.51 2.95 10.31 2.37 10.01V10.04C2.37 12.12 3.85 13.86 5.81 14.24C5.44185 14.3409 5.06172 14.3913 4.68 14.39C4.41 14.39 4.14 14.36 3.88 14.31C4.15161 15.1625 4.68354 15.9084 5.40102 16.4429C6.11849 16.9775 6.98545 17.2737 7.88 17.29C6.42 18.45 4.58 19.13 2.55 19.13C2.21 19.13 1.87 19.11 1.53 19.07C3.44 20.3 5.7 21 8.12 21C16 21 20.32 14.46 20.32 8.8C20.32 8.6 20.32 8.43 20.31 8.24C21.15 7.64 21.87 6.88 22.45 6.01L22.46 6Z" }, void 0));
+};
+
+const YouTube = () => {
+    return (jsx("path", { d: "M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z" }, void 0));
+};
+
+const iconDictionary = {
+    close: jsx(Close, {}, void 0),
+    collapse: jsx(Collapse, {}, void 0),
+    email: jsx(Email, {}, void 0),
+    expand: jsx(Expand, {}, void 0),
+    facebook: jsx(Facebook, {}, void 0),
+    facebookRev: jsx(FacebookRev, {}, void 0),
+    information: jsx(Information, {}, void 0),
+    instagram: jsx(Instagram, {}, void 0),
+    linkedin: jsx(Linkedin, {}, void 0),
+    linkedinRev: jsx(LinkedinRev, {}, void 0),
+    question: jsx(Question, {}, void 0),
+    tiktok: jsx(Tiktok, {}, void 0),
+    twitter: jsx(Twitter, {}, void 0),
+    warning: jsx(Warning, {}, void 0),
+    youtube: jsx(YouTube, {}, void 0),
+};
+const Icon = (_a) => {
+    var { fill, width, height, viewBox, type } = _a, props = __rest(_a, ["fill", "width", "height", "viewBox", "type"]);
+    if (!type || !iconDictionary[type])
+        return null;
+    return (jsx("svg", Object.assign({ role: "img", width: width, height: height, viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", className: `icon--${type}`, fill: fill }, props, { children: iconDictionary[type] }), void 0));
+};
+
+const AccordionItem = ({ className, title, content, idx = 1, pOpen, _handleToggle, }) => {
+    const [isOpen, setIsOpen] = useState(pOpen);
+    const _handleClick = () => {
+        if (pOpen === undefined)
+            setIsOpen(!isOpen);
+        else if (_handleToggle)
+            _handleToggle(idx);
+    };
+    useEffect(() => {
+        setIsOpen(pOpen);
+    }, [pOpen]);
+    return (jsxs("div", Object.assign({ className: ["accordion-item", className].join(" ") }, { children: [jsxs("button", Object.assign({ type: "button", onClick: () => _handleClick(), "aria-expanded": isOpen ? true : false, className: "accordion-item__btn" }, { children: [title, jsx(Icon, { type: isOpen ? "collapse" : "expand", height: 24, width: 24, viewBox: "0 0 24 24" }, void 0)] }), void 0), isOpen && (jsx("div", { className: "accordion-item__content", dangerouslySetInnerHTML: { __html: content } }, void 0))] }), void 0));
+};
+
+const Accordion = ({ className, items, title }) => {
+    const [isAllOpen, setIsAllOpen] = useState(false);
+    const [wrapperAccordions, setWrapperAccordions] = useState();
+    const btnText = isAllOpen ? "Close all" : "Open all";
+    useEffect(() => {
+        setWrapperAccordions(items.map((item) => {
+            return Object.assign(Object.assign({}, item), { isOpen: false });
+        }));
+    }, [items]);
+    const _handleToggleAll = () => {
+        const toggledState = !isAllOpen;
+        setWrapperAccordions(wrapperAccordions &&
+            wrapperAccordions.map((item) => {
+                return Object.assign(Object.assign({}, item), { isOpen: toggledState });
+            }));
+        setIsAllOpen(toggledState);
+    };
+    const _handleToggle = (indexIn) => {
+        setWrapperAccordions(wrapperAccordions &&
+            wrapperAccordions.map((item, index) => {
+                if (indexIn === index) {
+                    return Object.assign(Object.assign({}, item), { isOpen: !item.isOpen });
+                }
+                else {
+                    return item;
+                }
+            }));
+    };
+    useEffect(() => {
+        if (wrapperAccordions) {
+            setIsAllOpen(wrapperAccordions.every((item) => item.isOpen === true));
+        }
+    }, [wrapperAccordions]);
+    if (!items || items.length < 1)
+        return null;
+    return (jsxs("div", Object.assign({ className: ["accordion__wrapper", className].join(" ") }, { children: [jsxs("div", Object.assign({ className: "accordion__header" }, { children: [title && jsx("h2", Object.assign({ className: "accordion__header-title" }, { children: title }), void 0), jsx("button", Object.assign({ className: "accordion__header-btn", type: "button", onClick: () => _handleToggleAll() }, { children: btnText }), void 0)] }), void 0), wrapperAccordions &&
+                wrapperAccordions.map((item, idx) => {
+                    return (jsx(AccordionItem, { title: item.title, content: item.content, pOpen: item.isOpen, _handleToggle: _handleToggle, idx: idx }, idx));
+                })] }), void 0));
+};
+
+const Alert = ({ className, type = "high", text, iconColor = "#000", backgroundColor, iconBackgroundColor, }) => {
+    const [isClosed, setIsClosed] = useState(false);
+    const _handleClose = () => setIsClosed(true);
+    return (jsx(Fragment, { children: !isClosed && (jsxs("div", Object.assign({ className: [className, `alert alert-${type}`].join(" "), style: { backgroundColor } }, { children: [jsx("div", Object.assign({ className: "alert-icon__wrapper", style: { backgroundColor: iconBackgroundColor } }, { children: jsx(Icon, { height: 24, width: 24, viewBox: "0 0 15 15", fill: iconColor, type: type === "low"
+                            ? "information"
+                            : type === "medium"
+                                ? "question"
+                                : "warning" }, void 0) }), void 0), jsx("p", Object.assign({ className: "alert-text" }, { children: text }), void 0), jsxs("button", Object.assign({ type: "button", className: "alert-btn--close", onClick: () => _handleClose() }, { children: [jsx("span", Object.assign({ className: "sr-only" }, { children: "Close" }), void 0), jsx(Icon, { type: "close", viewBox: "0 0 24 24", height: 16, width: 16 }, void 0)] }), void 0)] }), void 0)) }, void 0));
+};
+
+function Meta({ title, description, siteName, path, image }) {
+    return (jsxs(Helmet, { children: [jsx("title", { children: title }, void 0), jsx("meta", { name: "description", content: description }, void 0), siteName && jsx("meta", { name: "og:site_name", content: siteName }, void 0), jsx("meta", { name: "og:title", content: title }, void 0), description && jsx("meta", { name: "og:description", content: description }, void 0), jsx("meta", { name: "og:url", content: path }, void 0), jsx("meta", { name: "og:image", content: image }, void 0), jsx("meta", { name: "og:type", content: "website" }, void 0), jsx("meta", { name: "twitter:card", content: "summary" }, void 0), siteName && jsx("meta", { name: "twitter:site", content: siteName }, void 0), siteName && jsx("meta", { name: "twitter:creator", content: siteName }, void 0), jsx("meta", { name: "twitter:title", content: title }, void 0), description && jsx("meta", { name: "twitter:description", content: description }, void 0), jsx("meta", { name: "twitter:url", content: path }, void 0), jsx("meta", { name: "twitter:image", content: image }, void 0)] }, void 0));
+}
+
+function BlockQuote({ cite, citeUrl, quote, className, }) {
+    if (!quote)
+        return null;
+    return (jsxs("figure", Object.assign({ className: [className, "block-quote"].join(" ") }, { children: [jsx("blockquote", Object.assign({ cite: citeUrl, className: "block-quote_text" }, { children: quote }), void 0), cite && (jsx("figcaption", Object.assign({ className: "block-quote--cite_wrapper" }, { children: jsx("cite", Object.assign({ className: "block-quote--cite_text" }, { children: cite }), void 0) }), void 0))] }), void 0));
+}
+
+var css_248z = ".breadcrumbs__list {\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n}\n";
+styleInject(css_248z);
+
+function Breadcrumbs({ nodes, separator = ">" }) {
+    if (!nodes || !nodes.length)
+        return null;
+    return (jsx("div", Object.assign({ className: "breadcrumbs" }, { children: jsx("ol", Object.assign({ className: "breadcrumbs__list" }, { children: nodes.map((node, index) => {
+                const currentNode = node.isCurrent ? "current" : "";
+                return (jsxs(Fragment$1, { children: [separator && index !== 0 && (jsx("span", Object.assign({ className: "breadcrumbs__list-separator", "aria-hidden": "true" }, { children: separator }), void 0)), jsx("li", Object.assign({ className: ["breadcrumbs__list-item", currentNode].join(" ") }, { children: jsx("a", Object.assign({ className: "breadcrumbs__link", href: node.uri }, { children: node.displayName }), void 0) }), void 0)] }, node.id));
+            }) }), void 0) }), void 0));
+}
+
+export { Accordion, AccordionItem, Alert, BlockQuote, Breadcrumbs, Button, EmbeddedMedia, Icon, Meta };

package.json

 {
   "name": "zengenti-ps-components",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
@@ -15,4 +15,4 @@ "main": "lib/index.cjs.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "start-storybook -s public -p 6006",
+    "build-storybook": "build-storybook -s public"
   },
@@ -35,11 +35,13 @@ "repository": {
     "@rollup/plugin-typescript": "^8.3.0",
+    "@storybook/addon-a11y": "^6.3.12",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/react": "^6.3.12",
     "@types/react": "^17.0.34",
+    "@types/react-helmet": "^6.1.4",
     "babel-loader": "^8.2.3",
     "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",
+    "postcss": "^8.3.11",
     "react": "^17.0.2",
@@ -49,2 +51,3 @@ "react-dom": "^17.0.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.1",
     "tslib": "^2.3.1",
@@ -57,3 +60,5 @@ "typescript": "^4.4.4"
   },
-  "dependencies": {}
+  "dependencies": {
+    "react-helmet": "^6.1.0"
+  }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49077

increased by1062.14%

Number of package files

36

increased by414.29%

Lines of code

619

increased by1306.82%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

22

increased by15.79%

Number of low supply chain risk alerts

4

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-helmet@^6.1.0

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-fast-compare@3.2.2(transitive)

• + Addedreact-helmet@6.1.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedreact-side-effect@2.1.2(transitive)