fictoan-react 0.35.2 → 0.36.1

package/CHANGELOG.md

@@ -1,4 +1,19 @@
-### 0.35.1
+### 0.36.1
+- Add types for `Element`’s `as` attribute
+
+### 0.36.0
+- Fix text colour for nested links in sidebar for better differentiation
+- Fix typo in `portionProps`
+- Refactor sidebar theme object hierarchy for links and sublinks, remove `linksWrapper` object
+- Mention `styled-components` requirement in the README
+
+### 0.35.4
+- Rename `tabLS` to `tabletLandscape` and `tabPT` to `tabletPortrait` for more consistency with the naming scheme and less ambiguity.
+
+### 0.35.3
+- Fix focus states for checkbox, switch, radio and select
+
+### 0.35.2
 - Fix theme throwing error on colour overrides
 - Add custom colours to ColorPropsType and export it from library
 - Fix InputField element type
@@ -12,8 +27,8 @@
 - Remove `as` from RadioButton and CheckBox props
 - Make `shadow` a global prop
 - Make `shape` a global prop
-- Add ExpandableContent component which implements details and summary tags
-- Add Tag component
+- Add `ExpandableContent` component which implements details and summary tags
+- Add `Tag` component
 - Add `opacity` as a global prop
 - HRule now supports custom background colors
   - Add `hr.default` to theme
@@ -33,9 +48,9 @@
 - Add sizes to Switch component
 - Make Select chevron consistent with ExpandableContent
 - Make required and disabled states consistent in form fields
+- Remove `name` props from RadioGroup `options` type; Add `label` and `id`
 
 **Sidebar improvements**
-- Remove `name` props from RadioGroup `options` type; Add `label` and `id`
 - Remove `isSticky` from Sidebar footer
 - `sidebar.body.bg` is now `sidebar.bg` in theme
 - Add sidebar width properties to theme; SidebarHeader, SidebarFooter and SidebarItem span 100% automatically

package/README.md

@@ -13,7 +13,7 @@ Fictoan is an intuitive framework for designers looking to code interfaces.
 
 ## Features
 - Simple, straight-forward React custom props, exactly like setting properties in a design app.
-- All Attributes are intuitive and in plain English.
+- All attributes are intuitive and in plain English.
 - Most attributes are also the same across different components.
 
 ## Getting Started
@@ -39,6 +39,8 @@ const MyComponent = props => {
 }
 ```
 
+Just note, you’d need to install `styled-components` too, which is a peer-dependency for Fictoan.
+
 ## Storybook
 Start development server for storybook
 ```sh
@@ -47,6 +49,9 @@ yarn storybook
 
 Storybook recipe used for this project: https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-mdx-docs
 
+## Contributing
+You can view the contributing guide [here](.github/CONTRIBUTING.md).
+
 ## License
 Licensed under the [MIT License](LICENSE).
 

package/dist/cjs/components/Element/constants.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps } from "react";
+import { ElementType, HTMLProps } from "react";
 import { defaultColourProps } from "../../styles/DefaultColourProps";
 import { customColours, FictoanTheme } from "../../styles/theme";
 declare type DeepPartial<T> = {
@@ -49,10 +49,10 @@ export interface CommonProps extends ThemeProps {
     opacity?: OpacityTypes;
     classNames?: any[];
 }
-export interface CommonAndHTMLProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "size" | "ref" | "shape"> {
+export interface CommonAndHTMLProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "as" | "size" | "ref" | "shape"> {
 }
 export interface ElementProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "as" | "ref" | "shape"> {
-    as: any;
+    as: ElementType;
     className?: string;
 }
 export {};

package/dist/cjs/components/ExpandableContent/ExpandableContent.styled.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=/*#__PURE__*/e(require("styled-components")).default.details.withConfig({displayName:"ExpandableContentStyled",componentId:"-13hve17"})`cursor:pointer;& > summary{position:relative;& > *{padding-right:32px;}&::after{content:"";display:inline-block;position:absolute;top:50%;right:12px;width:8px;height:8px;border-style:solid;border-width:0 2px 2px 0;transform:translateY(-50%)rotate(45deg);color:${e=>e.theme.sidebar.linksWrapper.subLinks.chevron.border};transition:transform 0.2s linear;cursor:pointer;}}&[open] > summary::after{transform:translateY(-50%)rotate(225deg);}`;exports.ExpandableContentStyled=t;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=/*#__PURE__*/e(require("styled-components")).default.details.withConfig({displayName:"ExpandableContentStyled",componentId:"-13hve17"})`cursor:pointer;& > summary{position:relative;& > *{padding-right:32px;}&::after{content:"";display:inline-block;position:absolute;top:50%;right:12px;width:8px;height:8px;border-style:solid;border-width:0 2px 2px 0;transform:translateY(-50%)rotate(45deg);color:${e=>e.theme.sidebar.subLinks.chevron.border};transition:transform 0.2s linear;cursor:pointer;}}&[open] > summary::after{transform:translateY(-50%)rotate(225deg);}`;exports.ExpandableContentStyled=t;
 //# sourceMappingURL=ExpandableContent.styled.js.map

package/dist/cjs/components/ExpandableContent/ExpandableContent.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableContent.styled.js","sources":["../../../../src/components/ExpandableContent/ExpandableContent.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { ExpandableContentProps } from \"./ExpandableContent\";\n\nexport const ExpandableContentStyled = styled.details`\n    cursor: pointer;\n    \n    & > summary {\n        position : relative;\n\n        & > * {\n            padding-right: 32px;\n        }\n\n        &::after {\n            content      : \"\";\n            display      : inline-block;\n            position     : absolute;\n            top          : 50%;\n            right        : 12px;\n            width        : 8px;\n            height       : 8px;\n            border-style : solid;\n            border-width : 0 2px 2px 0;\n            transform    : translateY(-50%) rotate(45deg);\n            color        : ${(props: ExpandableContentProps) => props.theme.sidebar.linksWrapper.subLinks.chevron.border};\n            transition   : transform 0.2s linear;\n            cursor       : pointer;\n        }\n    }\n    \n    &[open] > summary::after {\n        transform : translateY(-50%) rotate(225deg);\n    }\n`;\n"],"names":["ExpandableContentStyled","details","props","theme","sidebar","linksWrapper","subLinks","chevron","border"],"mappings":"kJAGaA,uDAAiCC,yVAqBhBC,GAAkCA,EAAMC,MAAMC,QAAQC,aAAaC,SAASC,QAAQC"}
+{"version":3,"file":"ExpandableContent.styled.js","sources":["../../../../src/components/ExpandableContent/ExpandableContent.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { ExpandableContentProps } from \"./ExpandableContent\";\n\nexport const ExpandableContentStyled = styled.details`\n    cursor: pointer;\n    \n    & > summary {\n        position : relative;\n\n        & > * {\n            padding-right: 32px;\n        }\n\n        &::after {\n            content      : \"\";\n            display      : inline-block;\n            position     : absolute;\n            top          : 50%;\n            right        : 12px;\n            width        : 8px;\n            height       : 8px;\n            border-style : solid;\n            border-width : 0 2px 2px 0;\n            transform    : translateY(-50%) rotate(45deg);\n            color        : ${(props: ExpandableContentProps) => props.theme.sidebar.subLinks.chevron.border};\n            transition   : transform 0.2s linear;\n            cursor       : pointer;\n        }\n    }\n    \n    &[open] > summary::after {\n        transform : translateY(-50%) rotate(225deg);\n    }\n`;\n"],"names":["ExpandableContentStyled","details","props","theme","sidebar","subLinks","chevron","border"],"mappings":"kJAGaA,uDAAiCC,yVAqBhBC,GAAkCA,EAAMC,MAAMC,QAAQC,SAASC,QAAQC"}

package/dist/cjs/components/Form/CheckBox/CheckBox.styled.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=/*#__PURE__*/t(e);const a=e.css`display:inline-flex;flex-direction:row;align-items:center;margin-right:24px;&:only-of-type{margin-right:0;}label{display:inline-flex;position:relative;font-family:${e=>e.theme.text.font.sans};color:${e=>e.theme.text.paras.color};cursor:pointer;line-height:1;user-select:none;&::before,&::after{display:inline-flex;content:"";transition:all 0.1s ease-out;}}label::before,input[type="checkbox"]:disabled + label::before{user-select:none;pointer-events:none;background:${e=>e.theme.checkBox.square.default.bg};box-shadow:0 2px 4px -2px hsla(0, 0, 0, 0.24)inset;}&:hover label::before{background:${e=>e.theme.checkBox.square.onHover.bg};}label::after{opacity:0;}input[type="checkbox"]:checked + label::before{background:${e=>e.theme.checkBox.square.isChecked.bg};}`,l=o.default.div.withConfig({displayName:"CheckBoxStyled",componentId:"-4wa34p"})`${a} input[type="checkbox"]{display:none;}label::before{position:absolute;height:16px;width:16px;top:0;left:0;border-radius:4px;}label::after{position:absolute;height:6px;width:12px;left:2px;top:4px;border-left:2px solid ${e=>e.theme.checkBox.check.default.border};border-bottom:2px solid ${e=>e.theme.checkBox.check.default.border};transform:rotate(-45deg);}label{padding-left:24px;}input[type="checkbox"]:checked + label::after{opacity:1;}`,i=o.default.div.withConfig({displayName:"SwitchStyled",componentId:"-gklthr"})`${a} input[type="checkbox"]{display:none;}label{position:relative;&::before{position:absolute;top:50%;left:0;transform:translateY(-50%);border-radius:16px;margin-right:4px;}&::after{content:"";position:absolute;top:50%;transform:translateY(-50%);display:inline-block;background:${e=>e.theme.toggleSwitch.switch.default.bg};border-radius:50%;transition:all 0.1s ease-out;box-shadow:0 2px 4px -2px hsla(0, 0, 0, 0.6);opacity:1;}}input[type="checkbox"]:checked + label::after{background:${e=>e.theme.toggleSwitch.switch.isChecked.bg};}&.size-small{label{padding-left:32px;&::before{width:24px;height:12px;}&::after{left:2px;width:8px;height:8px;}}input[type="checkbox"]:checked + label::after{transform:translateY(-50%)translateX(12px);}}&.size-medium{label{padding-left:44px;&::before{width:36px;height:18px;}&::after{left:3px;width:12px;height:12px;}}input[type="checkbox"]:checked + label::after{transform:translateY(-50%)translateX(18px);}}&.size-large{label{padding-left:56px;&::before{width:48px;height:24px;}&::after{left:4px;width:16px;height:16px;}}input[type="checkbox"]:checked + label::after{transform:translateY(-50%)translateX(24px);}}`;exports.CheckBoxStyled=l,exports.SwitchStyled=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=/*#__PURE__*/t(e);const l=e.css`display:inline-flex;flex-direction:row;align-items:center;margin-right:24px;&:only-of-type{margin-right:0;}input[type="checkbox"]{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);}label{display:inline-flex;position:relative;font-family:${e=>e.theme.text.font.sans};color:${e=>e.theme.text.paras.color};cursor:pointer;line-height:1;user-select:none;&::before,&::after{display:inline-flex;content:"";transition:all 0.1s ease-out;}}label::before,input[type="checkbox"]:disabled + label::before{user-select:none;pointer-events:none;background:${e=>e.theme.checkBox.square.default.bg};box-shadow:0 2px 4px -2px hsla(0, 0, 0, 0.24)inset;}&:hover label::before{background:${e=>e.theme.checkBox.square.onHover.bg};}label::after{opacity:0;}input[type="checkbox"]:checked + label::before{background:${e=>e.theme.checkBox.square.isChecked.bg};}input[type="checkbox"]:focus + label::before{outline:solid 2px ${e=>e.theme.checkBox.square.isChecked.bg};}`,a=o.default.div.withConfig({displayName:"CheckBoxStyled",componentId:"-4wa34p"})`${l} label::before{position:absolute;height:16px;width:16px;top:0;left:0;border-radius:4px;}label::after{position:absolute;height:6px;width:12px;left:2px;top:4px;border-left:2px solid ${e=>e.theme.checkBox.check.default.border};border-bottom:2px solid ${e=>e.theme.checkBox.check.default.border};transform:rotate(-45deg);}label{padding-left:24px;}input[type="checkbox"]:checked + label::after{opacity:1;}`,i=o.default.div.withConfig({displayName:"SwitchStyled",componentId:"-gklthr"})`${l} label{position:relative;&::before{position:absolute;top:50%;left:0;transform:translateY(-50%);border-radius:16px;margin-right:4px;}&::after{content:"";position:absolute;top:50%;transform:translateY(-50%);display:inline-block;background:${e=>e.theme.toggleSwitch.switch.default.bg};border-radius:50%;transition:all 0.1s ease-out;box-shadow:0 2px 4px -2px hsla(0, 0, 0, 0.6);opacity:1;}}input[type="checkbox"]:checked + label::after{background:${e=>e.theme.toggleSwitch.switch.isChecked.bg};}&.size-small{label{padding-left:32px;&::before{width:24px;height:12px;}&::after{left:2px;width:8px;height:8px;}}input[type="checkbox"]:checked + label::after{transform:translateY(-50%)translateX(12px);}}&.size-medium{label{padding-left:44px;&::before{width:36px;height:18px;}&::after{left:3px;width:12px;height:12px;}}input[type="checkbox"]:checked + label::after{transform:translateY(-50%)translateX(18px);}}&.size-large{label{padding-left:56px;&::before{width:48px;height:24px;}&::after{left:4px;width:16px;height:16px;}}input[type="checkbox"]:checked + label::after{transform:translateY(-50%)translateX(24px);}}`;exports.CheckBoxStyled=a,exports.SwitchStyled=i;
 //# sourceMappingURL=CheckBox.styled.js.map

package/dist/cjs/components/Form/CheckBox/CheckBox.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.styled.js","sources":["../../../../../src/components/Form/CheckBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { CheckboxProps } from \"./CheckBox\";\n\n/*  COMMON STYLES  ========================================================  */\nconst SharedStyling = css`\n    display        : inline-flex;\n    flex-direction : row;\n    align-items    : center;\n    margin-right   : 24px;\n\n    &:only-of-type { margin-right : 0; }\n\n    label {\n        display     : inline-flex;\n        position    : relative;\n        font-family : ${(props: CheckboxProps) => props.theme.text.font.sans};\n        color       : ${(props: CheckboxProps) => props.theme.text.paras.color};\n        cursor      : pointer;\n        line-height : 1;\n        user-select : none;\n\n        &::before,\n        &::after {\n            display    : inline-flex;\n            content    : \"\";\n            transition : all 0.1s ease-out;\n        }\n    }\n\n    /*  The grey square */\n    label::before,\n    input[type=\"checkbox\"]:disabled + label::before {\n        user-select    : none;\n        pointer-events : none;\n        background     : ${(props: CheckboxProps) => props.theme.checkBox.square.default.bg};\n        box-shadow     : 0 2px 4px -2px hsla(0, 0, 0, 0.24) inset;\n    }\n\n    &:hover label::before {\n        background : ${(props: CheckboxProps) => props.theme.checkBox.square.onHover.bg};\n    }\n\n    label::after { opacity : 0; }\n\n    input[type=\"checkbox\"]:checked + label::before {\n        background : ${(props: CheckboxProps) => props.theme.checkBox.square.isChecked.bg};\n    }\n`;\n\n/*  CHECKBOX  =============================================================  */\nexport const CheckBoxStyled = styled.div`\n\n    ${SharedStyling}\n\n    input[type=\"checkbox\"] { display : none; }\n\n    /*  The bg square */\n    label::before {\n        position      : absolute;\n        height        : 16px;\n        width         : 16px;\n        top           : 0;\n        left          : 0;\n        border-radius : 4px;\n    }\n\n    /*  The white tick inside */\n    label::after {\n        position      : absolute;\n        height        : 6px;\n        width         : 12px;\n        left          : 2px;\n        top           : 4px;\n        border-left   : 2px solid ${(props: CheckboxProps) => props.theme.checkBox.check.default.border};\n        border-bottom : 2px solid ${(props: CheckboxProps) => props.theme.checkBox.check.default.border};\n        transform     : rotate(-45deg);\n    }\n\n    label { padding-left : 24px; }\n\n    input[type=\"checkbox\"]:checked + label::after { opacity : 1; }\n`;\n\n/*  TOGGLE SWITCH  ========================================================  */\nexport const SwitchStyled = styled.div`\n\n    ${SharedStyling}\n\n    input[type=\"checkbox\"] { display : none; }\n\n    label { \n        position: relative;\n    \n        /*  The grey oblong */\n        &::before {\n            position      : absolute;\n            top           : 50%;\n            left          : 0;\n            transform     : translateY(-50%);\n            border-radius : 16px;\n            margin-right  : 4px;\n        }\n    \n        /*  The white inner circle */\n        &::after {\n            content       : \"\";\n            position      : absolute;\n            top           : 50%;\n            transform     : translateY(-50%);\n            display       : inline-block;\n            background    : ${(props: CheckboxProps) => props.theme.toggleSwitch.switch.default.bg};\n            border-radius : 50%;\n            transition    : all 0.1s ease-out;\n            box-shadow    : 0 2px 4px -2px hsla(0, 0, 0, 0.6);\n            opacity       : 1;\n        }\n    }\n\n    input[type=\"checkbox\"]:checked + label::after {\n        background : ${(props: CheckboxProps) => props.theme.toggleSwitch.switch.isChecked.bg};\n    }\n\n\n    /* Sizes */\n    &.size-small {\n        label { \n            padding-left : 32px; \n        \n            &::before {\n                width         : 24px;\n                height        : 12px;\n            }\n        \n            &::after {\n                left          : 2px;\n                width         : 8px;\n                height        : 8px;\n            }\n        }\n        input[type=\"checkbox\"]:checked + label::after {\n            transform  : translateY(-50%) translateX(12px);\n        }\n    }\n    &.size-medium {\n        label { \n            padding-left : 44px; \n        \n            &::before {\n                width         : 36px;\n                height        : 18px;\n            }\n        \n            &::after {\n                left          : 3px;\n                width         : 12px;\n                height        : 12px;\n            }\n        }\n        input[type=\"checkbox\"]:checked + label::after {\n            transform  : translateY(-50%) translateX(18px);\n        }\n    }\n    &.size-large {\n        label { \n            padding-left : 56px; \n        \n            &::before {\n                width         : 48px;\n                height        : 24px;\n            }\n            \n            &::after {\n                left          : 4px;\n                width         : 16px;\n                height        : 16px;\n            }\n        }\n        input[type=\"checkbox\"]:checked + label::after {\n            transform  : translateY(-50%) translateX(24px);\n        }\n    }    \n`;\n"],"names":["SharedStyling","css","props","theme","text","font","sans","paras","color","checkBox","square","default","bg","onHover","isChecked","CheckBoxStyled","styled","div","check","border","SwitchStyled","toggleSwitch","switch"],"mappings":"uMAKA,MAAMA,EAAgBC,2KAWGC,GAAyBA,EAAMC,MAAMC,KAAKC,KAAKC,cAC/CJ,GAAyBA,EAAMC,MAAMC,KAAKG,MAAMC,sPAkB7CN,GAAyBA,EAAMC,MAAMM,SAASC,OAAOC,QAAQC,2FAKjEV,GAAyBA,EAAMC,MAAMM,SAASC,OAAOG,QAAQD,yFAM7DV,GAAyBA,EAAMC,MAAMM,SAASC,OAAOI,UAAUF,OAK1EG,EAAiBC,UAAOC,uEAE/BjB,6NAqB+BE,GAAyBA,EAAMC,MAAMM,SAASS,MAAMP,QAAQQ,kCAC5DjB,GAAyBA,EAAMC,MAAMM,SAASS,MAAMP,QAAQQ,sHAUpFC,EAAeJ,UAAOC,qEAE7BjB,sRAwByBE,GAAyBA,EAAMC,MAAMkB,aAAaC,OAAOX,QAAQC,uKASxEV,GAAyBA,EAAMC,MAAMkB,aAAaC,OAAOR,UAAUF"}
+{"version":3,"file":"CheckBox.styled.js","sources":["../../../../../src/components/Form/CheckBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { CheckboxProps } from \"./CheckBox\";\n\n/*  COMMON STYLES  ========================================================  */\nconst SharedStyling = css`\n    display        : inline-flex;\n    flex-direction : row;\n    align-items    : center;\n    margin-right   : 24px;\n\n    &:only-of-type {\n        margin-right : 0;\n    }\n\n    input[type=\"checkbox\"] {\n        position : absolute;\n        height   : 1px;\n        width    : 1px;\n        overflow : hidden;\n        clip     : rect(1px 1px 1px 1px); /* IE6, IE7 */\n        clip     : rect(1px, 1px, 1px, 1px);\n    }\n\n    label {\n        display     : inline-flex;\n        position    : relative;\n        font-family : ${(props : CheckboxProps) => props.theme.text.font.sans};\n        color       : ${(props : CheckboxProps) => props.theme.text.paras.color};\n        cursor      : pointer;\n        line-height : 1;\n        user-select : none;\n\n        &::before,\n        &::after {\n            display    : inline-flex;\n            content    : \"\";\n            transition : all 0.1s ease-out;\n        }\n    }\n\n    /*  The grey square */\n\n    label::before,\n    input[type=\"checkbox\"]:disabled + label::before {\n        user-select    : none;\n        pointer-events : none;\n        background     : ${(props : CheckboxProps) => props.theme.checkBox.square.default.bg};\n        box-shadow     : 0 2px 4px -2px hsla(0, 0, 0, 0.24) inset;\n    }\n\n    &:hover label::before {\n        background : ${(props : CheckboxProps) => props.theme.checkBox.square.onHover.bg};\n    }\n\n    label::after {\n        opacity : 0;\n    }\n\n    input[type=\"checkbox\"]:checked + label::before {\n        background : ${(props : CheckboxProps) => props.theme.checkBox.square.isChecked.bg};\n    }\n\n    input[type=\"checkbox\"]:focus + label::before {\n        outline : solid 2px ${(props : CheckboxProps) => props.theme.checkBox.square.isChecked.bg};\n    }\n`;\n\n/*  CHECKBOX  =============================================================  */\nexport const CheckBoxStyled = styled.div`\n\n    ${SharedStyling}\n        /*  The bg square */\n    label::before {\n        position      : absolute;\n        height        : 16px;\n        width         : 16px;\n        top           : 0;\n        left          : 0;\n        border-radius : 4px;\n    }\n\n    /*  The white tick inside */\n\n    label::after {\n        position      : absolute;\n        height        : 6px;\n        width         : 12px;\n        left          : 2px;\n        top           : 4px;\n        border-left   : 2px solid ${(props : CheckboxProps) => props.theme.checkBox.check.default.border};\n        border-bottom : 2px solid ${(props : CheckboxProps) => props.theme.checkBox.check.default.border};\n        transform     : rotate(-45deg);\n    }\n\n    label {\n        padding-left : 24px;\n    }\n\n    input[type=\"checkbox\"]:checked + label::after {\n        opacity : 1;\n    }\n`;\n\n/*  TOGGLE SWITCH  ========================================================  */\nexport const SwitchStyled = styled.div`\n\n    ${SharedStyling}\n    label {\n        position : relative;\n\n        /*  The grey oblong */\n\n        &::before {\n            position      : absolute;\n            top           : 50%;\n            left          : 0;\n            transform     : translateY(-50%);\n            border-radius : 16px;\n            margin-right  : 4px;\n        }\n\n        /*  The white inner circle */\n\n        &::after {\n            content       : \"\";\n            position      : absolute;\n            top           : 50%;\n            transform     : translateY(-50%);\n            display       : inline-block;\n            background    : ${(props : CheckboxProps) => props.theme.toggleSwitch.switch.default.bg};\n            border-radius : 50%;\n            transition    : all 0.1s ease-out;\n            box-shadow    : 0 2px 4px -2px hsla(0, 0, 0, 0.6);\n            opacity       : 1;\n        }\n    }\n\n    input[type=\"checkbox\"]:checked + label::after {\n        background : ${(props : CheckboxProps) => props.theme.toggleSwitch.switch.isChecked.bg};\n    }\n\n\n    /* Sizes */\n\n    &.size-small {\n        label {\n            padding-left : 32px;\n\n            &::before {\n                width  : 24px;\n                height : 12px;\n            }\n\n            &::after {\n                left   : 2px;\n                width  : 8px;\n                height : 8px;\n            }\n        }\n\n        input[type=\"checkbox\"]:checked + label::after {\n            transform : translateY(-50%) translateX(12px);\n        }\n    }\n\n    &.size-medium {\n        label {\n            padding-left : 44px;\n\n            &::before {\n                width  : 36px;\n                height : 18px;\n            }\n\n            &::after {\n                left   : 3px;\n                width  : 12px;\n                height : 12px;\n            }\n        }\n\n        input[type=\"checkbox\"]:checked + label::after {\n            transform : translateY(-50%) translateX(18px);\n        }\n    }\n\n    &.size-large {\n        label {\n            padding-left : 56px;\n\n            &::before {\n                width  : 48px;\n                height : 24px;\n            }\n\n            &::after {\n                left   : 4px;\n                width  : 16px;\n                height : 16px;\n            }\n        }\n\n        input[type=\"checkbox\"]:checked + label::after {\n            transform : translateY(-50%) translateX(24px);\n        }\n    }\n`;\n"],"names":["SharedStyling","css","props","theme","text","font","sans","paras","color","checkBox","square","default","bg","onHover","isChecked","CheckBoxStyled","styled","div","check","border","SwitchStyled","toggleSwitch","switch"],"mappings":"uMAKA,MAAMA,EAAgBC,mTAsBGC,GAA0BA,EAAMC,MAAMC,KAAKC,KAAKC,cAChDJ,GAA0BA,EAAMC,MAAMC,KAAKG,MAAMC,sPAmB9CN,GAA0BA,EAAMC,MAAMM,SAASC,OAAOC,QAAQC,2FAKlEV,GAA0BA,EAAMC,MAAMM,SAASC,OAAOG,QAAQD,yFAQ9DV,GAA0BA,EAAMC,MAAMM,SAASC,OAAOI,UAAUF,sEAIzDV,GAA0BA,EAAMC,MAAMM,SAASC,OAAOI,UAAUF,OAKlFG,EAAiBC,UAAOC,uEAE/BjB,wLAmB+BE,GAA0BA,EAAMC,MAAMM,SAASS,MAAMP,QAAQQ,kCAC7DjB,GAA0BA,EAAMC,MAAMM,SAASS,MAAMP,QAAQQ,sHAcrFC,EAAeJ,UAAOC,qEAE7BjB,iPAuByBE,GAA0BA,EAAMC,MAAMkB,aAAaC,OAAOX,QAAQC,uKASzEV,GAA0BA,EAAMC,MAAMkB,aAAaC,OAAOR,UAAUF"}

package/dist/cjs/components/Form/FormWrapper/FormGenerator.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { ElementType, ReactNode } from "react";
 import { ElementProps, SpacingTypes } from "../../Element/constants";
 import { PortionProps } from "../../Portion/Portion";
 import { InputLabelCustomProps } from "../InputLabel/InputLabel";
@@ -12,7 +12,7 @@ interface FormFieldOptionsType extends RadioGroupOption {
     value: string;
 }
 export interface FormFieldsConfig extends FormFieldsConfigBase {
-    as: string;
+    as: ElementType;
     options?: FormFieldOptionsType[];
 }
 export declare const generateFormThroughConfig: (fields: FormFieldsConfig[], onFieldsChange: React.FormEventHandler | null, spacing: SpacingTypes) => ReactNode;

package/dist/cjs/components/Form/FormWrapper/FormGenerator.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../external/Element.js"),t=require("react"),r=require("../../Row/Row.js"),o=require("../../Portion/Portion.js"),i=require("../InputField/InputField.js"),n=require("../InputField/FileUpload.js"),a=require("../InputLabel/InputLabel.js"),u=require("../CheckBox/CheckBox.js"),s=require("../CheckBox/Switch.js"),l=require("../RadioButton/RadioButton.js"),p=require("../RadioButton/RadioGroup.js"),d=require("../Select/Select.js"),c=require("../TextArea/TextArea.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../Row/Row.styled.js"),require("styled-components"),require("../../Portion/Portion.styled.js"),require("../BaseInputComponent/BaseInputComponent.js"),require("../FormItem/FormItem.js"),require("../FormItem/FormItem.styled.js"),require("../InputField/InputField.styled.js"),require("../Select/Select.styled.js"),require("../TextArea/TextArea.styled.js"),require("../CheckBox/CheckBox.styled.js"),require("../RadioButton/RadioButton.styled.js");var q=/*#__PURE__*/j(t);const S={CheckBox:u.CheckBox,Switch:s.Switch,InputField:i.InputField,FileUpload:n.FileUpload,InputLabel:a.InputLabel,RadioButton:l.RadioButton,RadioGroup:p.RadioGroup,Select:d.Select,TextArea:c.TextArea,Empty:"div"},m=(t,r)=>{const{as:o}=t,n=e.__rest(t,["as"]);return q.default.createElement(e.Element,Object.assign({as:S[o]||i.InputField},n,{isFullWidth:!0,onChange:r}))};exports.generateFormThroughConfig=(t,i,n)=>{let a=[];for(const r in t){const n=t[r],{desktopSpan:u,tabLSSpan:s,tabPTSpan:l,mobileSpan:p,isHorizontal:d}=n,c=e.__rest(n,["desktopSpan","tabLSSpan","tabPTSpan","mobileSpan","isHorizontal"]),j={desktopSpan:u,tabLSSpan:s,tabPTSpan:l,mobileSpan:p,isHorizontal:d};a.push(q.default.createElement(o.Portion,Object.assign({},j,{key:`fields-${r}`}),m(c,i)))}return q.default.createElement(r.Row,{gutters:n},a)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../external/Element.js"),t=require("react"),r=require("../../Row/Row.js"),o=require("../../Portion/Portion.js"),i=require("../InputLabel/InputLabel.js"),a=require("../InputField/InputField.js"),n=require("../InputField/FileUpload.js"),s=require("../CheckBox/CheckBox.js"),u=require("../CheckBox/Switch.js"),l=require("../RadioButton/RadioButton.js"),d=require("../RadioButton/RadioGroup.js"),p=require("../Select/Select.js"),c=require("../TextArea/TextArea.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../Row/Row.styled.js"),require("styled-components"),require("../../Portion/Portion.styled.js"),require("../BaseInputComponent/BaseInputComponent.js"),require("../FormItem/FormItem.js"),require("../FormItem/FormItem.styled.js"),require("../InputField/InputField.styled.js"),require("../Select/Select.styled.js"),require("../TextArea/TextArea.styled.js"),require("../CheckBox/CheckBox.styled.js"),require("../RadioButton/RadioButton.styled.js");var q=/*#__PURE__*/j(t);const m={CheckBox:s.CheckBox,Switch:u.Switch,InputField:a.InputField,FileUpload:n.FileUpload,InputLabel:i.InputLabel,RadioButton:l.RadioButton,RadioGroup:d.RadioGroup,Select:p.Select,TextArea:c.TextArea,Empty:"div"},I=(t,r)=>{const{as:o}=t,i=e.__rest(t,["as"]);return q.default.createElement(e.Element,Object.assign({as:m[o]||a.InputField},i,{isFullWidth:!0,onChange:r}))};exports.generateFormThroughConfig=(t,i,a)=>{let n=[];for(const r in t){const a=t[r],{desktopSpan:s,tabletLandscape:u,tabletPortraitSpan:l,mobileSpan:d,isHorizontal:p}=a,c=e.__rest(a,["desktopSpan","tabletLandscape","tabletPortraitSpan","mobileSpan","isHorizontal"]),j={desktopSpan:s,tabletLandscape:u,tabletPortraitSpan:l,mobileSpan:d,isHorizontal:p};n.push(q.default.createElement(o.Portion,Object.assign({},j,{key:`fields-${r}`}),I(c,i)))}return q.default.createElement(r.Row,{gutters:a},n)};
 //# sourceMappingURL=FormGenerator.js.map

package/dist/cjs/components/Form/FormWrapper/FormGenerator.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGenerator.js","sources":["../../../../../src/components/Form/FormWrapper/FormGenerator.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\n\nimport { Element } from \"../../Element/Element\";\nimport { ElementProps, SpacingTypes } from \"../../Element/constants\";\n\nimport { Row } from \"../../Row/Row\";\nimport { PortionProps, Portion } from \"../../Portion/Portion\";\nimport { InputLabelCustomProps } from \"../InputLabel/InputLabel\";\nimport { InputCommonProps } from \"../BaseInputComponent/constants\";\nimport { InputField } from \"../InputField/InputField\";\nimport { FileUpload } from \"../InputField/FileUpload\";\nimport { InputLabel } from \"../InputLabel/InputLabel\";\nimport { CheckBox } from \"../CheckBox/CheckBox\";\nimport { Switch } from \"../CheckBox/Switch\";\nimport { RadioButton } from \"../RadioButton/RadioButton\";\nimport { RadioGroup } from \"../RadioButton/RadioGroup\";\nimport { Select } from \"../Select/Select\";\nimport { TextArea } from \"../TextArea/TextArea\";\nimport { RadioGroupOption } from \"../RadioButton/constants\";\n\n// Types\nexport type FormFieldsType = ElementProps<HTMLInputElement> &\n    ElementProps<HTMLSelectElement> &\n    ElementProps<HTMLTextAreaElement> &\n    InputLabelCustomProps &\n    InputCommonProps;\nexport type FormFieldsConfigBase = PortionProps & FormFieldsType;\n\ninterface FormFieldOptionsType extends RadioGroupOption {\n    id: string;\n    label: string;\n    value: string;\n}\n\nexport interface FormFieldsConfig extends FormFieldsConfigBase {\n    as: string;\n    options?: FormFieldOptionsType[];\n}\n\n// Supported Form elements for \"as\" prop in config\nconst FormElements: Record<string, ReactNode | string> = {\n    CheckBox: CheckBox,\n    Switch: Switch,\n    InputField: InputField,\n    FileUpload: FileUpload,\n    InputLabel: InputLabel,\n    RadioButton: RadioButton,\n    RadioGroup: RadioGroup,\n    Select: Select,\n    TextArea: TextArea,\n    Empty: \"div\",\n};\n\nconst getFormItem = (formField: FormFieldsType, onFieldsChange: React.FormEventHandler | null): ReactNode => {\n    const { as: elementName, ...formFieldProps } = formField;\n\n    return (\n        <Element\n            as={FormElements[elementName] || InputField}\n            {...formFieldProps}\n            isFullWidth\n            // disabled={disabledIds.includes(formFieldProps.id)}\n            onChange={onFieldsChange}\n        ></Element>\n    );\n};\n\nexport const generateFormThroughConfig = (\n    fields: FormFieldsConfig[],\n    onFieldsChange: React.FormEventHandler | null,\n    spacing: SpacingTypes\n): ReactNode => {\n    let formChildren: ReactNode[] = [];\n\n    for (const i in fields) {\n        const { desktopSpan, tabLSSpan, tabPTSpan, mobileSpan, isHorizontal, ...formField } = fields[i];\n\n        const portionPorps = {\n            desktopSpan,\n            tabLSSpan,\n            tabPTSpan,\n            mobileSpan,\n            isHorizontal,\n        };\n\n        formChildren.push(<Portion {...portionPorps} key={`fields-${i}`}>{getFormItem(formField, onFieldsChange)}</Portion>);\n    }\n    return <Row gutters={spacing}>{formChildren}</Row>;\n};\n"],"names":["FormElements","CheckBox","Switch","InputField","FileUpload","InputLabel","RadioButton","RadioGroup","Select","TextArea","Empty","getFormItem","formField","onFieldsChange","as","elementName","formFieldProps","React","Element","isFullWidth","onChange","fields","spacing","formChildren","i","_a","desktopSpan","tabLSSpan","tabPTSpan","mobileSpan","isHorizontal","portionPorps","push","Portion","key","Row","gutters"],"mappings":"8kCAwCA,MAAMA,EAAmD,CACrDC,SAAUA,WACVC,OAAQA,SACRC,WAAYA,aACZC,WAAYA,aACZC,WAAYA,aACZC,YAAaA,cACbC,WAAYA,aACZC,OAAQA,SACRC,SAAUA,WACVC,MAAO,OAGLC,EAAc,CAACC,EAA2BC,WACpCC,GAAIC,GAAmCH,EAAnBI,WAAmBJ,EAAzC,eAGFK,wBAACC,yBACGJ,GAAId,EAAae,IAAgBZ,cAC7Ba,GACJG,eAEAC,SAAUP,wCAKmB,CACrCQ,EACAR,EACAS,SAEIC,EAA4B,OAE3B,MAAMC,KAAKH,EAAQ,OACdI,EAAgFJ,EAAOG,IAAvFE,YAAEA,EAAFC,UAAeA,EAAfC,UAA0BA,EAA1BC,WAAqCA,EAArCC,aAAiDA,KAAiBlB,aAAlE,qEAEAmB,EAAe,CACjBL,YAAAA,EACAC,UAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,aAAAA,GAGJP,EAAaS,KAAKf,wBAACgB,2BAAYF,GAAcG,cAAeV,MAAMb,EAAYC,EAAWC,YAEtFI,wBAACkB,OAAIC,QAASd,GAAUC"}
+{"version":3,"file":"FormGenerator.js","sources":["../../../../../src/components/Form/FormWrapper/FormGenerator.tsx"],"sourcesContent":["import React, { ElementType, ReactNode } from \"react\";\n\nimport { Element } from \"../../Element/Element\";\nimport { ElementProps, SpacingTypes } from \"../../Element/constants\";\n\nimport { Row } from \"../../Row/Row\";\nimport { PortionProps, Portion } from \"../../Portion/Portion\";\nimport { InputLabel, InputLabelCustomProps } from \"../InputLabel/InputLabel\";\nimport { InputCommonProps } from \"../BaseInputComponent/constants\";\nimport { InputField } from \"../InputField/InputField\";\nimport { FileUpload } from \"../InputField/FileUpload\";\nimport { CheckBox } from \"../CheckBox/CheckBox\";\nimport { Switch } from \"../CheckBox/Switch\";\nimport { RadioButton } from \"../RadioButton/RadioButton\";\nimport { RadioGroup } from \"../RadioButton/RadioGroup\";\nimport { Select } from \"../Select/Select\";\nimport { TextArea } from \"../TextArea/TextArea\";\nimport { RadioGroupOption } from \"../RadioButton/constants\";\n\n// Types\nexport type FormFieldsType = ElementProps<HTMLInputElement> &\n    ElementProps<HTMLSelectElement> &\n    ElementProps<HTMLTextAreaElement> &\n    InputLabelCustomProps &\n    InputCommonProps;\nexport type FormFieldsConfigBase = PortionProps & FormFieldsType;\n\ninterface FormFieldOptionsType extends RadioGroupOption {\n    id: string;\n    label: string;\n    value: string;\n}\n\nexport interface FormFieldsConfig extends FormFieldsConfigBase {\n    as: ElementType;\n    options?: FormFieldOptionsType[];\n}\n\n// Supported Form elements for \"as\" prop in config\nconst FormElements: Record<string, ElementType> = {\n    CheckBox: CheckBox,\n    Switch: Switch,\n    InputField: InputField,\n    FileUpload: FileUpload,\n    InputLabel: InputLabel,\n    RadioButton: RadioButton,\n    RadioGroup: RadioGroup,\n    Select: Select,\n    TextArea: TextArea,\n    Empty: \"div\",\n};\n\nconst getFormItem = (formField: FormFieldsType, onFieldsChange: React.FormEventHandler | null): ReactNode => {\n    const { as: elementName, ...formFieldProps } = formField;\n\n    return (\n        <Element\n            as={FormElements[elementName as keyof typeof FormElements] || InputField}\n            {...formFieldProps}\n            isFullWidth\n            // disabled={disabledIds.includes(formFieldProps.id)}\n            onChange={onFieldsChange}\n        />\n    );\n};\n\nexport const generateFormThroughConfig = (\n    fields: FormFieldsConfig[],\n    onFieldsChange: React.FormEventHandler | null,\n    spacing: SpacingTypes\n): ReactNode => {\n    let formChildren: ReactNode[] = [];\n\n    for (const i in fields) {\n        const { desktopSpan, tabletLandscape, tabletPortraitSpan, mobileSpan, isHorizontal, ...formField } = fields[i];\n\n        const portionProps = {\n            desktopSpan,\n            tabletLandscape,\n            tabletPortraitSpan,\n            mobileSpan,\n            isHorizontal,\n        };\n\n        formChildren.push(<Portion {...portionProps} key={`fields-${i}`}>{getFormItem(formField, onFieldsChange)}</Portion>);\n    }\n    return <Row gutters={spacing}>{formChildren}</Row>;\n};\n"],"names":["FormElements","CheckBox","Switch","InputField","FileUpload","InputLabel","RadioButton","RadioGroup","Select","TextArea","Empty","getFormItem","formField","onFieldsChange","as","elementName","formFieldProps","React","Element","isFullWidth","onChange","fields","spacing","formChildren","i","_a","desktopSpan","tabletLandscape","tabletPortraitSpan","mobileSpan","isHorizontal","portionProps","push","Portion","key","Row","gutters"],"mappings":"8kCAuCA,MAAMA,EAA4C,CAC9CC,SAAUA,WACVC,OAAQA,SACRC,WAAYA,aACZC,WAAYA,aACZC,WAAYA,aACZC,YAAaA,cACbC,WAAYA,aACZC,OAAQA,SACRC,SAAUA,WACVC,MAAO,OAGLC,EAAc,CAACC,EAA2BC,WACpCC,GAAIC,GAAmCH,EAAnBI,WAAmBJ,EAAzC,eAGFK,wBAACC,yBACGJ,GAAId,EAAae,IAA6CZ,cAC1Da,GACJG,eAEAC,SAAUP,wCAKmB,CACrCQ,EACAR,EACAS,SAEIC,EAA4B,OAE3B,MAAMC,KAAKH,EAAQ,OACdI,EAA+FJ,EAAOG,IAAtGE,YAAEA,EAAFC,gBAAeA,EAAfC,mBAAgCA,EAAhCC,WAAoDA,EAApDC,aAAgEA,KAAiBlB,aAAjF,oFAEAmB,EAAe,CACjBL,YAAAA,EACAC,gBAAAA,EACAC,mBAAAA,EACAC,WAAAA,EACAC,aAAAA,GAGJP,EAAaS,KAAKf,wBAACgB,2BAAYF,GAAcG,cAAeV,MAAMb,EAAYC,EAAWC,YAEtFI,wBAACkB,OAAIC,QAASd,GAAUC"}

package/dist/cjs/components/Form/FormWrapper/FormWrapper.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../external/Element.js"),r=require("react"),t=require("../../Callout/Callout.js"),o=require("./FormWrapper.styled.js"),s=require("./FormGenerator.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../Typography/Text.js"),require("../../Callout/Callout.styled.js"),require("../../../external/transparentize.js"),require("../../../external/rgba.js"),require("../../../external/DefaultColours.js"),require("styled-components"),require("../FormItem/FormItem.styled.js"),require("../InputField/InputField.styled.js"),require("../Select/Select.styled.js"),require("../TextArea/TextArea.styled.js"),require("../FormItemGroup/FormItemGroup.styled.js"),require("../../Row/Row.js"),require("../../Row/Row.styled.js"),require("../../Portion/Portion.styled.js"),require("../../Portion/Portion.js"),require("../InputField/InputField.js"),require("../BaseInputComponent/BaseInputComponent.js"),require("../InputLabel/InputLabel.js"),require("../FormItem/FormItem.js"),require("../InputField/FileUpload.js"),require("../CheckBox/CheckBox.js"),require("../CheckBox/CheckBox.styled.js"),require("../CheckBox/Switch.js"),require("../RadioButton/RadioButton.js"),require("../RadioButton/RadioButton.styled.js"),require("../RadioButton/RadioGroup.js"),require("../Select/Select.js"),require("../TextArea/TextArea.js");var i=/*#__PURE__*/u(r);const l=i.default.forwardRef(((r,u)=>{var{spacing:l="small",fields:a,onFieldsChange:n,children:d,errorText:j}=r,p=e.__rest(r,["spacing","fields","onFieldsChange","children","errorText"]);let q=[];return l&&q.push(`spacing-${l}`),a&&a.length>0&&(d=[s.generateFormThroughConfig(a,n,l),d]),i.default.createElement(e.Element,Object.assign({as:o.FormWrapperStyled,ref:u,classNames:q},p),d,j&&i.default.createElement(t.Callout,{kind:"error"},j))}));exports.FormWrapper=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../external/Element.js"),r=require("react"),t=require("../../Callout/Callout.js"),o=require("./FormWrapper.styled.js"),s=require("./FormGenerator.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../Typography/Text.js"),require("../../Callout/Callout.styled.js"),require("../../../external/transparentize.js"),require("../../../external/rgba.js"),require("../../../external/DefaultColours.js"),require("styled-components"),require("../FormItem/FormItem.styled.js"),require("../InputField/InputField.styled.js"),require("../Select/Select.styled.js"),require("../TextArea/TextArea.styled.js"),require("../FormItemGroup/FormItemGroup.styled.js"),require("../../Row/Row.js"),require("../../Row/Row.styled.js"),require("../../Portion/Portion.styled.js"),require("../../Portion/Portion.js"),require("../InputLabel/InputLabel.js"),require("../InputField/InputField.js"),require("../BaseInputComponent/BaseInputComponent.js"),require("../FormItem/FormItem.js"),require("../InputField/FileUpload.js"),require("../CheckBox/CheckBox.js"),require("../CheckBox/CheckBox.styled.js"),require("../CheckBox/Switch.js"),require("../RadioButton/RadioButton.js"),require("../RadioButton/RadioButton.styled.js"),require("../RadioButton/RadioGroup.js"),require("../Select/Select.js"),require("../TextArea/TextArea.js");var i=/*#__PURE__*/u(r);const l=i.default.forwardRef(((r,u)=>{var{spacing:l="small",fields:a,onFieldsChange:n,children:d,errorText:j}=r,p=e.__rest(r,["spacing","fields","onFieldsChange","children","errorText"]);let q=[];return l&&q.push(`spacing-${l}`),a&&a.length>0&&(d=[s.generateFormThroughConfig(a,n,l),d]),i.default.createElement(e.Element,Object.assign({as:o.FormWrapperStyled,ref:u,classNames:q},p),d,j&&i.default.createElement(t.Callout,{kind:"error"},j))}));exports.FormWrapper=l;
 //# sourceMappingURL=FormWrapper.js.map

package/dist/cjs/components/Form/RadioButton/RadioButton.styled.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=/*#__PURE__*/e(require("styled-components")).default.div.withConfig({displayName:"RadioButtonStyled",componentId:"-pun9kn"})`display:inline-flex;margin-right:24px;& label::before{width:16px;height:16px;left:0;border-radius:50%;background:${e=>e.theme.radioButton.inset.default.bg};}&:hover label::before{background:${e=>e.theme.radioButton.inset.onHover.bg};}& label::after{opacity:0;left:4px;top:4px;width:8px;height:8px;background:${e=>e.theme.radioButton.circle.default.bg};border-radius:50%;}&:checked + label::before,input[type="radio"]:checked + label::before{background:${e=>e.theme.radioButton.inset.isSelected.bg};}&:checked + label::after,input[type="radio"]:checked + label::after{opacity:1;}&:only-of-type{margin-right:0;}& label{display:inline-block;position:relative;font-family:${e=>e.theme.text.font.sans};color:${e=>e.theme.text.paras.color};cursor:pointer;vertical-align:middle;line-height:1.1;padding-left:24px;&::before,&::after{display:inline-block;position:absolute;content:"";transition:all 0.1s ease-out;}}&:disabled + label::before{background:${e=>e.theme.radioButton.inset.isDisabled.bg};box-shadow:inset 0 2px 8px -2px rgba(0, 0, 0, 0.24);}`;exports.RadioButtonStyled=t;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=/*#__PURE__*/e(require("styled-components")).default.div.withConfig({displayName:"RadioButtonStyled",componentId:"-pun9kn"})`display:inline-flex;margin-right:24px;input[type="radio"]{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);}& label::before{width:16px;height:16px;left:0;border-radius:50%;background:${e=>e.theme.radioButton.inset.default.bg};}&:hover label::before{background:${e=>e.theme.radioButton.inset.onHover.bg};}& label::after{opacity:0;left:4px;top:4px;width:8px;height:8px;background:${e=>e.theme.radioButton.circle.default.bg};border-radius:50%;}&:checked + label::before,input[type="radio"]:checked + label::before{background:${e=>e.theme.radioButton.inset.isSelected.bg};}&:checked + label::after,input[type="radio"]:checked + label::after{opacity:1;}&:focus + label::before,input[type="radio"]:focus + label::before{outline:solid 2px ${e=>e.theme.radioButton.inset.isSelected.bg};}&:only-of-type{margin-right:0;}& label{display:inline-block;position:relative;font-family:${e=>e.theme.text.font.sans};color:${e=>e.theme.text.paras.color};cursor:pointer;vertical-align:middle;line-height:1.1;padding-left:24px;&::before,&::after{display:inline-block;position:absolute;content:"";transition:all 0.1s ease-out;}}&:disabled + label::before{background:${e=>e.theme.radioButton.inset.isDisabled.bg};box-shadow:inset 0 2px 8px -2px rgba(0, 0, 0, 0.24);}`;exports.RadioButtonStyled=t;
 //# sourceMappingURL=RadioButton.styled.js.map

package/dist/cjs/components/Form/RadioButton/RadioButton.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.styled.js","sources":["../../../../../src/components/Form/RadioButton/RadioButton.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { RadioButtonProps } from \"./constants\";\n\n\nexport const RadioButtonStyled = styled.div`\n    display      : inline-flex;\n    margin-right : 24px;\n\n    /*  The grey outer circle  */\n    & label::before {\n        width         : 16px;\n        height        : 16px;\n        /* top           : 4px; */\n        left          : 0;\n        border-radius : 50%;\n        background    : ${(props: RadioButtonProps) => props.theme.radioButton.inset.default.bg};\n    }\n\n    &:hover label::before { background : ${(props: RadioButtonProps) => props.theme.radioButton.inset.onHover.bg}; }\n\n    /*  The white inner circle  */\n    & label::after {\n        opacity       : 0;\n        left          : 4px;\n        top           : 4px;\n        width         : 8px;\n        height        : 8px;\n        background    : ${(props: RadioButtonProps) => props.theme.radioButton.circle.default.bg};\n        border-radius : 50%;\n    }\n\n    &:checked + label::before,\n    input[type=\"radio\"]:checked + label::before { \n        background : ${(props: RadioButtonProps) => props.theme.radioButton.inset.isSelected.bg};\n    }\n\n    &:checked + label::after,\n    input[type=\"radio\"]:checked + label::after { opacity : 1; }\n\n    &:only-of-type { margin-right : 0; }\n\n    & label {\n        display        : inline-block;\n        position       : relative;\n        font-family    : ${(props: RadioButtonProps) => props.theme.text.font.sans};\n        color          : ${(props: RadioButtonProps) => props.theme.text.paras.color};\n        cursor         : pointer;\n        vertical-align : middle;\n        line-height    : 1.1;\n        padding-left   : 24px;\n\n        &::before,\n        &::after {\n            display    : inline-block;\n            position   : absolute;\n            content    : \"\";\n            transition : all 0.1s ease-out;\n        }\n    }\n\n    /*  The grey square  */\n    &:disabled + label::before {\n        background     : ${(props: RadioButtonProps) => props.theme.radioButton.inset.isDisabled.bg};\n        box-shadow     : inset 0 2px 8px -2px rgba(0, 0, 0, 0.24);\n    }\n`\n"],"names":["RadioButtonStyled","div","props","theme","radioButton","inset","default","bg","onHover","circle","isSelected","text","font","sans","paras","color","isDisabled"],"mappings":"kJAKaA,uDAA2BC,2LAWbC,GAA4BA,EAAMC,MAAMC,YAAYC,MAAMC,QAAQC,wCAGjDL,GAA4BA,EAAMC,MAAMC,YAAYC,MAAMG,QAAQD,iFASnFL,GAA4BA,EAAMC,MAAMC,YAAYK,OAAOH,QAAQC,0GAMtEL,GAA4BA,EAAMC,MAAMC,YAAYC,MAAMK,WAAWH,gLAWjEL,GAA4BA,EAAMC,MAAMQ,KAAKC,KAAKC,cAClDX,GAA4BA,EAAMC,MAAMQ,KAAKG,MAAMC,0NAiBnDb,GAA4BA,EAAMC,MAAMC,YAAYC,MAAMW,WAAWT"}
+{"version":3,"file":"RadioButton.styled.js","sources":["../../../../../src/components/Form/RadioButton/RadioButton.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { RadioButtonProps } from \"./constants\";\n\n\nexport const RadioButtonStyled = styled.div`\n    display      : inline-flex;\n    margin-right : 24px;\n\n    input[type=\"radio\"] {\n        position : absolute;\n        height   : 1px;\n        width    : 1px;\n        overflow : hidden;\n        clip     : rect(1px 1px 1px 1px); /* IE6, IE7 */\n        clip     : rect(1px, 1px, 1px, 1px);\n    }\n\n    /*  The grey outer circle  */\n\n    & label::before {\n        width         : 16px;\n        height        : 16px;\n        /* top           : 4px; */\n        left          : 0;\n        border-radius : 50%;\n        background    : ${(props : RadioButtonProps) => props.theme.radioButton.inset.default.bg};\n    }\n\n    &:hover label::before {\n        background : ${(props : RadioButtonProps) => props.theme.radioButton.inset.onHover.bg};\n    }\n\n    /*  The white inner circle  */\n\n    & label::after {\n        opacity       : 0;\n        left          : 4px;\n        top           : 4px;\n        width         : 8px;\n        height        : 8px;\n        background    : ${(props : RadioButtonProps) => props.theme.radioButton.circle.default.bg};\n        border-radius : 50%;\n    }\n\n    &:checked + label::before,\n    input[type=\"radio\"]:checked + label::before {\n        background : ${(props : RadioButtonProps) => props.theme.radioButton.inset.isSelected.bg};\n    }\n\n    &:checked + label::after,\n    input[type=\"radio\"]:checked + label::after {\n        opacity : 1;\n    }\n\n\n    &:focus + label::before,\n    input[type=\"radio\"]:focus + label::before {\n        outline : solid 2px ${(props : RadioButtonProps) => props.theme.radioButton.inset.isSelected.bg};\n    }\n\n    &:only-of-type {\n        margin-right : 0;\n    }\n\n    & label {\n        display        : inline-block;\n        position       : relative;\n        font-family    : ${(props : RadioButtonProps) => props.theme.text.font.sans};\n        color          : ${(props : RadioButtonProps) => props.theme.text.paras.color};\n        cursor         : pointer;\n        vertical-align : middle;\n        line-height    : 1.1;\n        padding-left   : 24px;\n\n        &::before,\n        &::after {\n            display    : inline-block;\n            position   : absolute;\n            content    : \"\";\n            transition : all 0.1s ease-out;\n        }\n    }\n\n    /*  The grey square  */\n\n    &:disabled + label::before {\n        background : ${(props : RadioButtonProps) => props.theme.radioButton.inset.isDisabled.bg};\n        box-shadow : inset 0 2px 8px -2px rgba(0, 0, 0, 0.24);\n    }\n`;\n"],"names":["RadioButtonStyled","div","props","theme","radioButton","inset","default","bg","onHover","circle","isSelected","text","font","sans","paras","color","isDisabled"],"mappings":"kJAKaA,uDAA2BC,gUAqBbC,GAA6BA,EAAMC,MAAMC,YAAYC,MAAMC,QAAQC,wCAItEL,GAA6BA,EAAMC,MAAMC,YAAYC,MAAMG,QAAQD,iFAWhEL,GAA6BA,EAAMC,MAAMC,YAAYK,OAAOH,QAAQC,0GAMvEL,GAA6BA,EAAMC,MAAMC,YAAYC,MAAMK,WAAWH,0KAW/DL,GAA6BA,EAAMC,MAAMC,YAAYC,MAAMK,WAAWH,iGAUzEL,GAA6BA,EAAMC,MAAMQ,KAAKC,KAAKC,cACnDX,GAA6BA,EAAMC,MAAMQ,KAAKG,MAAMC,0NAkBxDb,GAA6BA,EAAMC,MAAMC,YAAYC,MAAMW,WAAWT"}

package/dist/cjs/components/Form/Select/Select.styled.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var t=/*#__PURE__*/e(require("styled-components"));const o=t.default.div.withConfig({displayName:"SelectWrapperStyled",componentId:"-zuatoe"})`position:relative;width:max-content;align-self:flex-start;&::after{content:"";display:inline-block;position:absolute;top:50%;right:12px;width:10px;height:10px;border-style:solid;border-width:0 2px 2px 0;transform:translateY(-50%)rotate(45deg);color:${e=>e.theme.select.chevron};transition:transform 0.2s linear;z-index:500;pointer-events:none;}&[disabled]::after{color:${e=>e.theme.inputField.isReadOnly.text};}`,i=t.default.select.withConfig({displayName:"SelectStyled",componentId:"-1o98hth"})`display:flex;height:100%;padding:12px 36px 12px 8px;font-family:${e=>e.theme.text.font.sans};background-color:${e=>e.theme.inputField.default.bg};border-radius:4px;align-items:center;border:1px solid ${e=>e.theme.inputField.default.border};width:100%;`;exports.SelectStyled=i,exports.SelectWrapperStyled=o;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var t=/*#__PURE__*/e(require("styled-components"));const o=t.default.div.withConfig({displayName:"SelectWrapperStyled",componentId:"-zuatoe"})`position:relative;width:max-content;align-self:flex-start;&::after{content:"";display:inline-block;position:absolute;top:50%;right:12px;width:10px;height:10px;border-style:solid;border-width:0 2px 2px 0;transform:translateY(-50%)rotate(45deg);color:${e=>e.theme.select.chevron};transition:transform 0.2s linear;z-index:500;pointer-events:none;}&[disabled]::after{color:${e=>e.theme.inputField.isReadOnly.text};}`,i=t.default.select.withConfig({displayName:"SelectStyled",componentId:"-1o98hth"})`display:flex;height:100%;padding:12px 36px 12px 8px;font-family:${e=>e.theme.text.font.sans};background-color:${e=>e.theme.inputField.default.bg};border-radius:4px;align-items:center;border:1px solid ${e=>e.theme.inputField.default.border};width:100%;&:focus{background-color:${e=>e.theme.inputField.onFocus.bg};border:2px solid ${e=>e.theme.inputField.onFocus.border};padding:11px 35px 11px 7px;}`;exports.SelectStyled=i,exports.SelectWrapperStyled=o;
 //# sourceMappingURL=Select.styled.js.map

package/dist/cjs/components/Form/Select/Select.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styled.js","sources":["../../../../../src/components/Form/Select/Select.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { SelectProps } from \"./Select\";\n\n\nexport const SelectWrapperStyled = styled.div`\n    position   : relative;\n    width      : max-content;\n    align-self : flex-start;\n\n    &::after {\n        content        : \"\";\n        display        : inline-block;\n        position       : absolute;\n        top            : 50%;\n        right          : 12px;\n        width          : 10px;\n        height         : 10px;\n        border-style   : solid;\n        border-width   : 0 2px 2px 0;\n        transform      : translateY(-50%) rotate(45deg);\n        color          : ${(props: SelectProps) => props.theme.select.chevron};\n        transition     : transform 0.2s linear;\n        z-index        : 500;\n        pointer-events : none;\n    }\n\n    &[disabled]::after {\n        color : ${(props: SelectProps) => props.theme.inputField.isReadOnly.text};\n    }\n`;\n\nexport const SelectStyled = styled.select`\n    display          : flex;\n    height           : 100%;\n    padding          : 12px 36px 12px 8px;\n    font-family      : ${(props: SelectProps) => props.theme.text.font.sans};\n    background-color : ${(props: SelectProps) => props.theme.inputField.default.bg};\n    border-radius    : 4px;\n    align-items      : center;\n    border           : 1px solid ${(props: SelectProps) => props.theme.inputField.default.border};\n    width            : 100%;\n`;\n"],"names":["SelectWrapperStyled","styled","div","props","theme","select","chevron","inputField","isReadOnly","text","SelectStyled","font","sans","default","bg","border"],"mappings":"qMAKaA,EAAsBC,UAAOC,qUAgBdC,GAAuBA,EAAMC,MAAMC,OAAOC,sGAOnDH,GAAuBA,EAAMC,MAAMG,WAAWC,WAAWC,SAI/DC,EAAeT,UAAOI,yIAITF,GAAuBA,EAAMC,MAAMK,KAAKE,KAAKC,yBAC7CT,GAAuBA,EAAMC,MAAMG,WAAWM,QAAQC,4DAG5CX,GAAuBA,EAAMC,MAAMG,WAAWM,QAAQE"}
+{"version":3,"file":"Select.styled.js","sources":["../../../../../src/components/Form/Select/Select.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { SelectProps } from \"./Select\";\n\n\nexport const SelectWrapperStyled = styled.div`\n    position   : relative;\n    width      : max-content;\n    align-self : flex-start;\n\n    &::after {\n        content        : \"\";\n        display        : inline-block;\n        position       : absolute;\n        top            : 50%;\n        right          : 12px;\n        width          : 10px;\n        height         : 10px;\n        border-style   : solid;\n        border-width   : 0 2px 2px 0;\n        transform      : translateY(-50%) rotate(45deg);\n        color          : ${(props: SelectProps) => props.theme.select.chevron};\n        transition     : transform 0.2s linear;\n        z-index        : 500;\n        pointer-events : none;\n    }\n\n    &[disabled]::after {\n        color : ${(props: SelectProps) => props.theme.inputField.isReadOnly.text};\n    }\n`;\n\nexport const SelectStyled = styled.select`\n    display          : flex;\n    height           : 100%;\n    padding          : 12px 36px 12px 8px;\n    font-family      : ${(props: SelectProps) => props.theme.text.font.sans};\n    background-color : ${(props: SelectProps) => props.theme.inputField.default.bg};\n    border-radius    : 4px;\n    align-items      : center;\n    border           : 1px solid ${(props: SelectProps) => props.theme.inputField.default.border};\n    width            : 100%;\n\n    &:focus {\n        background-color : ${(props: SelectProps) => props.theme.inputField.onFocus.bg};\n        border           : 2px solid ${(props: SelectProps) => props.theme.inputField.onFocus.border};\n        padding          : 11px 35px 11px 7px;\n    }\n`;\n"],"names":["SelectWrapperStyled","styled","div","props","theme","select","chevron","inputField","isReadOnly","text","SelectStyled","font","sans","default","bg","border","onFocus"],"mappings":"qMAKaA,EAAsBC,UAAOC,qUAgBdC,GAAuBA,EAAMC,MAAMC,OAAOC,sGAOnDH,GAAuBA,EAAMC,MAAMG,WAAWC,WAAWC,SAI/DC,EAAeT,UAAOI,yIAITF,GAAuBA,EAAMC,MAAMK,KAAKE,KAAKC,yBAC7CT,GAAuBA,EAAMC,MAAMG,WAAWM,QAAQC,4DAG5CX,GAAuBA,EAAMC,MAAMG,WAAWM,QAAQE,8CAI5DZ,GAAuBA,EAAMC,MAAMG,WAAWS,QAAQF,uBAC5CX,GAAuBA,EAAMC,MAAMG,WAAWS,QAAQD"}

package/dist/cjs/components/Portion/Portion.d.ts

@@ -2,8 +2,8 @@ import React from "react";
 import { CommonAndHTMLProps } from "../Element/constants";
 export interface PortionCustomProps {
     desktopSpan?: string;
-    tabPTSpan?: string;
-    tabLSSpan?: string;
+    tabletLandscape?: string;
+    tabletPortraitSpan?: string;
     mobileSpan?: string;
     isHorizontal?: boolean;
 }

package/dist/cjs/components/Portion/Portion.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../external/Element.js"),t=require("react"),a=require("./Portion.styled.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("styled-components");var o=/*#__PURE__*/r(t);const n=o.default.forwardRef(((t,r)=>{var{desktopSpan:n,mobileSpan:s,tabLSSpan:l,tabPTSpan:i,isHorizontal:p}=t,u=e.__rest(t,["desktopSpan","mobileSpan","tabLSSpan","tabPTSpan","isHorizontal"]);let d=[];return n||l||i||s?(n&&d.push(`${n}`),l&&d.push(`${l}-on-tab-ls`),i&&d.push(`${i}-on-tab-pt`),s&&d.push(`${s}-on-mobile`)):d.push("whole"),p&&d.push("horizontal"),o.default.createElement(e.Element,Object.assign({as:a.PortionStyled,ref:r,classNames:d,isFullWidth:!0},u))}));exports.Portion=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../external/Element.js"),t=require("react"),a=require("./Portion.styled.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("styled-components");var o=/*#__PURE__*/r(t);const n=o.default.forwardRef(((t,r)=>{var{desktopSpan:n,mobileSpan:s,tabletLandscape:l,tabletPortraitSpan:i,isHorizontal:p}=t,u=e.__rest(t,["desktopSpan","mobileSpan","tabletLandscape","tabletPortraitSpan","isHorizontal"]);let d=[];return n||l||i||s?(n&&d.push(`${n}`),l&&d.push(`${l}-on-tablet-landscape`),i&&d.push(`${i}-on-tablet-portrait`),s&&d.push(`${s}-on-mobile`)):d.push("whole"),p&&d.push("horizontal"),o.default.createElement(e.Element,Object.assign({as:a.PortionStyled,ref:r,classNames:d,isFullWidth:!0},u))}));exports.Portion=n;
 //# sourceMappingURL=Portion.js.map

package/dist/cjs/components/Portion/Portion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portion.js","sources":["../../../../src/components/Portion/Portion.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\n\nimport { PortionStyled } from \"./Portion.styled\";\n\n// prettier-ignore\nexport interface PortionCustomProps {\n    desktopSpan  ? : string;\n    tabPTSpan    ? : string;\n    tabLSSpan    ? : string;\n    mobileSpan   ? : string;\n    isHorizontal ? : boolean;\n}\n\nexport type PortionElementType = HTMLDivElement;\nexport type PortionProps = Omit<CommonAndHTMLProps<PortionElementType>, keyof PortionCustomProps> & PortionCustomProps;\n\nexport const Portion = React.forwardRef(\n    (\n        { desktopSpan, mobileSpan, tabLSSpan, tabPTSpan, isHorizontal, ...props }: PortionProps,\n        ref: React.Ref<PortionElementType>\n    ) => {\n        let classNames = [];\n\n        if (desktopSpan || tabLSSpan || tabPTSpan || mobileSpan) {\n            if (desktopSpan) {\n                classNames.push(`${desktopSpan}`);\n            }\n\n            if (tabLSSpan) {\n                classNames.push(`${tabLSSpan}-on-tab-ls`);\n            }\n\n            if (tabPTSpan) {\n                classNames.push(`${tabPTSpan}-on-tab-pt`);\n            }\n\n            if (mobileSpan) {\n                classNames.push(`${mobileSpan}-on-mobile`);\n            }\n        } else {\n            classNames.push(\"whole\");\n        }\n\n        if (isHorizontal) {\n            classNames.push(\"horizontal\");\n        }\n\n        return (\n            <Element<PortionElementType> as={PortionStyled} ref={ref} classNames={classNames} isFullWidth {...props} />\n        );\n    }\n);\n"],"names":["Portion","React","forwardRef","_a","ref","desktopSpan","mobileSpan","tabLSSpan","tabPTSpan","isHorizontal","props","classNames","push","Element","as","PortionStyled","isFullWidth"],"mappings":"sSAmBaA,EAAUC,UAAMC,YACzB,CACIC,EACAC,SADAC,YAAEA,EAAFC,WAAeA,EAAfC,UAA2BA,EAA3BC,UAAsCA,EAAtCC,aAAiDA,KAAiBC,aAAlE,yEAGIC,EAAa,UAEbN,GAAeE,GAAaC,GAAaF,GACrCD,GACAM,EAAWC,QAAQP,KAGnBE,GACAI,EAAWC,QAAQL,eAGnBC,GACAG,EAAWC,QAAQJ,eAGnBF,GACAK,EAAWC,QAAQN,gBAGvBK,EAAWC,KAAK,SAGhBH,GACAE,EAAWC,KAAK,cAIhBX,wBAACY,yBAA4BC,GAAIC,gBAAeX,IAAKA,EAAKO,WAAYA,EAAYK,gBAAgBN"}
+{"version":3,"file":"Portion.js","sources":["../../../../src/components/Portion/Portion.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\n\nimport { PortionStyled } from \"./Portion.styled\";\n\n// prettier-ignore\nexport interface PortionCustomProps {\n    desktopSpan        ? : string;\n    tabletLandscape    ? : string;\n    tabletPortraitSpan ? : string;\n    mobileSpan         ? : string;\n    isHorizontal       ? : boolean;\n}\n\nexport type PortionElementType = HTMLDivElement;\nexport type PortionProps = Omit<CommonAndHTMLProps<PortionElementType>, keyof PortionCustomProps> & PortionCustomProps;\n\nexport const Portion = React.forwardRef(\n    (\n        { desktopSpan, mobileSpan, tabletLandscape, tabletPortraitSpan, isHorizontal, ...props }: PortionProps,\n        ref: React.Ref<PortionElementType>\n    ) => {\n        let classNames = [];\n\n        if (desktopSpan || tabletLandscape || tabletPortraitSpan || mobileSpan) {\n            if (desktopSpan) {\n                classNames.push(`${desktopSpan}`);\n            }\n\n            if (tabletLandscape) {\n                classNames.push(`${tabletLandscape}-on-tablet-landscape`);\n            }\n\n            if (tabletPortraitSpan) {\n                classNames.push(`${tabletPortraitSpan}-on-tablet-portrait`);\n            }\n\n            if (mobileSpan) {\n                classNames.push(`${mobileSpan}-on-mobile`);\n            }\n        } else {\n            classNames.push(\"whole\");\n        }\n\n        if (isHorizontal) {\n            classNames.push(\"horizontal\");\n        }\n\n        return (\n            <Element<PortionElementType> as={PortionStyled} ref={ref} classNames={classNames} isFullWidth {...props} />\n        );\n    }\n);\n"],"names":["Portion","React","forwardRef","_a","ref","desktopSpan","mobileSpan","tabletLandscape","tabletPortraitSpan","isHorizontal","props","classNames","push","Element","as","PortionStyled","isFullWidth"],"mappings":"sSAmBaA,EAAUC,UAAMC,YACzB,CACIC,EACAC,SADAC,YAAEA,EAAFC,WAAeA,EAAfC,gBAA2BA,EAA3BC,mBAA4CA,EAA5CC,aAAgEA,KAAiBC,aAAjF,wFAGIC,EAAa,UAEbN,GAAeE,GAAmBC,GAAsBF,GACpDD,GACAM,EAAWC,QAAQP,KAGnBE,GACAI,EAAWC,QAAQL,yBAGnBC,GACAG,EAAWC,QAAQJ,wBAGnBF,GACAK,EAAWC,QAAQN,gBAGvBK,EAAWC,KAAK,SAGhBH,GACAE,EAAWC,KAAK,cAIhBX,wBAACY,yBAA4BC,GAAIC,gBAAeX,IAAKA,EAAKO,WAAYA,EAAYK,gBAAgBN"}

package/dist/cjs/components/Portion/Portion.styled.js

@@ -1,2 +1,2 @@
-"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}Object.defineProperty(exports,"__esModule",{value:!0});const o=/*#__PURE__*/n(require("styled-components")).default.div.withConfig({displayName:"PortionStyled",componentId:"-17bdbfa"})`&.horizontal{display:flex;flex-direction:row;}&.\\31{grid-column:span 1;}&.one-twelfth,&.\\32{grid-column:span 2;}&.one-eighth,&.\\33{grid-column:span 3;}&.one-sixth,&.\\34{grid-column:span 4;}&.\\35{grid-column:span 5;}&.one-fourth,&.\\36{grid-column:span 6;}&.\\37{grid-column:span 7;}&.one-third,&.\\38{grid-column:span 8;}&.\\39{grid-column:span 9;}&.five-twelfth,&.\\31 0{grid-column:span 10;}&.\\31 1{grid-column:span 11;}&.half,&.\\31 2{grid-column:span 12;}&.\\31 3{grid-column:span 13;}&.seven-twelfth,&.\\31 4{grid-column:span 14;}&.\\31 5{grid-column:span 15;}&.two-third,&.\\31 6{grid-column:span 16;}&.\\31 7{grid-column:span 17;}&.three-fourth,&.\\31 8{grid-column:span 18;}&.\\31 9{grid-column:span 19;}&.five-sixth,&.\\32 0{grid-column:span 20;}&.seven-eighth,&.\\32 1{grid-column:span 21;}&.eleven-twelfth,&.\\32 2{grid-column:span 22;}&.\\32 3{grid-column:span 23;}&.whole,&.\\32 4{grid-column:span 24;}@media all and (max-width : 600px){&.\\31 -on-mobile{grid-column:span 1;}&.one-twelfth-on-mobile,&.\\32 -on-mobile{grid-column:span 2;}&.one-eighth-on-mobile,&.\\33 -on-mobile{grid-column:span 3;}&.one-sixth-on-mobile,&.\\34 -on-mobile{grid-column:span 4;}&.\\35 -on-mobile{grid-column:span 5;}&.one-fourth-on-mobile,&.\\36 -on-mobile{grid-column:span 6;}&.\\37 -on-mobile{grid-column:span 7;}&.one-third-on-mobile,&.\\38 -on-mobile{grid-column:span 8;}&.\\39 -on-mobile{grid-column:span 9;}&.five-twelfth-on-mobile,&.\\31 0-on-mobile{grid-column:span 10;}&.\\31 1-on-mobile{grid-column:span 11;}&.half-on-mobile,&.\\31 2-on-mobile{grid-column:span 12;}&.\\31 3-on-mobile{grid-column:span 13;}&.seven-twelfth-on-mobile,&.\\31 4-on-mobile{grid-column:span 14;}&.\\31 5-on-mobile{grid-column:span 15;}&.two-third-on-mobile,&.\\31 6-on-mobile{grid-column:span 16;}&.\\31 7-on-mobile{grid-column:span 17;}&.three-fourth-on-mobile,&.\\31 8-on-mobile{grid-column:span 18;}&.\\31 9-on-mobile{grid-column:span 19;}&.five-sixth-on-mobile,&.\\32 0-on-mobile{grid-column:span 20;}&.seven-eighth-on-mobile,&.\\32 1-on-mobile{grid-column:span 21;}&.eleven-twelfth-on-mobile,&.\\32 2-on-mobile{grid-column:span 22;}&.\\32 3-on-mobile{grid-column:span 23;}&.whole-on-mobile,&.\\32 4-on-mobile{grid-column:span 24;}}@media all and (min-width : 601px)and (max-width : 900px){&.\\31 -on-tab-pt{grid-column:span 1;}&.one-twelfth-on-tab-pt,&.\\32 -on-tab-pt{grid-column:span 2;}&.one-eighth-on-tab-pt,&.\\33 -on-tab-pt{grid-column:span 3;}&.one-sixth-on-tab-pt,&.\\34 -on-tab-pt{grid-column:span 4;}&.\\35 -on-tab-pt{grid-column:span 5;}&.one-fourth-on-tab-pt,&.\\36 -on-tab-pt{grid-column:span 6;}&.\\37 -on-tab-pt{grid-column:span 7;}&.one-third-on-tab-pt,&.\\38 -on-tab-pt{grid-column:span 8;}&.\\39 -on-tab-pt{grid-column:span 9;}&.five-twelfth-on-tab-pt,&.\\31 0-on-tab-pt{grid-column:span 10;}&.\\31 1-on-tab-pt{grid-column:span 11;}&.half-on-tab-pt,&.\\31 2-on-tab-pt{grid-column:span 12;}&.\\31 3-on-tab-pt{grid-column:span 13;}&.seven-twelfth-on-tab-pt,&.\\31 4-on-tab-pt{grid-column:span 14;}&.\\31 5-on-tab-pt{grid-column:span 15;}&.two-third-on-tab-pt,&.\\31 6-on-tab-pt{grid-column:span 16;}&.\\31 7-on-tab-pt{grid-column:span 17;}&.three-fourth-on-tab-pt,&.\\31 8-on-tab-pt{grid-column:span 18;}&.\\31 9-on-tab-pt{grid-column:span 19;}&.five-sixth-on-tab-pt,&.\\32 0-on-tab-pt{grid-column:span 20;}&.seven-eighth-on-tab-pt,&.\\32 1-on-tab-pt{grid-column:span 21;}&.eleven-twelfth-on-tab-pt,&.\\32 2-on-tab-pt{grid-column:span 22;}&.\\32 3-on-tab-pt{grid-column:span 23;}&.whole-on-tab-pt,&.\\32 4-on-tab-pt{grid-column:span 24;}}@media all and (min-width : 901px)and (max-width : 1200px){&.\\31 -on-tab-ls{grid-column:span 1;}&.one-twelfth-on-tab-ls,&.\\32 -on-tab-ls{grid-column:span 2;}&.one-eighth-on-tab-ls,&.\\33 -on-tab-ls{grid-column:span 3;}&.one-sixth-on-tab-ls,&.\\34 -on-tab-ls{grid-column:span 4;}&.\\35 -on-tab-ls{grid-column:span 5;}&.one-fourth-on-tab-ls,&.\\36 -on-tab-ls{grid-column:span 6;}&.\\37 -on-tab-ls{grid-column:span 7;}&.one-third-on-tab-ls,&.\\38 -on-tab-ls{grid-column:span 8;}&.\\39 -on-tab-ls{grid-column:span 9;}&.five-twelfth-on-tab-ls,&.\\31 0-on-tab-ls{grid-column:span 10;}&.\\31 1-on-tab-ls{grid-column:span 11;}&.half-on-tab-ls,&.\\31 2-on-tab-ls{grid-column:span 12;}&.\\31 3-on-tab-ls{grid-column:span 13;}&.seven-twelfth-on-tab-ls,&.\\31 4-on-tab-ls{grid-column:span 14;}&.\\31 5-on-tab-ls{grid-column:span 15;}&.two-third-on-tab-ls,&.\\31 6-on-tab-ls{grid-column:span 16;}&.\\31 7-on-tab-ls{grid-column:span 17;}&.three-fourth-on-tab-ls,&.\\31 8-on-tab-ls{grid-column:span 18;}&.\\31 9-on-tab-ls{grid-column:span 19;}&.five-sixth-on-tab-ls,&.\\32 0-on-tab-ls{grid-column:span 20;}&.seven-eighth-on-tab-ls,&.\\32 1-on-tab-ls{grid-column:span 21;}&.eleven-twelfth-on-tab-ls,&.\\32 2-on-tab-ls{grid-column:span 22;}&.\\32 3-on-tab-ls{grid-column:span 23;}&.whole-on-tab-ls,&.\\32 4-on-tab-ls{grid-column:span 24;}}`;exports.PortionStyled=o;
+"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}Object.defineProperty(exports,"__esModule",{value:!0});const o=/*#__PURE__*/n(require("styled-components")).default.div.withConfig({displayName:"PortionStyled",componentId:"-17bdbfa"})`&.horizontal{display:flex;flex-direction:row;}&.\\31{grid-column:span 1;}&.one-twelfth,&.\\32{grid-column:span 2;}&.one-eighth,&.\\33{grid-column:span 3;}&.one-sixth,&.\\34{grid-column:span 4;}&.\\35{grid-column:span 5;}&.one-fourth,&.\\36{grid-column:span 6;}&.\\37{grid-column:span 7;}&.one-third,&.\\38{grid-column:span 8;}&.\\39{grid-column:span 9;}&.five-twelfth,&.\\31 0{grid-column:span 10;}&.\\31 1{grid-column:span 11;}&.half,&.\\31 2{grid-column:span 12;}&.\\31 3{grid-column:span 13;}&.seven-twelfth,&.\\31 4{grid-column:span 14;}&.\\31 5{grid-column:span 15;}&.two-third,&.\\31 6{grid-column:span 16;}&.\\31 7{grid-column:span 17;}&.three-fourth,&.\\31 8{grid-column:span 18;}&.\\31 9{grid-column:span 19;}&.five-sixth,&.\\32 0{grid-column:span 20;}&.seven-eighth,&.\\32 1{grid-column:span 21;}&.eleven-twelfth,&.\\32 2{grid-column:span 22;}&.\\32 3{grid-column:span 23;}&.whole,&.\\32 4{grid-column:span 24;}@media all and (max-width : 600px){&.\\31 -on-mobile{grid-column:span 1;}&.one-twelfth-on-mobile,&.\\32 -on-mobile{grid-column:span 2;}&.one-eighth-on-mobile,&.\\33 -on-mobile{grid-column:span 3;}&.one-sixth-on-mobile,&.\\34 -on-mobile{grid-column:span 4;}&.\\35 -on-mobile{grid-column:span 5;}&.one-fourth-on-mobile,&.\\36 -on-mobile{grid-column:span 6;}&.\\37 -on-mobile{grid-column:span 7;}&.one-third-on-mobile,&.\\38 -on-mobile{grid-column:span 8;}&.\\39 -on-mobile{grid-column:span 9;}&.five-twelfth-on-mobile,&.\\31 0-on-mobile{grid-column:span 10;}&.\\31 1-on-mobile{grid-column:span 11;}&.half-on-mobile,&.\\31 2-on-mobile{grid-column:span 12;}&.\\31 3-on-mobile{grid-column:span 13;}&.seven-twelfth-on-mobile,&.\\31 4-on-mobile{grid-column:span 14;}&.\\31 5-on-mobile{grid-column:span 15;}&.two-third-on-mobile,&.\\31 6-on-mobile{grid-column:span 16;}&.\\31 7-on-mobile{grid-column:span 17;}&.three-fourth-on-mobile,&.\\31 8-on-mobile{grid-column:span 18;}&.\\31 9-on-mobile{grid-column:span 19;}&.five-sixth-on-mobile,&.\\32 0-on-mobile{grid-column:span 20;}&.seven-eighth-on-mobile,&.\\32 1-on-mobile{grid-column:span 21;}&.eleven-twelfth-on-mobile,&.\\32 2-on-mobile{grid-column:span 22;}&.\\32 3-on-mobile{grid-column:span 23;}&.whole-on-mobile,&.\\32 4-on-mobile{grid-column:span 24;}}@media all and (min-width : 601px)and (max-width : 900px){&.\\31 -on-tablet-portrait{grid-column:span 1;}&.one-twelfth-on-tablet-portrait,&.\\32 -on-tablet-portrait{grid-column:span 2;}&.one-eighth-on-tablet-portrait,&.\\33 -on-tablet-portrait{grid-column:span 3;}&.one-sixth-on-tablet-portrait,&.\\34 -on-tablet-portrait{grid-column:span 4;}&.\\35 -on-tablet-portrait{grid-column:span 5;}&.one-fourth-on-tablet-portrait,&.\\36 -on-tablet-portrait{grid-column:span 6;}&.\\37 -on-tablet-portrait{grid-column:span 7;}&.one-third-on-tablet-portrait,&.\\38 -on-tablet-portrait{grid-column:span 8;}&.\\39 -on-tablet-portrait{grid-column:span 9;}&.five-twelfth-on-tablet-portrait,&.\\31 0-on-tablet-portrait{grid-column:span 10;}&.\\31 1-on-tablet-portrait{grid-column:span 11;}&.half-on-tablet-portrait,&.\\31 2-on-tablet-portrait{grid-column:span 12;}&.\\31 3-on-tablet-portrait{grid-column:span 13;}&.seven-twelfth-on-tablet-portrait,&.\\31 4-on-tablet-portrait{grid-column:span 14;}&.\\31 5-on-tablet-portrait{grid-column:span 15;}&.two-third-on-tablet-portrait,&.\\31 6-on-tablet-portrait{grid-column:span 16;}&.\\31 7-on-tablet-portrait{grid-column:span 17;}&.three-fourth-on-tablet-portrait,&.\\31 8-on-tablet-portrait{grid-column:span 18;}&.\\31 9-on-tablet-portrait{grid-column:span 19;}&.five-sixth-on-tablet-portrait,&.\\32 0-on-tablet-portrait{grid-column:span 20;}&.seven-eighth-on-tablet-portrait,&.\\32 1-on-tablet-portrait{grid-column:span 21;}&.eleven-twelfth-on-tablet-portrait,&.\\32 2-on-tablet-portrait{grid-column:span 22;}&.\\32 3-on-tablet-portrait{grid-column:span 23;}&.whole-on-tablet-portrait,&.\\32 4-on-tablet-portrait{grid-column:span 24;}}@media all and (min-width : 901px)and (max-width : 1200px){&.\\31 -on-tablet-landscape{grid-column:span 1;}&.one-twelfth-on-tablet-landscape,&.\\32 -on-tablet-landscape{grid-column:span 2;}&.one-eighth-on-tablet-landscape,&.\\33 -on-tablet-landscape{grid-column:span 3;}&.one-sixth-on-tablet-landscape,&.\\34 -on-tablet-landscape{grid-column:span 4;}&.\\35 -on-tablet-landscape{grid-column:span 5;}&.one-fourth-on-tablet-landscape,&.\\36 -on-tablet-landscape{grid-column:span 6;}&.\\37 -on-tablet-landscape{grid-column:span 7;}&.one-third-on-tablet-landscape,&.\\38 -on-tablet-landscape{grid-column:span 8;}&.\\39 -on-tablet-landscape{grid-column:span 9;}&.five-twelfth-on-tablet-landscape,&.\\31 0-on-tablet-landscape{grid-column:span 10;}&.\\31 1-on-tablet-landscape{grid-column:span 11;}&.half-on-tablet-landscape,&.\\31 2-on-tablet-landscape{grid-column:span 12;}&.\\31 3-on-tablet-landscape{grid-column:span 13;}&.seven-twelfth-on-tablet-landscape,&.\\31 4-on-tablet-landscape{grid-column:span 14;}&.\\31 5-on-tablet-landscape{grid-column:span 15;}&.two-third-on-tablet-landscape,&.\\31 6-on-tablet-landscape{grid-column:span 16;}&.\\31 7-on-tablet-landscape{grid-column:span 17;}&.three-fourth-on-tablet-landscape,&.\\31 8-on-tablet-landscape{grid-column:span 18;}&.\\31 9-on-tablet-landscape{grid-column:span 19;}&.five-sixth-on-tablet-landscape,&.\\32 0-on-tablet-landscape{grid-column:span 20;}&.seven-eighth-on-tablet-landscape,&.\\32 1-on-tablet-landscape{grid-column:span 21;}&.eleven-twelfth-on-tablet-landscape,&.\\32 2-on-tablet-landscape{grid-column:span 22;}&.\\32 3-on-tablet-landscape{grid-column:span 23;}&.whole-on-tablet-landscape,&.\\32 4-on-tablet-landscape{grid-column:span 24;}}`;exports.PortionStyled=o;
 //# sourceMappingURL=Portion.styled.js.map

package/dist/cjs/components/Portion/Portion.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portion.styled.js","sources":["../../../../src/components/Portion/Portion.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const PortionStyled = styled.div`\n    &.horizontal { \n        display        : flex;\n        flex-direction : row;\n    }\n\n    &.\\\\31 { grid-column : span 1; }\n\n    &.one-twelfth,\n    &.\\\\32 { grid-column : span 2; }\n\n    &.one-eighth,\n    &.\\\\33 { grid-column : span 3; }\n\n    &.one-sixth,\n    &.\\\\34 { grid-column : span 4; }\n\n    &.\\\\35 { grid-column : span 5; }\n\n    &.one-fourth,\n    &.\\\\36 { grid-column : span 6; }\n\n    &.\\\\37 { grid-column : span 7; }\n\n    &.one-third,\n    &.\\\\38 { grid-column : span 8; }\n\n    &.\\\\39 { grid-column : span 9; }\n\n    &.five-twelfth,\n    &.\\\\31 0 { grid-column : span 10; }\n\n    &.\\\\31 1 { grid-column : span 11; }\n\n    &.half,\n    &.\\\\31 2 { grid-column : span 12; }\n\n    &.\\\\31 3 { grid-column : span 13; }\n\n    &.seven-twelfth,\n    &.\\\\31 4 { grid-column : span 14; }\n\n    &.\\\\31 5 { grid-column : span 15; }\n\n    &.two-third,\n    &.\\\\31 6 { grid-column : span 16; }\n\n    &.\\\\31 7 { grid-column : span 17; }\n\n    &.three-fourth,\n    &.\\\\31 8 { grid-column : span 18; }\n\n    &.\\\\31 9 { grid-column : span 19; }\n\n    &.five-sixth,\n    &.\\\\32 0 { grid-column : span 20; }\n\n    &.seven-eighth,\n    &.\\\\32 1 { grid-column : span 21; }\n\n    &.eleven-twelfth,\n    &.\\\\32 2 { grid-column : span 22; }\n\n    &.\\\\32 3 { grid-column : span 23; }\n\n    &.whole,\n    &.\\\\32 4 { grid-column : span 24; }\n\n\n\n    @media all and (max-width : 600px) {\n\n        &.\\\\31 -on-mobile { grid-column : span 1; }\n\n        &.one-twelfth-on-mobile,\n        &.\\\\32 -on-mobile { grid-column : span 2; }\n\n        &.one-eighth-on-mobile,\n        &.\\\\33 -on-mobile { grid-column : span 3; }\n\n        &.one-sixth-on-mobile,\n        &.\\\\34 -on-mobile { grid-column : span 4; }\n\n        &.\\\\35 -on-mobile { grid-column : span 5; }\n\n        &.one-fourth-on-mobile,\n        &.\\\\36 -on-mobile { grid-column : span 6; }\n\n        &.\\\\37 -on-mobile { grid-column : span 7; }\n\n        &.one-third-on-mobile,\n        &.\\\\38 -on-mobile { grid-column : span 8; }\n\n        &.\\\\39 -on-mobile { grid-column : span 9; }\n\n        &.five-twelfth-on-mobile,\n        &.\\\\31 0-on-mobile { grid-column : span 10; }\n\n        &.\\\\31 1-on-mobile { grid-column : span 11; }\n\n        &.half-on-mobile,\n        &.\\\\31 2-on-mobile { grid-column : span 12; }\n\n        &.\\\\31 3-on-mobile { grid-column : span 13; }\n\n        &.seven-twelfth-on-mobile,\n        &.\\\\31 4-on-mobile { grid-column : span 14; }\n\n        &.\\\\31 5-on-mobile { grid-column : span 15; }\n\n        &.two-third-on-mobile,\n        &.\\\\31 6-on-mobile { grid-column : span 16; }\n\n        &.\\\\31 7-on-mobile { grid-column : span 17; }\n\n        &.three-fourth-on-mobile,\n        &.\\\\31 8-on-mobile { grid-column : span 18; }\n\n        &.\\\\31 9-on-mobile { grid-column : span 19; }\n\n        &.five-sixth-on-mobile,\n        &.\\\\32 0-on-mobile { grid-column : span 20; }\n\n        &.seven-eighth-on-mobile,\n        &.\\\\32 1-on-mobile { grid-column : span 21; }\n\n        &.eleven-twelfth-on-mobile,\n        &.\\\\32 2-on-mobile { grid-column : span 22; }\n\n        &.\\\\32 3-on-mobile { grid-column : span 23; }\n\n        &.whole-on-mobile,\n        &.\\\\32 4-on-mobile { grid-column : span 24; }\n    }\n\n\n\n    @media all and (min-width : 601px) and (max-width : 900px) {\n\n        &.\\\\31 -on-tab-pt { grid-column : span 1; }\n\n        &.one-twelfth-on-tab-pt,\n        &.\\\\32 -on-tab-pt { grid-column : span 2; }\n\n        &.one-eighth-on-tab-pt,\n        &.\\\\33 -on-tab-pt { grid-column : span 3; }\n\n        &.one-sixth-on-tab-pt,\n        &.\\\\34 -on-tab-pt { grid-column : span 4; }\n\n        &.\\\\35 -on-tab-pt { grid-column : span 5; }\n\n        &.one-fourth-on-tab-pt,\n        &.\\\\36 -on-tab-pt { grid-column : span 6; }\n\n        &.\\\\37 -on-tab-pt { grid-column : span 7; }\n\n        &.one-third-on-tab-pt,\n        &.\\\\38 -on-tab-pt { grid-column : span 8; }\n\n        &.\\\\39 -on-tab-pt { grid-column : span 9; }\n\n        &.five-twelfth-on-tab-pt,\n        &.\\\\31 0-on-tab-pt { grid-column : span 10; }\n\n        &.\\\\31 1-on-tab-pt { grid-column : span 11; }\n\n        &.half-on-tab-pt,\n        &.\\\\31 2-on-tab-pt { grid-column : span 12; }\n\n        &.\\\\31 3-on-tab-pt { grid-column : span 13; }\n\n        &.seven-twelfth-on-tab-pt,\n        &.\\\\31 4-on-tab-pt { grid-column : span 14; }\n\n        &.\\\\31 5-on-tab-pt { grid-column : span 15; }\n\n        &.two-third-on-tab-pt,\n        &.\\\\31 6-on-tab-pt { grid-column : span 16; }\n\n        &.\\\\31 7-on-tab-pt { grid-column : span 17; }\n\n        &.three-fourth-on-tab-pt,\n        &.\\\\31 8-on-tab-pt { grid-column : span 18; }\n\n        &.\\\\31 9-on-tab-pt { grid-column : span 19; }\n\n        &.five-sixth-on-tab-pt,\n        &.\\\\32 0-on-tab-pt { grid-column : span 20; }\n\n        &.seven-eighth-on-tab-pt,\n        &.\\\\32 1-on-tab-pt { grid-column : span 21; }\n\n        &.eleven-twelfth-on-tab-pt,\n        &.\\\\32 2-on-tab-pt { grid-column : span 22; }\n\n        &.\\\\32 3-on-tab-pt { grid-column : span 23; }\n\n        &.whole-on-tab-pt,\n        &.\\\\32 4-on-tab-pt { grid-column : span 24; }\n    }\n\n\n\n    @media all and (min-width : 901px) and (max-width : 1200px) {\n        /* .row:not(.retain-layout-on-tab-ls) > &:not([class*='on-tab-ls']) { grid-column : span 24; } */\n\n        &.\\\\31 -on-tab-ls { grid-column : span 1; }\n\n        &.one-twelfth-on-tab-ls,\n        &.\\\\32 -on-tab-ls { grid-column : span 2; }\n\n        &.one-eighth-on-tab-ls,\n        &.\\\\33 -on-tab-ls { grid-column : span 3; }\n\n        &.one-sixth-on-tab-ls,\n        &.\\\\34 -on-tab-ls { grid-column : span 4; }\n\n        &.\\\\35 -on-tab-ls { grid-column : span 5; }\n\n        &.one-fourth-on-tab-ls,\n        &.\\\\36 -on-tab-ls { grid-column : span 6; }\n\n        &.\\\\37 -on-tab-ls { grid-column : span 7; }\n\n        &.one-third-on-tab-ls,\n        &.\\\\38 -on-tab-ls { grid-column : span 8; }\n\n        &.\\\\39 -on-tab-ls { grid-column : span 9; }\n\n        &.five-twelfth-on-tab-ls,\n        &.\\\\31 0-on-tab-ls { grid-column : span 10; }\n\n        &.\\\\31 1-on-tab-ls { grid-column : span 11; }\n\n        &.half-on-tab-ls,\n        &.\\\\31 2-on-tab-ls { grid-column : span 12; }\n\n        &.\\\\31 3-on-tab-ls { grid-column : span 13; }\n\n        &.seven-twelfth-on-tab-ls,\n        &.\\\\31 4-on-tab-ls { grid-column : span 14; }\n\n        &.\\\\31 5-on-tab-ls { grid-column : span 15; }\n\n        &.two-third-on-tab-ls,\n        &.\\\\31 6-on-tab-ls { grid-column : span 16; }\n\n        &.\\\\31 7-on-tab-ls { grid-column : span 17; }\n\n        &.three-fourth-on-tab-ls,\n        &.\\\\31 8-on-tab-ls { grid-column : span 18; }\n\n        &.\\\\31 9-on-tab-ls { grid-column : span 19; }\n\n        &.five-sixth-on-tab-ls,\n        &.\\\\32 0-on-tab-ls { grid-column : span 20; }\n\n        &.seven-eighth-on-tab-ls,\n        &.\\\\32 1-on-tab-ls { grid-column : span 21; }\n\n        &.eleven-twelfth-on-tab-ls,\n        &.\\\\32 2-on-tab-ls { grid-column : span 22; }\n\n        &.\\\\32 3-on-tab-ls { grid-column : span 23; }\n\n        &.whole-on-tab-ls,\n        &.\\\\32 4-on-tab-ls { grid-column : span 24; }\n    }\n`;\n"],"names":["PortionStyled","div"],"mappings":"kJAEaA,uDAAuBC"}
+{"version":3,"file":"Portion.styled.js","sources":["../../../../src/components/Portion/Portion.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const PortionStyled = styled.div`\n    &.horizontal { \n        display        : flex;\n        flex-direction : row;\n    }\n\n    &.\\\\31 { grid-column : span 1; }\n\n    &.one-twelfth,\n    &.\\\\32 { grid-column : span 2; }\n\n    &.one-eighth,\n    &.\\\\33 { grid-column : span 3; }\n\n    &.one-sixth,\n    &.\\\\34 { grid-column : span 4; }\n\n    &.\\\\35 { grid-column : span 5; }\n\n    &.one-fourth,\n    &.\\\\36 { grid-column : span 6; }\n\n    &.\\\\37 { grid-column : span 7; }\n\n    &.one-third,\n    &.\\\\38 { grid-column : span 8; }\n\n    &.\\\\39 { grid-column : span 9; }\n\n    &.five-twelfth,\n    &.\\\\31 0 { grid-column : span 10; }\n\n    &.\\\\31 1 { grid-column : span 11; }\n\n    &.half,\n    &.\\\\31 2 { grid-column : span 12; }\n\n    &.\\\\31 3 { grid-column : span 13; }\n\n    &.seven-twelfth,\n    &.\\\\31 4 { grid-column : span 14; }\n\n    &.\\\\31 5 { grid-column : span 15; }\n\n    &.two-third,\n    &.\\\\31 6 { grid-column : span 16; }\n\n    &.\\\\31 7 { grid-column : span 17; }\n\n    &.three-fourth,\n    &.\\\\31 8 { grid-column : span 18; }\n\n    &.\\\\31 9 { grid-column : span 19; }\n\n    &.five-sixth,\n    &.\\\\32 0 { grid-column : span 20; }\n\n    &.seven-eighth,\n    &.\\\\32 1 { grid-column : span 21; }\n\n    &.eleven-twelfth,\n    &.\\\\32 2 { grid-column : span 22; }\n\n    &.\\\\32 3 { grid-column : span 23; }\n\n    &.whole,\n    &.\\\\32 4 { grid-column : span 24; }\n\n\n\n    @media all and (max-width : 600px) {\n\n        &.\\\\31 -on-mobile { grid-column : span 1; }\n\n        &.one-twelfth-on-mobile,\n        &.\\\\32 -on-mobile { grid-column : span 2; }\n\n        &.one-eighth-on-mobile,\n        &.\\\\33 -on-mobile { grid-column : span 3; }\n\n        &.one-sixth-on-mobile,\n        &.\\\\34 -on-mobile { grid-column : span 4; }\n\n        &.\\\\35 -on-mobile { grid-column : span 5; }\n\n        &.one-fourth-on-mobile,\n        &.\\\\36 -on-mobile { grid-column : span 6; }\n\n        &.\\\\37 -on-mobile { grid-column : span 7; }\n\n        &.one-third-on-mobile,\n        &.\\\\38 -on-mobile { grid-column : span 8; }\n\n        &.\\\\39 -on-mobile { grid-column : span 9; }\n\n        &.five-twelfth-on-mobile,\n        &.\\\\31 0-on-mobile { grid-column : span 10; }\n\n        &.\\\\31 1-on-mobile { grid-column : span 11; }\n\n        &.half-on-mobile,\n        &.\\\\31 2-on-mobile { grid-column : span 12; }\n\n        &.\\\\31 3-on-mobile { grid-column : span 13; }\n\n        &.seven-twelfth-on-mobile,\n        &.\\\\31 4-on-mobile { grid-column : span 14; }\n\n        &.\\\\31 5-on-mobile { grid-column : span 15; }\n\n        &.two-third-on-mobile,\n        &.\\\\31 6-on-mobile { grid-column : span 16; }\n\n        &.\\\\31 7-on-mobile { grid-column : span 17; }\n\n        &.three-fourth-on-mobile,\n        &.\\\\31 8-on-mobile { grid-column : span 18; }\n\n        &.\\\\31 9-on-mobile { grid-column : span 19; }\n\n        &.five-sixth-on-mobile,\n        &.\\\\32 0-on-mobile { grid-column : span 20; }\n\n        &.seven-eighth-on-mobile,\n        &.\\\\32 1-on-mobile { grid-column : span 21; }\n\n        &.eleven-twelfth-on-mobile,\n        &.\\\\32 2-on-mobile { grid-column : span 22; }\n\n        &.\\\\32 3-on-mobile { grid-column : span 23; }\n\n        &.whole-on-mobile,\n        &.\\\\32 4-on-mobile { grid-column : span 24; }\n    }\n\n\n\n    @media all and (min-width : 601px) and (max-width : 900px) {\n\n        &.\\\\31 -on-tablet-portrait { grid-column : span 1; }\n\n        &.one-twelfth-on-tablet-portrait,\n        &.\\\\32 -on-tablet-portrait { grid-column : span 2; }\n\n        &.one-eighth-on-tablet-portrait,\n        &.\\\\33 -on-tablet-portrait { grid-column : span 3; }\n\n        &.one-sixth-on-tablet-portrait,\n        &.\\\\34 -on-tablet-portrait { grid-column : span 4; }\n\n        &.\\\\35 -on-tablet-portrait { grid-column : span 5; }\n\n        &.one-fourth-on-tablet-portrait,\n        &.\\\\36 -on-tablet-portrait { grid-column : span 6; }\n\n        &.\\\\37 -on-tablet-portrait { grid-column : span 7; }\n\n        &.one-third-on-tablet-portrait,\n        &.\\\\38 -on-tablet-portrait { grid-column : span 8; }\n\n        &.\\\\39 -on-tablet-portrait { grid-column : span 9; }\n\n        &.five-twelfth-on-tablet-portrait,\n        &.\\\\31 0-on-tablet-portrait { grid-column : span 10; }\n\n        &.\\\\31 1-on-tablet-portrait { grid-column : span 11; }\n\n        &.half-on-tablet-portrait,\n        &.\\\\31 2-on-tablet-portrait { grid-column : span 12; }\n\n        &.\\\\31 3-on-tablet-portrait { grid-column : span 13; }\n\n        &.seven-twelfth-on-tablet-portrait,\n        &.\\\\31 4-on-tablet-portrait { grid-column : span 14; }\n\n        &.\\\\31 5-on-tablet-portrait { grid-column : span 15; }\n\n        &.two-third-on-tablet-portrait,\n        &.\\\\31 6-on-tablet-portrait { grid-column : span 16; }\n\n        &.\\\\31 7-on-tablet-portrait { grid-column : span 17; }\n\n        &.three-fourth-on-tablet-portrait,\n        &.\\\\31 8-on-tablet-portrait { grid-column : span 18; }\n\n        &.\\\\31 9-on-tablet-portrait { grid-column : span 19; }\n\n        &.five-sixth-on-tablet-portrait,\n        &.\\\\32 0-on-tablet-portrait { grid-column : span 20; }\n\n        &.seven-eighth-on-tablet-portrait,\n        &.\\\\32 1-on-tablet-portrait { grid-column : span 21; }\n\n        &.eleven-twelfth-on-tablet-portrait,\n        &.\\\\32 2-on-tablet-portrait { grid-column : span 22; }\n\n        &.\\\\32 3-on-tablet-portrait { grid-column : span 23; }\n\n        &.whole-on-tablet-portrait,\n        &.\\\\32 4-on-tablet-portrait { grid-column : span 24; }\n    }\n\n\n\n    @media all and (min-width : 901px) and (max-width : 1200px) {\n        /* .row:not(.retain-layout-on-tablet-landscape) > &:not([class*='on-tablet-landscape']) { grid-column : span 24; } */\n\n        &.\\\\31 -on-tablet-landscape { grid-column : span 1; }\n\n        &.one-twelfth-on-tablet-landscape,\n        &.\\\\32 -on-tablet-landscape { grid-column : span 2; }\n\n        &.one-eighth-on-tablet-landscape,\n        &.\\\\33 -on-tablet-landscape { grid-column : span 3; }\n\n        &.one-sixth-on-tablet-landscape,\n        &.\\\\34 -on-tablet-landscape { grid-column : span 4; }\n\n        &.\\\\35 -on-tablet-landscape { grid-column : span 5; }\n\n        &.one-fourth-on-tablet-landscape,\n        &.\\\\36 -on-tablet-landscape { grid-column : span 6; }\n\n        &.\\\\37 -on-tablet-landscape { grid-column : span 7; }\n\n        &.one-third-on-tablet-landscape,\n        &.\\\\38 -on-tablet-landscape { grid-column : span 8; }\n\n        &.\\\\39 -on-tablet-landscape { grid-column : span 9; }\n\n        &.five-twelfth-on-tablet-landscape,\n        &.\\\\31 0-on-tablet-landscape { grid-column : span 10; }\n\n        &.\\\\31 1-on-tablet-landscape { grid-column : span 11; }\n\n        &.half-on-tablet-landscape,\n        &.\\\\31 2-on-tablet-landscape { grid-column : span 12; }\n\n        &.\\\\31 3-on-tablet-landscape { grid-column : span 13; }\n\n        &.seven-twelfth-on-tablet-landscape,\n        &.\\\\31 4-on-tablet-landscape { grid-column : span 14; }\n\n        &.\\\\31 5-on-tablet-landscape { grid-column : span 15; }\n\n        &.two-third-on-tablet-landscape,\n        &.\\\\31 6-on-tablet-landscape { grid-column : span 16; }\n\n        &.\\\\31 7-on-tablet-landscape { grid-column : span 17; }\n\n        &.three-fourth-on-tablet-landscape,\n        &.\\\\31 8-on-tablet-landscape { grid-column : span 18; }\n\n        &.\\\\31 9-on-tablet-landscape { grid-column : span 19; }\n\n        &.five-sixth-on-tablet-landscape,\n        &.\\\\32 0-on-tablet-landscape { grid-column : span 20; }\n\n        &.seven-eighth-on-tablet-landscape,\n        &.\\\\32 1-on-tablet-landscape { grid-column : span 21; }\n\n        &.eleven-twelfth-on-tablet-landscape,\n        &.\\\\32 2-on-tablet-landscape { grid-column : span 22; }\n\n        &.\\\\32 3-on-tablet-landscape { grid-column : span 23; }\n\n        &.whole-on-tablet-landscape,\n        &.\\\\32 4-on-tablet-landscape { grid-column : span 24; }\n    }\n`;\n"],"names":["PortionStyled","div"],"mappings":"kJAEaA,uDAAuBC"}

package/dist/cjs/components/Row/Row.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../external/Element.js"),e=require("react"),a=require("./Row.styled.js");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}require("styled-components"),require("../Portion/Portion.styled.js");var r=/*#__PURE__*/n(e);const o=r.default.forwardRef(((e,n)=>{var{sidePadding:o,gutters:i="medium",retainLayoutOnTabLS:u,retainLayoutOnTabPT:s,retainLayoutOnMobile:l,retainLayoutAlways:y}=e,d=t.__rest(e,["sidePadding","gutters","retainLayoutOnTabLS","retainLayoutOnTabPT","retainLayoutOnMobile","retainLayoutAlways"]);let b=[];return o&&b.push(`side-padding-${o}`),i&&b.push("none"===i?"no-gutters":`${i}-gutters`),u&&b.push("retain-layout-on-tab-ls"),s&&b.push("retain-layout-on-tab-pt"),l&&b.push("retain-layout-on-mobile"),y&&b.push("retain-layout-on-tab-ls retain-layout-on-tab-pt retain-layout-on-mobile"),r.default.createElement(t.Element,Object.assign({as:a.RowStyled,ref:n,classNames:b,marginBottom:"tiny",isFullWidth:!0},d))}));exports.Row=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../external/Element.js"),e=require("react"),a=require("./Row.styled.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}require("styled-components"),require("../Portion/Portion.styled.js");var n=/*#__PURE__*/r(e);const o=n.default.forwardRef(((e,r)=>{var{sidePadding:o,gutters:i="medium",retainLayoutOnTabLS:u,retainLayoutOnTabPT:s,retainLayoutOnMobile:l,retainLayoutAlways:d}=e,y=t.__rest(e,["sidePadding","gutters","retainLayoutOnTabLS","retainLayoutOnTabPT","retainLayoutOnMobile","retainLayoutAlways"]);let p=[];return o&&p.push(`side-padding-${o}`),i&&p.push("none"===i?"no-gutters":`${i}-gutters`),u&&p.push("retain-layout-on-tablet-landscape"),s&&p.push("retain-layout-on-tablet-portrait"),l&&p.push("retain-layout-on-mobile"),d&&p.push("retain-layout-on-tablet-landscape retain-layout-on-tablet-portrait retain-layout-on-mobile"),n.default.createElement(t.Element,Object.assign({as:a.RowStyled,ref:r,classNames:p,marginBottom:"tiny",isFullWidth:!0},y))}));exports.Row=o;
 //# sourceMappingURL=Row.js.map

package/dist/cjs/components/Row/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sources":["../../../../src/components/Row/Row.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps, SpacingTypes } from \"../Element/constants\";\n\nimport { RowStyled } from \"./Row.styled\";\n\n// prettier-ignore\nexport interface RowCustomProps {\n    sidePadding          ? : \"nano\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\" | \"huge\";\n    gutters              ? : SpacingTypes;\n    retainLayoutOnTabLS  ? : boolean;\n    retainLayoutOnTabPT  ? : boolean;\n    retainLayoutOnMobile ? : boolean;\n    retainLayoutAlways   ? : boolean;\n}\n\nexport type RowElementType = HTMLDivElement;\nexport type RowProps = Omit<CommonAndHTMLProps<RowElementType>, keyof RowCustomProps> & RowCustomProps;\n\nexport const Row = React.forwardRef(\n    (\n        {\n            sidePadding,\n            gutters = \"medium\",\n            retainLayoutOnTabLS,\n            retainLayoutOnTabPT,\n            retainLayoutOnMobile,\n            retainLayoutAlways,\n            ...props\n        }: RowProps,\n        ref: React.Ref<RowElementType>\n    ) => {\n        let classNames = [];\n\n        if (sidePadding) {\n            classNames.push(`side-padding-${sidePadding}`);\n        }\n\n        if (gutters) {\n            classNames.push(gutters === \"none\" ? \"no-gutters\" : `${gutters}-gutters`);\n        }\n\n        if (retainLayoutOnTabLS) {\n            classNames.push(\"retain-layout-on-tab-ls\");\n        }\n\n        if (retainLayoutOnTabPT) {\n            classNames.push(\"retain-layout-on-tab-pt\");\n        }\n\n        if (retainLayoutOnMobile) {\n            classNames.push(\"retain-layout-on-mobile\");\n        }\n\n        if (retainLayoutAlways) {\n            classNames.push(\"retain-layout-on-tab-ls retain-layout-on-tab-pt retain-layout-on-mobile\");\n        }\n\n        return (\n            <Element<RowElementType>\n                as={RowStyled}\n                ref={ref}\n                classNames={classNames}\n                marginBottom=\"tiny\"\n                isFullWidth\n                {...props}\n            />\n        );\n    }\n);\n"],"names":["Row","React","forwardRef","_a","ref","sidePadding","gutters","retainLayoutOnTabLS","retainLayoutOnTabPT","retainLayoutOnMobile","retainLayoutAlways","props","classNames","push","Element","as","RowStyled","marginBottom","isFullWidth"],"mappings":"0UAoBaA,EAAMC,UAAMC,YACrB,CACIC,EASAC,SATAC,YACIA,EADJC,QAEIA,EAAU,SAFdC,oBAGIA,EAHJC,oBAIIA,EAJJC,qBAKIA,EALJC,mBAMIA,KACGC,aAPP,uHAWIC,EAAa,UAEbP,GACAO,EAAWC,qBAAqBR,KAGhCC,GACAM,EAAWC,KAAiB,SAAZP,EAAqB,gBAAkBA,aAGvDC,GACAK,EAAWC,KAAK,2BAGhBL,GACAI,EAAWC,KAAK,2BAGhBJ,GACAG,EAAWC,KAAK,2BAGhBH,GACAE,EAAWC,KAAK,2EAIhBZ,wBAACa,yBACGC,GAAIC,YACJZ,IAAKA,EACLQ,WAAYA,EACZK,aAAa,OACbC,gBACIP"}
+{"version":3,"file":"Row.js","sources":["../../../../src/components/Row/Row.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps, SpacingTypes } from \"../Element/constants\";\n\nimport { RowStyled } from \"./Row.styled\";\n\n// prettier-ignore\nexport interface RowCustomProps {\n    sidePadding          ? : \"nano\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\" | \"huge\";\n    gutters              ? : SpacingTypes;\n    retainLayoutOnTabLS  ? : boolean;\n    retainLayoutOnTabPT  ? : boolean;\n    retainLayoutOnMobile ? : boolean;\n    retainLayoutAlways   ? : boolean;\n}\n\nexport type RowElementType = HTMLDivElement;\nexport type RowProps = Omit<CommonAndHTMLProps<RowElementType>, keyof RowCustomProps> & RowCustomProps;\n\nexport const Row = React.forwardRef(\n    (\n        {\n            sidePadding,\n            gutters = \"medium\",\n            retainLayoutOnTabLS,\n            retainLayoutOnTabPT,\n            retainLayoutOnMobile,\n            retainLayoutAlways,\n            ...props\n        }: RowProps,\n        ref: React.Ref<RowElementType>\n    ) => {\n        let classNames = [];\n\n        if (sidePadding) {\n            classNames.push(`side-padding-${sidePadding}`);\n        }\n\n        if (gutters) {\n            classNames.push(gutters === \"none\" ? \"no-gutters\" : `${gutters}-gutters`);\n        }\n\n        if (retainLayoutOnTabLS) {\n            classNames.push(\"retain-layout-on-tablet-landscape\");\n        }\n\n        if (retainLayoutOnTabPT) {\n            classNames.push(\"retain-layout-on-tablet-portrait\");\n        }\n\n        if (retainLayoutOnMobile) {\n            classNames.push(\"retain-layout-on-mobile\");\n        }\n\n        if (retainLayoutAlways) {\n            classNames.push(\"retain-layout-on-tablet-landscape retain-layout-on-tablet-portrait retain-layout-on-mobile\");\n        }\n\n        return (\n            <Element<RowElementType>\n                as={RowStyled}\n                ref={ref}\n                classNames={classNames}\n                marginBottom=\"tiny\"\n                isFullWidth\n                {...props}\n            />\n        );\n    }\n);\n"],"names":["Row","React","forwardRef","_a","ref","sidePadding","gutters","retainLayoutOnTabLS","retainLayoutOnTabPT","retainLayoutOnMobile","retainLayoutAlways","props","classNames","push","Element","as","RowStyled","marginBottom","isFullWidth"],"mappings":"0UAoBaA,EAAMC,UAAMC,YACrB,CACIC,EASAC,SATAC,YACIA,EADJC,QAEIA,EAAU,SAFdC,oBAGIA,EAHJC,oBAIIA,EAJJC,qBAKIA,EALJC,mBAMIA,KACGC,aAPP,uHAWIC,EAAa,UAEbP,GACAO,EAAWC,qBAAqBR,KAGhCC,GACAM,EAAWC,KAAiB,SAAZP,EAAqB,gBAAkBA,aAGvDC,GACAK,EAAWC,KAAK,qCAGhBL,GACAI,EAAWC,KAAK,oCAGhBJ,GACAG,EAAWC,KAAK,2BAGhBH,GACAE,EAAWC,KAAK,8FAIhBZ,wBAACa,yBACGC,GAAIC,YACJZ,IAAKA,EACLQ,WAAYA,EACZK,aAAa,OACbC,gBACIP"}

package/dist/cjs/components/Row/Row.styled.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var d=require("styled-components"),i=require("../Portion/Portion.styled.js");function g(d){return d&&"object"==typeof d&&"default"in d?d:{default:d}}const a=/*#__PURE__*/g(d).default.div.withConfig({displayName:"RowStyled",componentId:"-7n9p1n"})`display:grid;grid-template-columns:repeat(24, 1fr);&.no-gutters{grid-gap:0;}&.nano-gutters{grid-gap:2px;}&.micro-gutters{grid-gap:4px;}&.tiny-gutters{grid-gap:8px;}&.small-gutters{grid-gap:12px;}&.medium-gutters{grid-gap:16px;}&.large-gutters{grid-gap:24px;}&.huge-gutters{grid-gap:32px;}@media all and (max-width : 900px){&.huge-gutters,&.large-gutters,&.medium-gutters,&.small-gutters,&.tiny-gutters{grid-gap:8px;}}@media all and (max-width : 600px){&.huge-gutters,&.large-gutters,&.medium-gutters,&.small-gutters,&.tiny-gutters{grid-gap:4px;}}&.side-padding-nano{padding-left:1vw;padding-right:1vw;}&.side-padding-micro{padding-left:2vw;padding-right:2vw;}&.side-padding-tiny{padding-left:4vw;padding-right:4vw;}&.side-padding-small{padding-left:8vw;padding-right:8vw;}&.side-padding-medium{padding-left:12vw;padding-right:12vw;}&.side-padding-large{padding-left:18vw;padding-right:18vw;}&.side-padding-huge{padding-left:24vw;padding-right:24vw;}@media all and (min-width : 2400px){&.side-padding-tiny{padding-left:8vw;padding-right:8vw;}&.side-padding-small{padding-left:12vw;padding-right:12vw;}&.side-padding-medium{padding-left:16vw;padding-right:16vw;}&.side-padding-large{padding-left:24vw;padding-right:24vw;}&.side-padding-huge{padding-left:32vw;padding-right:32vw;}}@media all and (max-width : 1600px){&.side-padding-tiny{padding-left:2vw;padding-right:2vw;}&.side-padding-small{padding-left:4vw;padding-right:4vw;}&.side-padding-medium{padding-left:8vw;padding-right:8vw;}&.side-padding-large{padding-left:12vw;padding-right:12vw;}&.side-padding-huge{padding-left:16vw;padding-right:16vw;}}@media all and (max-width : 1200px){&.side-padding-tiny{padding-left:2vw;padding-right:2vw;}&.side-padding-small{padding-left:4vw;padding-right:4vw;}&.side-padding-medium{padding-left:6vw;padding-right:6vw;}&.side-padding-large{padding-left:8vw;padding-right:8vw;}&.side-padding-huge{padding-left:10vw;padding-right:10vw;}}@media all and (max-width : 600px){&[class*="side-padding-"]{padding-left:6vw;padding-right:6vw;}&:not(.retain-layout-on-mobile)> ${i.PortionStyled}:not([class*="on-mobile"]){grid-column:span 24;}}@media all and (min-width : 601px)and (max-width : 900px){&:not(.retain-layout-on-tab-pt)> ${i.PortionStyled}:not([class*="on-tab-pt"]){grid-column:span 24;}}`;exports.RowStyled=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var d=require("styled-components"),i=require("../Portion/Portion.styled.js");function g(d){return d&&"object"==typeof d&&"default"in d?d:{default:d}}const a=/*#__PURE__*/g(d).default.div.withConfig({displayName:"RowStyled",componentId:"-7n9p1n"})`display:grid;grid-template-columns:repeat(24, 1fr);&.no-gutters{grid-gap:0;}&.nano-gutters{grid-gap:2px;}&.micro-gutters{grid-gap:4px;}&.tiny-gutters{grid-gap:8px;}&.small-gutters{grid-gap:12px;}&.medium-gutters{grid-gap:16px;}&.large-gutters{grid-gap:24px;}&.huge-gutters{grid-gap:32px;}@media all and (max-width : 900px){&.huge-gutters,&.large-gutters,&.medium-gutters,&.small-gutters,&.tiny-gutters{grid-gap:8px;}}@media all and (max-width : 600px){&.huge-gutters,&.large-gutters,&.medium-gutters,&.small-gutters,&.tiny-gutters{grid-gap:4px;}}&.side-padding-nano{padding-left:1vw;padding-right:1vw;}&.side-padding-micro{padding-left:2vw;padding-right:2vw;}&.side-padding-tiny{padding-left:4vw;padding-right:4vw;}&.side-padding-small{padding-left:8vw;padding-right:8vw;}&.side-padding-medium{padding-left:12vw;padding-right:12vw;}&.side-padding-large{padding-left:18vw;padding-right:18vw;}&.side-padding-huge{padding-left:24vw;padding-right:24vw;}@media all and (min-width : 2400px){&.side-padding-tiny{padding-left:8vw;padding-right:8vw;}&.side-padding-small{padding-left:12vw;padding-right:12vw;}&.side-padding-medium{padding-left:16vw;padding-right:16vw;}&.side-padding-large{padding-left:24vw;padding-right:24vw;}&.side-padding-huge{padding-left:32vw;padding-right:32vw;}}@media all and (max-width : 1600px){&.side-padding-tiny{padding-left:2vw;padding-right:2vw;}&.side-padding-small{padding-left:4vw;padding-right:4vw;}&.side-padding-medium{padding-left:8vw;padding-right:8vw;}&.side-padding-large{padding-left:12vw;padding-right:12vw;}&.side-padding-huge{padding-left:16vw;padding-right:16vw;}}@media all and (max-width : 1200px){&.side-padding-tiny{padding-left:2vw;padding-right:2vw;}&.side-padding-small{padding-left:4vw;padding-right:4vw;}&.side-padding-medium{padding-left:6vw;padding-right:6vw;}&.side-padding-large{padding-left:8vw;padding-right:8vw;}&.side-padding-huge{padding-left:10vw;padding-right:10vw;}}@media all and (max-width : 600px){&[class*="side-padding-"]{padding-left:6vw;padding-right:6vw;}&:not(.retain-layout-on-mobile)> ${i.PortionStyled}:not([class*="on-mobile"]){grid-column:span 24;}}@media all and (min-width : 601px)and (max-width : 900px){&:not(.retain-layout-on-tablet-portrait)> ${i.PortionStyled}:not([class*="on-tablet-portrait"]){grid-column:span 24;}}`;exports.RowStyled=a;
 //# sourceMappingURL=Row.styled.js.map

package/dist/cjs/components/Row/Row.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.styled.js","sources":["../../../../src/components/Row/Row.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { PortionStyled } from \"../Portion/Portion.styled\";\n\n\nexport const RowStyled = styled.div`\n    display               : grid;\n    grid-template-columns : repeat(24, 1fr);\n\n    &.no-gutters     { grid-gap :    0; }\n    &.nano-gutters   { grid-gap :  2px; }\n    &.micro-gutters  { grid-gap :  4px; }\n    &.tiny-gutters   { grid-gap :  8px; }\n    &.small-gutters  { grid-gap : 12px; }\n    &.medium-gutters { grid-gap : 16px; }\n    &.large-gutters  { grid-gap : 24px; }\n    &.huge-gutters   { grid-gap : 32px; }\n\n    @media all and (max-width : 900px) {\n        &.huge-gutters,\n        &.large-gutters,\n        &.medium-gutters,\n        &.small-gutters,\n        &.tiny-gutters { grid-gap : 8px; }\n    }\n\n    @media all and (max-width : 600px) {\n        &.huge-gutters,\n        &.large-gutters,\n        &.medium-gutters,\n        &.small-gutters,\n        &.tiny-gutters { grid-gap : 4px; }\n    }\n\n    &.side-padding-nano {\n        padding-left  : 1vw;\n        padding-right : 1vw;\n    }\n    \n    &.side-padding-micro {\n        padding-left  : 2vw;\n        padding-right : 2vw;\n    }\n\n    &.side-padding-tiny {\n        padding-left  : 4vw;\n        padding-right : 4vw;\n    }\n\n    &.side-padding-small {\n        padding-left  : 8vw;\n        padding-right : 8vw;\n    }\n\n    &.side-padding-medium {\n        padding-left  : 12vw;\n        padding-right : 12vw;\n    }\n\n    &.side-padding-large {\n        padding-left  : 18vw;\n        padding-right : 18vw;\n    }\n\n    &.side-padding-huge {\n        padding-left  : 24vw;\n        padding-right : 24vw;\n    }\n\n    @media all and (min-width : 2400px) {\n        &.side-padding-tiny {\n            padding-left  : 8vw;\n            padding-right : 8vw;\n        }\n\n        &.side-padding-small {\n            padding-left  : 12vw;\n            padding-right : 12vw;\n        }\n\n        &.side-padding-medium {\n            padding-left  : 16vw;\n            padding-right : 16vw;\n        }\n\n        &.side-padding-large {\n            padding-left  : 24vw;\n            padding-right : 24vw;\n        }\n\n        &.side-padding-huge {\n            padding-left  : 32vw;\n            padding-right : 32vw;\n        }\n    }\n\n    @media all and (max-width : 1600px) {\n        &.side-padding-tiny {\n            padding-left  : 2vw;\n            padding-right : 2vw;\n        }\n\n        &.side-padding-small {\n            padding-left  : 4vw;\n            padding-right : 4vw;\n        }\n\n        &.side-padding-medium {\n            padding-left  : 8vw;\n            padding-right : 8vw;\n        }\n\n        &.side-padding-large {\n            padding-left  : 12vw;\n            padding-right : 12vw;\n        }\n\n        &.side-padding-huge {\n            padding-left  : 16vw;\n            padding-right : 16vw;\n        }\n    }\n\n    @media all and (max-width : 1200px) {\n        &.side-padding-tiny {\n            padding-left  : 2vw;\n            padding-right : 2vw;\n        }\n\n        &.side-padding-small {\n            padding-left  : 4vw;\n            padding-right : 4vw;\n        }\n\n        &.side-padding-medium {\n            padding-left  : 6vw;\n            padding-right : 6vw;\n        }\n\n        &.side-padding-large {\n            padding-left  : 8vw;\n            padding-right : 8vw;\n        }\n\n        &.side-padding-huge {\n            padding-left  : 10vw;\n            padding-right : 10vw;\n        }\n    }\n\n    @media all and (max-width : 600px) {\n        &[class*=\"side-padding-\"] {\n            padding-left  : 6vw;\n            padding-right : 6vw;\n        }\n\n        &:not(.retain-layout-on-mobile) > ${PortionStyled}:not([class*=\"on-mobile\"]) { grid-column : span 24; }\n    }\n\n    @media all and (min-width : 601px) and (max-width : 900px) {\n        &:not(.retain-layout-on-tab-pt) > ${PortionStyled}:not([class*=\"on-tab-pt\"]) { grid-column : span 24; }\n    }\n`;\n"],"names":["RowStyled","div","PortionStyled"],"mappings":"+NAKaA,4BAAmBC,0kEAuJYC,8JAIAA"}
+{"version":3,"file":"Row.styled.js","sources":["../../../../src/components/Row/Row.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { PortionStyled } from \"../Portion/Portion.styled\";\n\n\nexport const RowStyled = styled.div`\n    display               : grid;\n    grid-template-columns : repeat(24, 1fr);\n\n    &.no-gutters     { grid-gap :    0; }\n    &.nano-gutters   { grid-gap :  2px; }\n    &.micro-gutters  { grid-gap :  4px; }\n    &.tiny-gutters   { grid-gap :  8px; }\n    &.small-gutters  { grid-gap : 12px; }\n    &.medium-gutters { grid-gap : 16px; }\n    &.large-gutters  { grid-gap : 24px; }\n    &.huge-gutters   { grid-gap : 32px; }\n\n    @media all and (max-width : 900px) {\n        &.huge-gutters,\n        &.large-gutters,\n        &.medium-gutters,\n        &.small-gutters,\n        &.tiny-gutters { grid-gap : 8px; }\n    }\n\n    @media all and (max-width : 600px) {\n        &.huge-gutters,\n        &.large-gutters,\n        &.medium-gutters,\n        &.small-gutters,\n        &.tiny-gutters { grid-gap : 4px; }\n    }\n\n    &.side-padding-nano {\n        padding-left  : 1vw;\n        padding-right : 1vw;\n    }\n    \n    &.side-padding-micro {\n        padding-left  : 2vw;\n        padding-right : 2vw;\n    }\n\n    &.side-padding-tiny {\n        padding-left  : 4vw;\n        padding-right : 4vw;\n    }\n\n    &.side-padding-small {\n        padding-left  : 8vw;\n        padding-right : 8vw;\n    }\n\n    &.side-padding-medium {\n        padding-left  : 12vw;\n        padding-right : 12vw;\n    }\n\n    &.side-padding-large {\n        padding-left  : 18vw;\n        padding-right : 18vw;\n    }\n\n    &.side-padding-huge {\n        padding-left  : 24vw;\n        padding-right : 24vw;\n    }\n\n    @media all and (min-width : 2400px) {\n        &.side-padding-tiny {\n            padding-left  : 8vw;\n            padding-right : 8vw;\n        }\n\n        &.side-padding-small {\n            padding-left  : 12vw;\n            padding-right : 12vw;\n        }\n\n        &.side-padding-medium {\n            padding-left  : 16vw;\n            padding-right : 16vw;\n        }\n\n        &.side-padding-large {\n            padding-left  : 24vw;\n            padding-right : 24vw;\n        }\n\n        &.side-padding-huge {\n            padding-left  : 32vw;\n            padding-right : 32vw;\n        }\n    }\n\n    @media all and (max-width : 1600px) {\n        &.side-padding-tiny {\n            padding-left  : 2vw;\n            padding-right : 2vw;\n        }\n\n        &.side-padding-small {\n            padding-left  : 4vw;\n            padding-right : 4vw;\n        }\n\n        &.side-padding-medium {\n            padding-left  : 8vw;\n            padding-right : 8vw;\n        }\n\n        &.side-padding-large {\n            padding-left  : 12vw;\n            padding-right : 12vw;\n        }\n\n        &.side-padding-huge {\n            padding-left  : 16vw;\n            padding-right : 16vw;\n        }\n    }\n\n    @media all and (max-width : 1200px) {\n        &.side-padding-tiny {\n            padding-left  : 2vw;\n            padding-right : 2vw;\n        }\n\n        &.side-padding-small {\n            padding-left  : 4vw;\n            padding-right : 4vw;\n        }\n\n        &.side-padding-medium {\n            padding-left  : 6vw;\n            padding-right : 6vw;\n        }\n\n        &.side-padding-large {\n            padding-left  : 8vw;\n            padding-right : 8vw;\n        }\n\n        &.side-padding-huge {\n            padding-left  : 10vw;\n            padding-right : 10vw;\n        }\n    }\n\n    @media all and (max-width : 600px) {\n        &[class*=\"side-padding-\"] {\n            padding-left  : 6vw;\n            padding-right : 6vw;\n        }\n\n        &:not(.retain-layout-on-mobile) > ${PortionStyled}:not([class*=\"on-mobile\"]) { grid-column : span 24; }\n    }\n\n    @media all and (min-width : 601px) and (max-width : 900px) {\n        &:not(.retain-layout-on-tablet-portrait) > ${PortionStyled}:not([class*=\"on-tablet-portrait\"]) { grid-column : span 24; }\n    }\n`;\n"],"names":["RowStyled","div","PortionStyled"],"mappings":"+NAKaA,4BAAmBC,0kEAuJYC,uKAISA"}

package/dist/cjs/components/Sidebar/SidebarItem/SidebarItem.styled.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=/*#__PURE__*/e(require("styled-components")).default.div.withConfig({displayName:"SidebarItemStyled",componentId:"-1rbxifo"})`display:grid;align-items:center;grid-template-columns:${e=>e.theme.sidebar.isCollapsed.width} 1fr;grid-template-rows:40px;& > a{width:unset;}&:hover{color:${e=>e.theme.sidebar.linksWrapper.links.onHover.text};background-color:${e=>e.theme.sidebar.linksWrapper.links.onHover.bg};}&.has-alert{position:relative;&::after{content:"";display:block;position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;right:6px;height:8px;width:8px;border-radius:50%;background-color:${e=>e.theme.sidebar.linksWrapper.links.hasAlert.bg};}}`;exports.SidebarItemStyled=t;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=/*#__PURE__*/e(require("styled-components")).default.div.withConfig({displayName:"SidebarItemStyled",componentId:"-1rbxifo"})`display:grid;align-items:center;grid-template-columns:${e=>e.theme.sidebar.isCollapsed.width} 1fr;grid-template-rows:40px;& > a{width:unset;}&:hover{color:${e=>e.theme.sidebar.links.onHover.text};background-color:${e=>e.theme.sidebar.links.onHover.bg};}&.has-alert{position:relative;&::after{content:"";display:block;position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;right:6px;height:8px;width:8px;border-radius:50%;background-color:${e=>e.theme.sidebar.links.hasAlert.bg};}}`;exports.SidebarItemStyled=t;
 //# sourceMappingURL=SidebarItem.styled.js.map

package/dist/cjs/components/Sidebar/SidebarItem/SidebarItem.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.styled.js","sources":["../../../../../src/components/Sidebar/SidebarItem/SidebarItem.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { SidebarItemProps } from \"./SidebarItem\";\n\nexport const SidebarItemStyled = styled.div`\n    display               : grid;\n    align-items           : center;\n    grid-template-columns : ${(props: SidebarItemProps) => props.theme.sidebar.isCollapsed.width} 1fr;\n    grid-template-rows    : 40px;\n\n    & > a { width : unset; }\n\n    &:hover {\n        color            : ${(props: SidebarItemProps) => props.theme.sidebar.linksWrapper.links.onHover.text};\n        background-color : ${(props: SidebarItemProps) => props.theme.sidebar.linksWrapper.links.onHover.bg};\n    }\n\n    &.has-alert {\n        position : relative;\n        \n        &::after {\n            content          : \"\";\n            display          : block;\n            position         : absolute;\n            top              : 50%;\n            transform        : translateY(-50%);\n            pointer-events   : none;\n            right            : 6px;\n            height           : 8px;\n            width            : 8px;\n            border-radius    : 50%;\n            background-color : ${(props: SidebarItemProps) => props.theme.sidebar.linksWrapper.links.hasAlert.bg};\n        }\n    }\n\n`;\n"],"names":["SidebarItemStyled","div","props","theme","sidebar","isCollapsed","width","linksWrapper","links","onHover","text","bg","hasAlert"],"mappings":"kJAIaA,uDAA2BC,iIAGTC,GAA4BA,EAAMC,MAAMC,QAAQC,YAAYC,sEAM7DJ,GAA4BA,EAAMC,MAAMC,QAAQG,aAAaC,MAAMC,QAAQC,yBAC3ER,GAA4BA,EAAMC,MAAMC,QAAQG,aAAaC,MAAMC,QAAQE,kNAiBvET,GAA4BA,EAAMC,MAAMC,QAAQG,aAAaC,MAAMI,SAASD"}
+{"version":3,"file":"SidebarItem.styled.js","sources":["../../../../../src/components/Sidebar/SidebarItem/SidebarItem.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { SidebarItemProps } from \"./SidebarItem\";\n\nexport const SidebarItemStyled = styled.div`\n    display               : grid;\n    align-items           : center;\n    grid-template-columns : ${(props: SidebarItemProps) => props.theme.sidebar.isCollapsed.width} 1fr;\n    grid-template-rows    : 40px;\n\n    & > a { width : unset; }\n\n    &:hover {\n        color            : ${(props: SidebarItemProps) => props.theme.sidebar.links.onHover.text};\n        background-color : ${(props: SidebarItemProps) => props.theme.sidebar.links.onHover.bg};\n    }\n\n    &.has-alert {\n        position : relative;\n        \n        &::after {\n            content          : \"\";\n            display          : block;\n            position         : absolute;\n            top              : 50%;\n            transform        : translateY(-50%);\n            pointer-events   : none;\n            right            : 6px;\n            height           : 8px;\n            width            : 8px;\n            border-radius    : 50%;\n            background-color : ${(props: SidebarItemProps) => props.theme.sidebar.links.hasAlert.bg};\n        }\n    }\n\n`;\n"],"names":["SidebarItemStyled","div","props","theme","sidebar","isCollapsed","width","links","onHover","text","bg","hasAlert"],"mappings":"kJAIaA,uDAA2BC,iIAGTC,GAA4BA,EAAMC,MAAMC,QAAQC,YAAYC,sEAM7DJ,GAA4BA,EAAMC,MAAMC,QAAQG,MAAMC,QAAQC,yBAC9DP,GAA4BA,EAAMC,MAAMC,QAAQG,MAAMC,QAAQE,kNAiB1DR,GAA4BA,EAAMC,MAAMC,QAAQG,MAAMI,SAASD"}

package/dist/cjs/components/Sidebar/SidebarItemIcon/SidebarItemIcon.styled.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const i=/*#__PURE__*/e(require("styled-components")).default.div.withConfig({displayName:"SidebarItemIconStyled",componentId:"-pwa7pp"})`display:grid;width:${e=>e.theme.sidebar.linksWrapper.icons.size};height:${e=>e.theme.sidebar.linksWrapper.icons.size};align-self:center;justify-self:center;&.icon-stroked svg{fill:none;stroke:${e=>e.theme.sidebar.linksWrapper.icons.stroked.default.line};stroke-width:${e=>e.theme.sidebar.linksWrapper.icons.stroked.thickness};}&:hover.icon-stroked svg{fill:none;stroke:${e=>e.theme.sidebar.linksWrapper.icons.stroked.onHover.line};}&.icon-filled svg{stroke:none;fill:${e=>e.theme.sidebar.linksWrapper.icons.filled.default.bg};}&:hover.icon-filled svg{stroke:none;fill:${e=>e.theme.sidebar.linksWrapper.icons.filled.onHover.bg};}`;exports.SidebarItemIconStyled=i;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const i=/*#__PURE__*/e(require("styled-components")).default.div.withConfig({displayName:"SidebarItemIconStyled",componentId:"-pwa7pp"})`display:grid;width:${e=>e.theme.sidebar.icons.size};height:${e=>e.theme.sidebar.icons.size};align-self:center;justify-self:center;&.icon-stroked svg{fill:none;stroke:${e=>e.theme.sidebar.icons.stroked.default.line};stroke-width:${e=>e.theme.sidebar.icons.stroked.thickness};}&:hover.icon-stroked svg{fill:none;stroke:${e=>e.theme.sidebar.icons.stroked.onHover.line};}&.icon-filled svg{stroke:none;fill:${e=>e.theme.sidebar.icons.filled.default.bg};}&:hover.icon-filled svg{stroke:none;fill:${e=>e.theme.sidebar.icons.filled.onHover.bg};}`;exports.SidebarItemIconStyled=i;
 //# sourceMappingURL=SidebarItemIcon.styled.js.map

package/dist/cjs/components/Sidebar/SidebarItemIcon/SidebarItemIcon.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItemIcon.styled.js","sources":["../../../../../src/components/Sidebar/SidebarItemIcon/SidebarItemIcon.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { SidebarItemIconProps } from \"./SidebarItemIcon\";\n\n\nexport const SidebarItemIconStyled = styled.div`\n    display      : grid;\n    width        : ${(props: SidebarItemIconProps) => props.theme.sidebar.linksWrapper.icons.size};\n    height       : ${(props: SidebarItemIconProps) => props.theme.sidebar.linksWrapper.icons.size};\n    align-self   : center;\n    justify-self : center;\n\n    // LINE ICON  =============================================================\n    &.icon-stroked svg {\n        fill         : none;\n        stroke       : ${(props: SidebarItemIconProps) => props.theme.sidebar.linksWrapper.icons.stroked.default.line};\n        stroke-width : ${(props: SidebarItemIconProps) => props.theme.sidebar.linksWrapper.icons.stroked.thickness};\n    }\n\n    &:hover.icon-stroked svg {\n        fill         : none;\n        stroke       : ${(props: SidebarItemIconProps) => props.theme.sidebar.linksWrapper.icons.stroked.onHover.line};\n    }\n\n    // FILL ICON  =============================================================\n    &.icon-filled svg {\n        stroke : none;\n        fill   : ${(props: SidebarItemIconProps) => props.theme.sidebar.linksWrapper.icons.filled.default.bg};\n    }\n\n    &:hover.icon-filled svg {\n        stroke : none;\n        fill   : ${(props: SidebarItemIconProps) => props.theme.sidebar.linksWrapper.icons.filled.onHover.bg};\n    }\n`;\n"],"names":["SidebarItemIconStyled","div","props","theme","sidebar","linksWrapper","icons","size","stroked","default","line","thickness","onHover","filled","bg"],"mappings":"kJAKaA,uDAA+BC,iGAEtBC,GAAgCA,EAAMC,MAAMC,QAAQC,aAAaC,MAAMC,eACvEL,GAAgCA,EAAMC,MAAMC,QAAQC,aAAaC,MAAMC,kFAOnEL,GAAgCA,EAAMC,MAAMC,QAAQC,aAAaC,MAAME,QAAQC,QAAQC,qBACvFR,GAAgCA,EAAMC,MAAMC,QAAQC,aAAaC,MAAME,QAAQG,wDAK/ET,GAAgCA,EAAMC,MAAMC,QAAQC,aAAaC,MAAME,QAAQI,QAAQF,4CAM7FR,GAAgCA,EAAMC,MAAMC,QAAQC,aAAaC,MAAMO,OAAOJ,QAAQK,gDAKtFZ,GAAgCA,EAAMC,MAAMC,QAAQC,aAAaC,MAAMO,OAAOD,QAAQE"}
+{"version":3,"file":"SidebarItemIcon.styled.js","sources":["../../../../../src/components/Sidebar/SidebarItemIcon/SidebarItemIcon.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { SidebarItemIconProps } from \"./SidebarItemIcon\";\n\n\nexport const SidebarItemIconStyled = styled.div`\n    display      : grid;\n    width        : ${(props: SidebarItemIconProps) => props.theme.sidebar.icons.size};\n    height       : ${(props: SidebarItemIconProps) => props.theme.sidebar.icons.size};\n    align-self   : center;\n    justify-self : center;\n\n    // LINE ICON  =============================================================\n    &.icon-stroked svg {\n        fill         : none;\n        stroke       : ${(props: SidebarItemIconProps) => props.theme.sidebar.icons.stroked.default.line};\n        stroke-width : ${(props: SidebarItemIconProps) => props.theme.sidebar.icons.stroked.thickness};\n    }\n\n    &:hover.icon-stroked svg {\n        fill         : none;\n        stroke       : ${(props: SidebarItemIconProps) => props.theme.sidebar.icons.stroked.onHover.line};\n    }\n\n    // FILL ICON  =============================================================\n    &.icon-filled svg {\n        stroke : none;\n        fill   : ${(props: SidebarItemIconProps) => props.theme.sidebar.icons.filled.default.bg};\n    }\n\n    &:hover.icon-filled svg {\n        stroke : none;\n        fill   : ${(props: SidebarItemIconProps) => props.theme.sidebar.icons.filled.onHover.bg};\n    }\n`;\n"],"names":["SidebarItemIconStyled","div","props","theme","sidebar","icons","size","stroked","default","line","thickness","onHover","filled","bg"],"mappings":"kJAKaA,uDAA+BC,iGAEtBC,GAAgCA,EAAMC,MAAMC,QAAQC,MAAMC,eAC1DJ,GAAgCA,EAAMC,MAAMC,QAAQC,MAAMC,kFAOtDJ,GAAgCA,EAAMC,MAAMC,QAAQC,MAAME,QAAQC,QAAQC,qBAC1EP,GAAgCA,EAAMC,MAAMC,QAAQC,MAAME,QAAQG,wDAKlER,GAAgCA,EAAMC,MAAMC,QAAQC,MAAME,QAAQI,QAAQF,4CAMhFP,GAAgCA,EAAMC,MAAMC,QAAQC,MAAMO,OAAOJ,QAAQK,gDAKzEX,GAAgCA,EAAMC,MAAMC,QAAQC,MAAMO,OAAOD,QAAQE"}

package/dist/cjs/components/Sidebar/SidebarWrapper/SidebarWrapper.styled.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),i=require("../SidebarHeader/SidebarHeader.styled.js"),t=require("../SidebarItem/SidebarItem.styled.js"),r=require("../SidebarItemText/SidebarItemText.styled.js"),d=require("../SidebarItemIcon/SidebarItemIcon.styled.js"),o=require("../SidebarFooter/SidebarFooter.styled.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=/*#__PURE__*/l(e).default.aside.withConfig({displayName:"SidebarWrapperStyled",componentId:"-1f7py67"})`display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:${e=>e.theme.sidebar.width};min-height:100vh;overflow-y:auto;transition:all 0.4s ease-in-out;background-color:${e=>e.theme.sidebar.bg};box-shadow:2px 0 8px -4px rgba(0, 0, 0, 0.16);z-index:10000;font-size:${e=>e.theme.sidebar.linksWrapper.links.default.scale}%;*{user-select:none;}@media (max-width : 900px){left:calc(-1 * 100%);z-index:4000;}&.collapsed{width:${e=>e.theme.sidebar.isCollapsed.width};overflow-x:hidden;${i.SidebarHeaderStyled}{.header-logo{display:none;}.header-icon{display:block;width:32px;height:32px;}}${r.SidebarItemTextStyled}{display:none;position:absolute;}${t.SidebarItemStyled}:hover ${d.SidebarItemIconStyled} + ${r.SidebarItemTextStyled}{display:flex;position:fixed;left:40px;align-self:center;border-radius:4px;padding:4px 8px;background-color:${e=>e.theme.sidebar.isCollapsed.label.bg};color:${e=>e.theme.sidebar.isCollapsed.label.text};font-size:88%;box-shadow:0 4px 16px -2px rgba(0, 0, 0, 0.24);}${o.SidebarFooterStyled}{padding-left:0;}}a{width:unset;color:${e=>e.theme.sidebar.linksWrapper.links.default.text};}a.active{position:relative;display:block;background-color:${e=>e.theme.sidebar.linksWrapper.links.isSelected.bg};&::before{display:block;position:absolute;width:4px;height:100%;top:0;left:0;content:"";border-top-right-radius:4px;border-bottom-right-radius:4px;background-color:${e=>e.theme.sidebar.linksWrapper.links.isSelected.border};}& .icon-stroked svg{fill:none;stroke:${e=>e.theme.sidebar.linksWrapper.icons.stroked.isActive.line};}& .icon-filled svg{stroke:none;fill:${e=>e.theme.sidebar.linksWrapper.icons.filled.isActive.bg};}p{color:${e=>e.theme.sidebar.linksWrapper.links.isSelected.text};}}`;exports.SidebarWrapperStyled=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../SidebarHeader/SidebarHeader.styled.js"),i=require("../SidebarItem/SidebarItem.styled.js"),d=require("../SidebarItemText/SidebarItemText.styled.js"),o=require("../SidebarItemIcon/SidebarItemIcon.styled.js"),r=require("../SidebarFooter/SidebarFooter.styled.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=/*#__PURE__*/a(e).default.aside.withConfig({displayName:"SidebarWrapperStyled",componentId:"-1f7py67"})`display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:${e=>e.theme.sidebar.width};min-height:100vh;overflow-y:auto;transition:all 0.4s ease-in-out;background-color:${e=>e.theme.sidebar.bg};box-shadow:2px 0 8px -4px rgba(0, 0, 0, 0.16);z-index:10000;font-size:${e=>e.theme.sidebar.links.default.scale}%;*{user-select:none;}@media (max-width : 900px){left:calc(-1 * 100%);z-index:4000;}&.collapsed{width:${e=>e.theme.sidebar.isCollapsed.width};overflow-x:hidden;${t.SidebarHeaderStyled}{.header-logo{display:none;}.header-icon{display:block;width:32px;height:32px;}}${d.SidebarItemTextStyled}{display:none;position:absolute;}${i.SidebarItemStyled}:hover ${o.SidebarItemIconStyled} + ${d.SidebarItemTextStyled}{display:flex;position:fixed;left:40px;align-self:center;border-radius:4px;padding:4px 8px;background-color:${e=>e.theme.sidebar.isCollapsed.label.bg};color:${e=>e.theme.sidebar.isCollapsed.label.text};font-size:88%;box-shadow:0 4px 16px -2px rgba(0, 0, 0, 0.24);}${r.SidebarFooterStyled}{padding-left:0;}}a{width:unset;color:${e=>e.theme.sidebar.links.default.text};}summary ~ a p{color:${e=>e.theme.sidebar.subLinks.default.text};}a.active{position:relative;display:block;background-color:${e=>e.theme.sidebar.links.isSelected.bg};&::before{display:block;position:absolute;width:4px;height:100%;top:0;left:0;content:"";border-top-right-radius:4px;border-bottom-right-radius:4px;background-color:${e=>e.theme.sidebar.links.isSelected.border};}& .icon-stroked svg{fill:none;stroke:${e=>e.theme.sidebar.icons.stroked.isActive.line};}& .icon-filled svg{stroke:none;fill:${e=>e.theme.sidebar.icons.filled.isActive.bg};}p{color:${e=>e.theme.sidebar.links.isSelected.text};}}`;exports.SidebarWrapperStyled=l;
 //# sourceMappingURL=SidebarWrapper.styled.js.map