@ilo-org/react 0.10.6 → 0.12.0

package/lib/cjs/components/Tabs/Tabs.args.js

@@ -0,0 +1,156 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var components_RichText_RichText = require('../RichText/RichText.js');
+var components_Image_Image = require('../Image/Image.js');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-10114bdd.js');
+require('../Credit/Credit.js');
+
+const tabs = {
+    items: [
+        {
+            label: "Tab Label With A Really Really Lenghty Title Even Though We Do Not Recommend Such A Lengthy Title",
+            content: (jsxRuntime.jsx(components_Image_Image, { alt: "My alt text", caption: "Women construction workers in Nepal build roads and bridges as part of a National Rural Transport Programme co-sponsored by the ILO.", credit: "\u00A9 Marcel Crozet/ILO", url: [
+                    { breakpoint: 0, src: "/small.jpg" },
+                    { breakpoint: 800, src: "/medium.jpg" },
+                    { breakpoint: 1200, src: "/large.jpg" },
+                    { breakpoint: 1440, src: "/large.jpg" },
+                ] })),
+        },
+        {
+            label: "Tab Label 2",
+            content: (jsxRuntime.jsx(components_RichText_RichText, { content: "<h2>International Labour Organization</h2> <p>The <b>International Labour Organization</b> (<b>ILO</b>) is a <a href='https://www.un.org'>United Nations</a> agency whose mandate is to advance social and economic justice by setting international labour standards. Founded in October 1919 under the League of Nations, it is the first and oldest specialised agency of the UN. The ILO has 187 member states: 186 out of 193 UN member states plus the Cook Islands.</p> <p>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</p> <figure><img alt='placeholder image' class='right' src='/ilo-headquarters.jpg'><figcaption>The ILO's headquarters in Geneva, Switzerland. \u00A9Steiner SA</figcaption></figure> <h3>ILO Constitution</h3> <p>The driving forces for the ILO's creation arose from security, humanitarian, political and economic considerations.</p> <blockquote> <p>The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind.</p> <cite>ILO Director-General Gilbert F. Houngbo</cite> </blockquote> Reflecting these ideas, the Preamble of the ILO Constitution states:</p> <ol> <li>Whereas universal and lasting peace can be established only if it is based upon social justice;</li> <li>And whereas conditions of labour exist involving such injustice, hardship and privation to large numbers of people as to produce unrest so great that the peace and harmony of the world are imperilled; and an improvement of those conditions is urgently required;</li> <li>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</li> </ol>" })),
+        },
+    ],
+};
+const withIcon = {
+    items: [
+        {
+            icon: {
+                hidden: false,
+                name: "info",
+            },
+            label: "Tab Label With A Really Really Lenghty Title Even Though We Do Not Recommend Such A Lengthy Title",
+            content: (jsxRuntime.jsx(components_Image_Image, { alt: "My alt text", caption: "Women construction workers in Nepal build roads and bridges as part of a National Rural Transport Programme co-sponsored by the ILO.", credit: "\u00A9 Marcel Crozet/ILO", url: [
+                    { breakpoint: 0, src: "/small.jpg" },
+                    { breakpoint: 800, src: "/medium.jpg" },
+                    { breakpoint: 1200, src: "/large.jpg" },
+                    { breakpoint: 1440, src: "/large.jpg" },
+                ] })),
+        },
+        {
+            icon: {
+                hidden: false,
+                name: "info",
+            },
+            label: "Tab Label 2",
+            content: (jsxRuntime.jsx(components_RichText_RichText, { content: "<h2>International Labour Organization</h2> <p>The <b>International Labour Organization</b> (<b>ILO</b>) is a <a href='https://www.un.org'>United Nations</a> agency whose mandate is to advance social and economic justice by setting international labour standards. Founded in October 1919 under the League of Nations, it is the first and oldest specialised agency of the UN. The ILO has 187 member states: 186 out of 193 UN member states plus the Cook Islands.</p> <p>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</p> <figure><img alt='placeholder image' class='right' src='/ilo-headquarters.jpg'><figcaption>The ILO's headquarters in Geneva, Switzerland. \u00A9Steiner SA</figcaption></figure> <h3>ILO Constitution</h3> <p>The driving forces for the ILO's creation arose from security, humanitarian, political and economic considerations.</p> <blockquote> <p>The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind.</p> <cite>ILO Director-General Gilbert F. Houngbo</cite> </blockquote> Reflecting these ideas, the Preamble of the ILO Constitution states:</p> <ol> <li>Whereas universal and lasting peace can be established only if it is based upon social justice;</li> <li>And whereas conditions of labour exist involving such injustice, hardship and privation to large numbers of people as to produce unrest so great that the peace and harmony of the world are imperilled; and an improvement of those conditions is urgently required;</li> <li>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</li> </ol>" })),
+        },
+    ],
+};
+const fiveItems = {
+    items: [
+        {
+            label: "Tab One",
+            content: (jsxRuntime.jsx(components_RichText_RichText, { content: "<h2>International Labour Organization</h2> <p>The <b>International Labour Organization</b> (<b>ILO</b>) is a <a href='https://www.un.org'>United Nations</a> agency whose mandate is to advance social and economic justice by setting international labour standards. Founded in October 1919 under the League of Nations, it is the first and oldest specialised agency of the UN. The ILO has 187 member states: 186 out of 193 UN member states plus the Cook Islands.</p> <p>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</p> <figure><img alt='placeholder image' class='right' src='/ilo-headquarters.jpg'><figcaption>The ILO's headquarters in Geneva, Switzerland. \u00A9Steiner SA</figcaption></figure> <h3>ILO Constitution</h3> <p>The driving forces for the ILO's creation arose from security, humanitarian, political and economic considerations.</p> <blockquote> <p>The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind.</p> <cite>ILO Director-General Gilbert F. Houngbo</cite> </blockquote> Reflecting these ideas, the Preamble of the ILO Constitution states:</p> <ol> <li>Whereas universal and lasting peace can be established only if it is based upon social justice;</li> <li>And whereas conditions of labour exist involving such injustice, hardship and privation to large numbers of people as to produce unrest so great that the peace and harmony of the world are imperilled; and an improvement of those conditions is urgently required;</li> <li>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</li> </ol>" })),
+        },
+        {
+            label: "Tab Two",
+            content: (jsxRuntime.jsx(components_Image_Image, { alt: "My alt text", caption: "Women construction workers in Nepal build roads and bridges as part of a National Rural Transport Programme co-sponsored by the ILO.", credit: "\u00A9 Marcel Crozet/ILO", url: [
+                    {
+                        breakpoint: 0,
+                        src: "https://place-hold.it/400x300?text=Tab Two Image",
+                    },
+                    {
+                        breakpoint: 800,
+                        src: "https://place-hold.it/800x600?text=Tab Two Image",
+                    },
+                    {
+                        breakpoint: 1200,
+                        src: "https://place-hold.it/1200x900?text=Tab Two Image",
+                    },
+                    {
+                        breakpoint: 1440,
+                        src: "https://place-hold.it/1600x1200?text=Tab Two Image",
+                    },
+                ] })),
+        },
+        {
+            label: "Tab Three",
+            content: (jsxRuntime.jsx(components_Image_Image, { alt: "My alt text", caption: "Women construction workers in Nepal build roads and bridges as part of a National Rural Transport Programme co-sponsored by the ILO.", credit: "\u00A9 Marcel Crozet/ILO", url: [
+                    {
+                        breakpoint: 0,
+                        src: "https://place-hold.it/400x300?text=Tab Three Image",
+                    },
+                    {
+                        breakpoint: 800,
+                        src: "https://place-hold.it/800x600?text=Tab Three Image",
+                    },
+                    {
+                        breakpoint: 1200,
+                        src: "https://place-hold.it/1200x900?text=Tab Three Image",
+                    },
+                    {
+                        breakpoint: 1440,
+                        src: "https://place-hold.it/1600x1200?text=Tab Three Image",
+                    },
+                ] })),
+        },
+        {
+            label: "Tab Four Has A Really Lenghthy Title Which Might Get Truncated",
+            content: (jsxRuntime.jsx(components_Image_Image, { alt: "My alt text", caption: "Women construction workers in Nepal build roads and bridges as part of a National Rural Transport Programme co-sponsored by the ILO.", credit: "\u00A9 Marcel Crozet/ILO", url: [
+                    {
+                        breakpoint: 0,
+                        src: "https://place-hold.it/400x300?text=Tab Four Image",
+                    },
+                    {
+                        breakpoint: 800,
+                        src: "https://place-hold.it/800x600?text=Tab Four Image",
+                    },
+                    {
+                        breakpoint: 1200,
+                        src: "https://place-hold.it/1200x900?text=Tab Four Image",
+                    },
+                    {
+                        breakpoint: 1440,
+                        src: "https://place-hold.it/1600x1200?text=Tab Four Image",
+                    },
+                ] })),
+        },
+        {
+            label: "Tab Five",
+            content: (jsxRuntime.jsx(components_Image_Image, { alt: "My alt text", caption: "Women construction workers in Nepal build roads and bridges as part of a National Rural Transport Programme co-sponsored by the ILO.", credit: "\u00A9 Marcel Crozet/ILO", url: [
+                    {
+                        breakpoint: 0,
+                        src: "https://place-hold.it/400x300?text=Tab Five Image",
+                    },
+                    {
+                        breakpoint: 800,
+                        src: "https://place-hold.it/800x600?text=Tab Five Image",
+                    },
+                    {
+                        breakpoint: 1200,
+                        src: "https://place-hold.it/1200x900?text=Tab Five Image",
+                    },
+                    {
+                        breakpoint: 1440,
+                        src: "https://place-hold.it/1600x1200?text=Tab Five Image",
+                    },
+                ] })),
+        },
+    ],
+};
+/**
+ * Sample prop definitions for Button's enumerable properties (imported in stories and tests).
+ */
+const TabsArgs = {
+    tabs,
+    withIcon,
+    fiveItems,
+};
+
+module.exports = TabsArgs;

package/lib/cjs/components/Tabs/Tabs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var classNames = require('classnames');
+var components_Icon_Icon = require('../Icon/Icon.js');
+require('tslib');
+require('../../GlobalCtx-10114bdd.js');
+require('@ilo-org/icons-react');
+
+const Tabs = ({ items }) => {
+    const [activeTab, setActiveTab] = React.useState(0);
+    const handleTabClick = (index, e) => {
+        setActiveTab(index);
+        e.preventDefault();
+    };
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--tabs`;
+    const tabsClasses = classNames(baseClass);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: `${tabsClasses} tabs--js` }, { children: [jsxRuntime.jsx("ul", Object.assign({ className: `${baseClass}--selection`, role: "tablist" }, { children: items.map((tab, index) => (jsxRuntime.jsx("li", Object.assign({ role: "tab", className: `${baseClass}--selection--item ${activeTab === index ? "active" : ""}`, onClick: (e) => handleTabClick(index, e) }, { children: jsxRuntime.jsxs("a", Object.assign({ href: `#tab--${index}`, className: `${baseClass}--selection--button${tab.icon ? " icon" : ""}`, role: "tab", "aria-controls": `tab--${index}`, "aria-selected": index === activeTab ? true : false, title: tab.label }, { children: [jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--selection--label` }, { children: tab.label })), tab.icon && (jsxRuntime.jsx(components_Icon_Icon, { name: tab.icon.name, hidden: tab.icon.hidden }))] })) }), `#tab--${index}`))) })), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--content` }, { children: items[activeTab].content }))] })));
+};
+
+module.exports = Tabs;

package/lib/cjs/components/Tabs/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var components_Tabs_Tabs = require('./Tabs.js');
+require('react/jsx-runtime');
+require('react');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('../../GlobalCtx-10114bdd.js');
+require('classnames');
+require('../Icon/Icon.js');
+require('@ilo-org/icons-react');
+
+
+
+exports.Tabs = components_Tabs_Tabs;

package/lib/cjs/components/Tag/Tag.js

@@ -2,19 +2,19 @@
 
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var require$$0 = require('react');
+var React = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_Icon_Icon = require('../Icon/Icon.js');
 var utils = require('@ilo-org/utils');
-var TagCtx = require('../../TagCtx-929c7753.js');
-require('../../GlobalCtx-97e4b433.js');
+var TagCtx = require('../../TagCtx-690a1d54.js');
+require('../../GlobalCtx-10114bdd.js');
 require('@ilo-org/icons-react');
 
 const Tag = (_a) => {
     var { className, children, id, url, type, callback } = _a, rest = tslib.__rest(_a, ["className", "children", "id", "url", "type", "callback"]);
     const { prefix } = hooks_useGlobalSettings();
-    const { activeItems, setActiveItems, allowMultipleActive } = require$$0.useContext(TagCtx.TagSetContext);
+    const { activeItems, setActiveItems, allowMultipleActive } = React.useContext(TagCtx.TagSetContext);
     const active = activeItems.indexOf(id) > -1;
     const baseClass = `${prefix}--tag`;
     const itemClass = `${prefix}--tag-set__item`;

package/lib/cjs/components/Tag/TagSet.js

@@ -3,19 +3,19 @@
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
-var require$$0 = require('react');
+var React = require('react');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var utils_checkArrayDuplicates = require('../../utils/checkArrayDuplicates.js');
-var TagCtx = require('../../TagCtx-929c7753.js');
-require('../../GlobalCtx-97e4b433.js');
+var TagCtx = require('../../TagCtx-690a1d54.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const TagSet = (_a) => {
     var { className, children, onButtonClick, defaultTagActive = [], allowMultipleActive = true } = _a, rest = tslib.__rest(_a, ["className", "children", "onButtonClick", "defaultTagActive", "allowMultipleActive"]);
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--tag-set`;
-    const [activeItems, setActiveItems] = require$$0.useState([]);
+    const [activeItems, setActiveItems] = React.useState([]);
     const defaultTagActiveString = JSON.stringify(defaultTagActive);
-    require$$0.useEffect(() => {
+    React.useEffect(() => {
         const tagOnLoad = allowMultipleActive
             ? defaultTagActive
             : defaultTagActive.length > 0
@@ -25,7 +25,7 @@ const TagSet = (_a) => {
     }, [defaultTagActiveString, allowMultipleActive]); //eslint-disable-line react-hooks/exhaustive-deps
     if (children) {
         const ids = [];
-        require$$0.Children.forEach(children, (child) => {
+        React.Children.forEach(children, (child) => {
             ids.push(child.props.id);
         });
         if (utils_checkArrayDuplicates.checkArrayDuplicates(ids)) {

package/lib/cjs/components/Tag/index.js

@@ -7,11 +7,11 @@ require('react/jsx-runtime');
 require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../Icon/Icon.js');
 require('@ilo-org/icons-react');
 require('@ilo-org/utils');
-require('../../TagCtx-929c7753.js');
+require('../../TagCtx-690a1d54.js');
 require('../../utils/checkArrayDuplicates.js');
 
 

package/lib/cjs/components/TextInput/TextInput.js

@@ -2,16 +2,16 @@
 
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var require$$0 = require('react');
+var React = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_FormControl_FormControl = require('../FormControl/FormControl.js');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 
-const TextInput = require$$0.forwardRef(({ onChange, onBlur, error, id, name, placeholder, required, pattern, disabled = false, type = "text", }, ref) => {
+const TextInput = React.forwardRef(({ onChange, onBlur, error, id, name, placeholder, required, pattern, disabled = false, type = "text", }, ref) => {
     const { prefix } = hooks_useGlobalSettings();
     const formControlCtx = components_FormControl_FormControl.useFormControl();
     const { ariaDescribedBy } = formControlCtx;
@@ -21,7 +21,7 @@ const TextInput = require$$0.forwardRef(({ onChange, onBlur, error, id, name, pl
     });
     return (jsxRuntime.jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: onChange, onBlur: onBlur, disabled: disabled, placeholder: placeholder, required: required, type: type, className: inputClass, pattern: pattern, "aria-describedby": ariaDescribedBy }));
 });
-const LabelledTextInput = require$$0.forwardRef((props, ref) => {
+const LabelledTextInput = React.forwardRef((props, ref) => {
     const { style, inputStyle, className } = props, rest = tslib.__rest(props, ["style", "inputStyle", "className"]);
     const fieldId = props.id ? props.id : props.name;
     return (jsxRuntime.jsx(components_FormControl_FormControl.default, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsxRuntime.jsx(TextInput, Object.assign({ ref: ref, style: inputStyle }, rest)) })));

package/lib/cjs/components/TextInput/index.js

@@ -6,7 +6,7 @@ require('react/jsx-runtime');
 require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../FormControl/FormControl.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');

package/lib/cjs/components/Textarea/Textarea.js

@@ -2,16 +2,16 @@
 
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var require$$0 = require('react');
+var React = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_FormControl_FormControl = require('../FormControl/FormControl.js');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 
-const Textarea = require$$0.forwardRef((_a, ref) => {
+const Textarea = React.forwardRef((_a, ref) => {
     var { error, className, name, id } = _a, props = tslib.__rest(_a, ["error", "className", "name", "id"]);
     const { prefix } = hooks_useGlobalSettings();
     const formControlCtx = components_FormControl_FormControl.useFormControl();
@@ -23,7 +23,7 @@ const Textarea = require$$0.forwardRef((_a, ref) => {
     });
     return (jsxRuntime.jsx("textarea", Object.assign({ ref: ref, className: textAreaClass, name: name, id: id ? id : name, "aria-describedby": ariaDescribedBy }, props)));
 });
-const LabelledTextarea = require$$0.forwardRef((props, ref) => {
+const LabelledTextarea = React.forwardRef((props, ref) => {
     const { style, inputStyle, className } = props, rest = tslib.__rest(props, ["style", "inputStyle", "className"]);
     const fieldId = props.id ? props.id : props.name;
     return (jsxRuntime.jsx(components_FormControl_FormControl.default, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsxRuntime.jsx(Textarea, Object.assign({ ref: ref, style: inputStyle }, rest)) })));

package/lib/cjs/components/Textarea/index.js

@@ -6,7 +6,7 @@ require('react/jsx-runtime');
 require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../FormControl/FormControl.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');

package/lib/cjs/components/Toggle/Toggle.js

@@ -2,16 +2,16 @@
 
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var require$$0 = require('react');
+var React = require('react');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var classNames = require('classnames');
 var components_FormControl_FormControl = require('../FormControl/FormControl.js');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 
-const Toggle = require$$0.forwardRef(({ size = "medium", error = false, disabled = false, defaultChecked = false, required = false, id, name, onChange, onBlur, onClick, checked, className, }, ref) => {
+const Toggle = React.forwardRef(({ size = "medium", error = false, disabled = false, defaultChecked = false, required = false, id, name, onChange, onBlur, onClick, checked, className, }, ref) => {
     const { prefix } = hooks_useGlobalSettings();
     const formControlCtx = components_FormControl_FormControl.useFormControl();
     const { ariaDescribedBy } = formControlCtx;
@@ -24,7 +24,7 @@ const Toggle = require$$0.forwardRef(({ size = "medium", error = false, disabled
     ]);
     return (jsxRuntime.jsxs("div", Object.assign({ className: toggleClass }, { children: [jsxRuntime.jsx("input", { ref: ref, checked: checked, disabled: disabled, defaultChecked: defaultChecked, name: name, id: id ? id : name, type: "checkbox", role: "switch", required: required, onChange: onChange, onBlur: onBlur, onClick: onClick, "aria-describedby": ariaDescribedBy }), jsxRuntime.jsx("span", { className: sliderClass })] })));
 });
-const LabelledToggle = require$$0.forwardRef((props, ref) => {
+const LabelledToggle = React.forwardRef((props, ref) => {
     const fieldId = props.id ? props.id : props.name;
     const { style, inputStyle, className } = props, rest = tslib.__rest(props, ["style", "inputStyle", "className"]);
     return (jsxRuntime.jsx(components_FormControl_FormControl.default, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsxRuntime.jsx(Toggle, Object.assign({ ref: ref, style: inputStyle }, rest)) })));

package/lib/cjs/components/Toggle/index.js

@@ -5,7 +5,7 @@ require('tslib');
 require('react/jsx-runtime');
 require('react');
 require('../../hooks/useGlobalSettings.js');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('classnames');
 require('../FormControl/FormControl.js');
 require('nanoid');

package/lib/cjs/components/Tooltip/Tooltip.js

@@ -1,19 +1,19 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var require$$0 = require('react');
+var React = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var core = require('@popperjs/core');
 require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const Tooltip = ({ className, children, icon, label, iconTheme, theme, id, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--tooltip`;
-    const [isVisible, setIsVisible] = require$$0.useState(false);
-    const tooltipRef = require$$0.useRef(null);
-    const popperInstanceRef = require$$0.useRef(null);
+    const [isVisible, setIsVisible] = React.useState(false);
+    const tooltipRef = React.useRef(null);
+    const popperInstanceRef = React.useRef(null);
     const isLongTooltip = () => {
         var _a, _b;
         const tooltipText = (((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.textContent) ||

package/lib/cjs/components/Tooltip/index.js

@@ -6,7 +6,7 @@ require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('@popperjs/core');
 
 

package/lib/cjs/components/Video/Video.js

@@ -1,27 +1,26 @@
 'use strict';
 
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var components_Video_VideoPlayer = require('../../VideoPlayer-5f0a64c6.js');
-require('tslib');
-require('react');
-require('../../GlobalCtx-97e4b433.js');
-require('../../index-0af02e81.js');
-require('react-dom');
-require('../../utils/hoursMinutesSeconds.js');
-require('screenfull');
+var components_Video_VideoPlayer = require('./VideoPlayer.js');
+require('../../GlobalCtx-10114bdd.js');
+require('videojs-youtube');
+require('video.js');
 
-const Video = ({ className, caption, poster, video }) => {
+const Video = React.forwardRef((_a, ref) => {
+    var { className, caption } = _a, video = tslib.__rest(_a, ["className", "caption"]);
     const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--legacyvideo`;
+    const baseClass = `${prefix}--video`;
     const videoClasses = classNames(className, {
         [baseClass]: true,
     });
     const captionClasses = classNames("", {
         [`${baseClass}--caption`]: true,
     });
-    return (jsxRuntime.jsxs("figure", Object.assign({ className: videoClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${videoClasses}--wrapper` }, { children: video && jsxRuntime.jsx(components_Video_VideoPlayer.VideoPlayer, Object.assign({}, video, { poster: poster })) })), caption && jsxRuntime.jsx("figcaption", Object.assign({ className: captionClasses }, { children: caption }))] })));
-};
+    return (jsxRuntime.jsxs("figure", Object.assign({ className: videoClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${videoClasses}--wrapper` }, { children: video && jsxRuntime.jsx(components_Video_VideoPlayer, Object.assign({}, video, { ref: ref })) })), caption && (jsxRuntime.jsx("figcaption", Object.assign({ className: captionClasses }, { children: caption })))] })));
+});
 
 module.exports = Video;

package/lib/cjs/components/Video/VideoPlayer.js

@@ -1,17 +1,59 @@
 'use strict';
 
-require('react/jsx-runtime');
-require('react');
-var components_Video_VideoPlayer = require('../../VideoPlayer-5f0a64c6.js');
-require('react-dom');
-require('classnames');
-require('../../hooks/useGlobalSettings.js');
-require('../../utils/hoursMinutesSeconds.js');
-require('screenfull');
-require('../../index-0af02e81.js');
-require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('videojs-youtube');
+var videojs = require('video.js');
 
+const video = videojs;
+const VideoPlayer = React.forwardRef(({ src, poster, youtube }, ref) => {
+    const videoNode = React.useRef(null);
+    const player = React.useRef();
+    React.useImperativeHandle(ref, () => ({
+        get player() {
+            return player.current;
+        },
+    }), [player]);
+    React.useEffect(() => {
+        if (videoNode.current) {
+            player.current = video(videoNode.current, {
+                autoplay: false,
+                controls: true,
+                preload: "auto",
+                bigPlayButton: false,
+                poster: poster === null || poster === void 0 ? void 0 : poster.src,
+                controlBar: {
+                    descriptionsButton: false,
+                    playbackRateMenuButton: false,
+                    chaptersButton: false,
+                    audioTrackButton: false,
+                    pictureInPictureToggle: false,
+                    subsCapsButton: false,
+                    seekToLive: false,
+                    liveDisplay: false,
+                },
+                errorDisplay: false,
+                textTrackSettings: false,
+                resizeManager: false,
+                /**
+                 * If youtube is true, it will default to the youtube video
+                 */
+                sources: [
+                    { type: youtube ? "video/youtube" : undefined, src: src },
+                ],
+                dataSetup: {
+                    techOrder: ["youtube"],
+                },
+                liveTracker: false,
+            });
+        }
+        return () => {
+            if (player.current) {
+                player.current.dispose();
+            }
+        };
+    }, [poster === null || poster === void 0 ? void 0 : poster.src, src, youtube]);
+    return (jsxRuntime.jsx("div", Object.assign({ className: "ilo--videoplayer" }, { children: jsxRuntime.jsx("video", { ref: videoNode, className: "ilo--video--element" }) })));
+});
 
-
-module.exports = components_Video_VideoPlayer.VideoPlayer;
+module.exports = VideoPlayer;

package/lib/cjs/components/Video/index.js

@@ -1,17 +1,15 @@
 'use strict';
 
 var components_Video_Video = require('./Video.js');
+require('tslib');
 require('react/jsx-runtime');
+require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('react');
-require('../../GlobalCtx-97e4b433.js');
-require('../../VideoPlayer-5f0a64c6.js');
-require('../../index-0af02e81.js');
-require('react-dom');
-require('../../utils/hoursMinutesSeconds.js');
-require('screenfull');
+require('../../GlobalCtx-10114bdd.js');
+require('./VideoPlayer.js');
+require('videojs-youtube');
+require('video.js');