fictoan-react 0.41.21 → 0.41.24

package/CHANGELOG.md

@@ -1,4 +1,16 @@
-### 0.41.21
+# CHANGELOG
+
+### 0.41.24
+- Convert `isMono`, `isSans` and `isSerif` to a `style` enum
+- Fix `isSubtext` prop for text elements
+- Fix cursor-pointer on hover for `ExpandableGroup`
+- Add back the right margin bottoms for `FormItem` elements inside `FormItemGroup`
+- Fix margin bottom for `CheckBox` and `Switch` inside a `FormWrapper`
+
+### 0.41.23
+- Remove `line-height` property from `body` and apply it more specifically to text elements only
+
+### 0.41.22
 - Add `InputField` invalid state text theme colour
 - Rework text sizes progression
 - Add reset styles for `picture`

package/README.md

@@ -9,14 +9,14 @@
 <a href="LICENSE"><img src="https://img.shields.io/github/license/fictoan/fictoan-react"/></a>
 </p>
 
-Fictoan is an intuitive framework for designers looking to code interfaces.
+Fictoan is an intuitive framework for designers looking to code and rapidly iterate on UI.
 
 ## Features
 - Simple, straight-forward React custom props, exactly like setting properties in a design app.
 - All attributes are intuitive and in plain English.
 - Most attributes are also the same across different components.
 
-## Getting Started
+## Getting started
 Install using `yarn`:
 ```sh
 yarn add fictoan-react

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

@@ -12,6 +12,7 @@ export declare type SpacingTypes = "none" | "nano" | "micro" | "tiny" | "small"
 export declare type ShadowTypes = "none" | "mild" | "soft" | "hard";
 export declare type ShapeTypes = "rounded" | "curved";
 export declare type OpacityTypes = "00" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "100";
+export declare type WeightTypes = "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
 export declare type ColourPropTypes = typeof defaultColourProps[number] | keyof typeof customColours | "";
 export interface CommonProps extends ThemeProps {
     bgColor?: ColourPropTypes;
@@ -52,6 +53,7 @@ export interface CommonProps extends ThemeProps {
     verticallyCentreItems?: boolean;
     verticallyCenterItems?: boolean;
     pushItemsToEnds?: boolean;
+    weight?: WeightTypes;
     classNames?: string[];
 }
 export interface CommonAndHTMLProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "as" | "size" | "ref" | "shape"> {

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

@@ -1,8 +1,8 @@
 import React, { ReactNode } from "react";
 import { CommonAndHTMLProps } from "../Element/constants";
 export interface ExpandableContentCustomProps {
-    summary: ReactNode;
     open?: boolean;
+    summary: ReactNode;
     children: ReactNode;
 }
 export declare type ExpandableContentElementType = HTMLDetailsElement;

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandableContent.js","sources":["../../../../src/components/ExpandableContent/ExpandableContent.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { Element } from \"../Element/Element\";\nimport { Text } from \"../Typography/Text\";\n\nimport { ExpandableContentStyled } from \"./ExpandableContent.styled\";\n\nexport interface ExpandableContentCustomProps {\n    summary: ReactNode;\n    open?: boolean;\n    children: ReactNode;\n}\n\nexport type ExpandableContentElementType = HTMLDetailsElement;\nexport type ExpandableContentProps = Omit<\n    CommonAndHTMLProps<ExpandableContentElementType>,\n    keyof ExpandableContentCustomProps\n> &\n    ExpandableContentCustomProps;\n\nexport const ExpandableContent = React.forwardRef(\n    ({ summary, children, ...props }: ExpandableContentProps, ref: React.Ref<ExpandableContentElementType>) => {\n        return (\n            <Element<ExpandableContentElementType> as={ExpandableContentStyled} ref={ref} {...props}>\n                <summary>{typeof summary === \"string\" ? <Text margin=\"none\">{summary}</Text> : summary}</summary>\n                {children}\n            </Element>\n        );\n    }\n);\n"],"names":["ExpandableContent","React","forwardRef","_a","ref","summary","children","props","Element","as","ExpandableContentStyled","Text","margin"],"mappings":"mVAoBaA,EAAoBC,UAAMC,YACnC,CAACC,EAAyDC,SAAzDC,QAAEA,EAAFC,SAAWA,KAAaC,aAAxB,+BAEON,wBAACO,yBAAsCC,GAAIC,0BAAyBN,IAAKA,GAASG,GAC9EN,uCAA6B,iBAAZI,EAAuBJ,wBAACU,QAAKC,OAAO,QAAQP,GAAkBA,GAC9EC"}
+{"version":3,"file":"ExpandableContent.js","sources":["../../../../src/components/ExpandableContent/ExpandableContent.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { Element } from \"../Element/Element\";\nimport { Text } from \"../Typography/Text\";\n\nimport { ExpandableContentStyled } from \"./ExpandableContent.styled\";\n\n// prettier-ignore\nexport interface ExpandableContentCustomProps {\n    open     ? : boolean;\n    summary    : ReactNode;\n    children   : ReactNode;\n}\n\nexport type ExpandableContentElementType = HTMLDetailsElement;\nexport type ExpandableContentProps = Omit<\n    CommonAndHTMLProps<ExpandableContentElementType>,\n    keyof ExpandableContentCustomProps\n> &\n    ExpandableContentCustomProps;\n\nexport const ExpandableContent = React.forwardRef(\n    ({ summary, children, ...props }: ExpandableContentProps, ref: React.Ref<ExpandableContentElementType>) => {\n        return (\n            <Element<ExpandableContentElementType> as={ExpandableContentStyled} ref={ref} {...props}>\n                <summary>{typeof summary === \"string\" ? <Text margin=\"none\">{summary}</Text> : summary}</summary>\n                {children}\n            </Element>\n        );\n    }\n);\n"],"names":["ExpandableContent","React","forwardRef","_a","ref","summary","children","props","Element","as","ExpandableContentStyled","Text","margin"],"mappings":"mVAqBaA,EAAoBC,UAAMC,YACnC,CAACC,EAAyDC,SAAzDC,QAAEA,EAAFC,SAAWA,KAAaC,aAAxB,+BAEON,wBAACO,yBAAsCC,GAAIC,0BAAyBN,IAAKA,GAASG,GAC9EN,uCAA6B,iBAAZI,EAAuBJ,wBAACU,QAAKC,OAAO,QAAQP,GAAkBA,GAC9EC"}

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.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"})`& > summary{cursor:pointer;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.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"}
+{"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    & > summary {\n        cursor   : pointer;\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,yVAoBhBC,GAAkCA,EAAMC,MAAMC,QAAQC,SAASC,QAAQC"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../external/Element.js"),t=require("react"),r=require("../BaseInputComponent/BaseInputComponent.js"),s=require("./CheckBox.styled.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../InputLabel/InputLabel.js"),require("../FormItem/FormItem.js"),require("../FormItem/FormItem.styled.js"),require("styled-components"),require("../InputField/InputField.styled.js"),require("../Select/Select.styled.js"),require("../TextArea/TextArea.styled.js");var n=/*#__PURE__*/u(t);const l=n.default.forwardRef(((t,u)=>{var l=e.__rest(t,[]);return n.default.createElement(e.Element,{as:s.CheckBoxStyled,ref:u},n.default.createElement(r.BaseInputComponent,Object.assign({as:"input",type:"checkbox"},l)))}));exports.CheckBox=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../external/Element.js"),r=require("react"),t=require("../BaseInputComponent/BaseInputComponent.js"),s=require("./CheckBox.styled.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../InputLabel/InputLabel.js"),require("../FormItem/FormItem.js"),require("../FormItem/FormItem.styled.js"),require("styled-components"),require("../InputField/InputField.styled.js"),require("../Select/Select.styled.js"),require("../TextArea/TextArea.styled.js"),require("../FormWrapper/FormWrapper.styled.js"),require("../FormItemGroup/FormItemGroup.styled.js");var o=/*#__PURE__*/u(r);const n=o.default.forwardRef(((r,u)=>{var n=e.__rest(r,[]);return o.default.createElement(e.Element,{as:s.CheckBoxStyled,ref:u},o.default.createElement(t.BaseInputComponent,Object.assign({as:"input",type:"checkbox"},n)))}));exports.CheckBox=n;
 //# sourceMappingURL=CheckBox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.js","sources":["../../../../../src/components/Form/CheckBox/CheckBox.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../../Element/Element\";\nimport { BaseInputComponent } from \"../BaseInputComponent/BaseInputComponent\";\nimport { BaseInputComponentProps } from \"../BaseInputComponent/constants\";\n\nimport { CheckBoxStyled } from \"./CheckBox.styled\";\n\nexport type CheckboxElementType = HTMLInputElement;\nexport type CheckboxProps = Omit<BaseInputComponentProps<CheckboxElementType>, \"as\">;\n\nexport const CheckBox = React.forwardRef(({ ...props }: CheckboxProps, ref: React.Ref<CheckboxElementType>) => {\n    return (\n        <Element<CheckboxElementType> as={CheckBoxStyled} ref={ref}>\n            <BaseInputComponent as=\"input\" type=\"checkbox\" {...props} />\n        </Element>\n    );\n});\n"],"names":["CheckBox","React","forwardRef","_a","ref","props","Element","as","CheckBoxStyled","BaseInputComponent","type"],"mappings":"qlBAWaA,EAAWC,UAAMC,YAAW,CAACC,EAA6BC,SAAxBC,aAAL,WAElCJ,wBAACK,WAA6BC,GAAIC,iBAAgBJ,IAAKA,GACnDH,wBAACQ,oCAAmBF,GAAG,QAAQG,KAAK,YAAeL"}
+{"version":3,"file":"CheckBox.js","sources":["../../../../../src/components/Form/CheckBox/CheckBox.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../../Element/Element\";\nimport { BaseInputComponent } from \"../BaseInputComponent/BaseInputComponent\";\nimport { BaseInputComponentProps } from \"../BaseInputComponent/constants\";\n\nimport { CheckBoxStyled } from \"./CheckBox.styled\";\n\nexport type CheckboxElementType = HTMLInputElement;\nexport type CheckboxProps = Omit<BaseInputComponentProps<CheckboxElementType>, \"as\">;\n\nexport const CheckBox = React.forwardRef(({ ...props }: CheckboxProps, ref: React.Ref<CheckboxElementType>) => {\n    return (\n        <Element<CheckboxElementType> as={CheckBoxStyled} ref={ref}>\n            <BaseInputComponent as=\"input\" type=\"checkbox\" {...props} />\n        </Element>\n    );\n});\n"],"names":["CheckBox","React","forwardRef","_a","ref","props","Element","as","CheckBoxStyled","BaseInputComponent","type"],"mappings":"yrBAWaA,EAAWC,UAAMC,YAAW,CAACC,EAA6BC,SAAxBC,aAAL,WAElCJ,wBAACK,WAA6BC,GAAIC,iBAAgBJ,IAAKA,GACnDH,wBAACQ,oCAAmBF,GAAG,QAAQG,KAAK,YAAeL"}

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;}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};}`,l=o.default.div.withConfig({displayName:"CheckBoxStyled",componentId:"-4wa34p"})`${a} 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} label{position:relative;&::before{position:absolute;top:50%;left:0;transform:translateY(-50%);border-radius:16px;margin-right:4px;background:${e=>e.theme.toggleSwitch.case.default.bg};}&::after{content:"";position:absolute;top:50%;transform:translateY(-50%);display:inline-block;background:${e=>e.theme.toggleSwitch.actuator.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"]:hover + label::before{background:${e=>e.theme.toggleSwitch.case.onHover.bg};}input[type="checkbox"]:checked + label::before{background:${e=>e.theme.toggleSwitch.case.isChecked.bg};}input[type="checkbox"]:disabled + label::before{background:${e=>e.theme.toggleSwitch.case.isDisabled.bg};}input[type="checkbox"]:hover + label::after{background:${e=>e.theme.toggleSwitch.actuator.onHover.bg};}input[type="checkbox"]:checked + label::after{background:${e=>e.theme.toggleSwitch.actuator.isChecked.bg};}input[type="checkbox"]:disabled + label::after{background:${e=>e.theme.toggleSwitch.actuator.isDisabled.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"),t=require("../FormWrapper/FormWrapper.styled.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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");var o=/*#__PURE__*/r(e);const a=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};}`,p=o.default.div.withConfig({displayName:"CheckBoxStyled",componentId:"-4wa34p"})`${a} 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;}${t.FormWrapperStyled}.spacing-none &{margin-bottom:0;}${t.FormWrapperStyled}.spacing-nano &{margin-bottom:8px;}${t.FormWrapperStyled}.spacing-micro &{margin-bottom:12px;}${t.FormWrapperStyled}.spacing-tiny &{margin-bottom:16px;}${t.FormWrapperStyled}.spacing-small &{margin-bottom:24px;}${t.FormWrapperStyled}.spacing-medium &{margin-bottom:32px;}${t.FormWrapperStyled}.spacing-large &{margin-bottom:40px;}${t.FormWrapperStyled}.spacing-huge &{margin-bottom:48px;}`,i=o.default.div.withConfig({displayName:"SwitchStyled",componentId:"-gklthr"})`${a} label{position:relative;&::before{position:absolute;top:50%;left:0;transform:translateY(-50%);border-radius:16px;margin-right:4px;background:${e=>e.theme.toggleSwitch.case.default.bg};}&::after{content:"";position:absolute;top:50%;transform:translateY(-50%);display:inline-block;background:${e=>e.theme.toggleSwitch.actuator.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"]:hover + label::before{background:${e=>e.theme.toggleSwitch.case.onHover.bg};}input[type="checkbox"]:checked + label::before{background:${e=>e.theme.toggleSwitch.case.isChecked.bg};}input[type="checkbox"]:disabled + label::before{background:${e=>e.theme.toggleSwitch.case.isDisabled.bg};}input[type="checkbox"]:hover + label::after{background:${e=>e.theme.toggleSwitch.actuator.onHover.bg};}input[type="checkbox"]:checked + label::after{background:${e=>e.theme.toggleSwitch.actuator.isChecked.bg};}input[type="checkbox"]:disabled + label::after{background:${e=>e.theme.toggleSwitch.actuator.isDisabled.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);}}${t.FormWrapperStyled}.spacing-none &{margin-bottom:0;}${t.FormWrapperStyled}.spacing-nano &{margin-bottom:8px;}${t.FormWrapperStyled}.spacing-micro &{margin-bottom:12px;}${t.FormWrapperStyled}.spacing-tiny &{margin-bottom:16px;}${t.FormWrapperStyled}.spacing-small &{margin-bottom:24px;}${t.FormWrapperStyled}.spacing-medium &{margin-bottom:32px;}${t.FormWrapperStyled}.spacing-large &{margin-bottom:40px;}${t.FormWrapperStyled}.spacing-huge &{margin-bottom:48px;}`;exports.CheckBoxStyled=p,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 {\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    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    ${SharedStyling}\n\n    /*  The 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 {\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    ${SharedStyling}\n\n    label {\n        position : relative;\n\n        /*  The grey stadium shape for the case */\n        &::before {\n            position      : absolute;\n            top           : 50%;\n            left          : 0;\n            transform     : translateY(-50%);\n            border-radius : 16px;\n            margin-right  : 4px;\n            background    : ${(props : CheckboxProps) => props.theme.toggleSwitch.case.default.bg};\n        }\n\n        /*  The white inner circle actuator */\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.actuator.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    /* States for the stadium */\n    input[type=\"checkbox\"]:hover + label::before {\n        background : ${(props : CheckboxProps) => props.theme.toggleSwitch.case.onHover.bg};\n    }\n\n    input[type=\"checkbox\"]:checked + label::before {\n        background : ${(props : CheckboxProps) => props.theme.toggleSwitch.case.isChecked.bg};\n    }\n\n    input[type=\"checkbox\"]:disabled + label::before {\n        background : ${(props : CheckboxProps) => props.theme.toggleSwitch.case.isDisabled.bg};\n    }\n\n    /* States for the circle */\n    input[type=\"checkbox\"]:hover + label::after {\n        background : ${(props : CheckboxProps) => props.theme.toggleSwitch.actuator.onHover.bg};\n    }\n\n    input[type=\"checkbox\"]:checked + label::after {\n        background : ${(props : CheckboxProps) => props.theme.toggleSwitch.actuator.isChecked.bg};\n    }\n\n    input[type=\"checkbox\"]:disabled + label::after {\n        background : ${(props : CheckboxProps) => props.theme.toggleSwitch.actuator.isDisabled.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\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","case","actuator","isDisabled"],"mappings":"uMAKA,MAAMA,EAAgBC,mTAsBGC,GAA0BA,EAAMC,MAAMC,KAAKC,KAAKC,cAChDJ,GAA0BA,EAAMC,MAAMC,KAAKG,MAAMC,sPAkB9CN,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,uEAC/BjB,wLAmB+BE,GAA0BA,EAAMC,MAAMM,SAASS,MAAMP,QAAQQ,kCAC7DjB,GAA0BA,EAAMC,MAAMM,SAASS,MAAMP,QAAQQ,sHAcrFC,EAAeJ,UAAOC,qEAC7BjB,kJAayBE,GAA0BA,EAAMC,MAAMkB,aAAaC,KAAKX,QAAQC,gHAUhEV,GAA0BA,EAAMC,MAAMkB,aAAaE,SAASZ,QAAQC,sKAU3EV,GAA0BA,EAAMC,MAAMkB,aAAaC,KAAKT,QAAQD,iEAIhEV,GAA0BA,EAAMC,MAAMkB,aAAaC,KAAKR,UAAUF,kEAIlEV,GAA0BA,EAAMC,MAAMkB,aAAaC,KAAKE,WAAWZ,8DAKnEV,GAA0BA,EAAMC,MAAMkB,aAAaE,SAASV,QAAQD,gEAIpEV,GAA0BA,EAAMC,MAAMkB,aAAaE,SAAST,UAAUF,iEAItEV,GAA0BA,EAAMC,MAAMkB,aAAaE,SAASC,WAAWZ"}
+{"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\";\nimport { FormWrapperStyled } from \"../FormWrapper/FormWrapper.styled\";\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    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    ${SharedStyling}\n\n    /*  The 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 {\n        padding-left : 24px;\n    }\n\n    input[type=\"checkbox\"]:checked + label::after {\n        opacity : 1;\n    }\n    \n    ${FormWrapperStyled}.spacing-none   & { margin-bottom :    0; }\n    ${FormWrapperStyled}.spacing-nano   & { margin-bottom :  8px; }\n    ${FormWrapperStyled}.spacing-micro  & { margin-bottom : 12px; }\n    ${FormWrapperStyled}.spacing-tiny   & { margin-bottom : 16px; }\n    ${FormWrapperStyled}.spacing-small  & { margin-bottom : 24px; }\n    ${FormWrapperStyled}.spacing-medium & { margin-bottom : 32px; }\n    ${FormWrapperStyled}.spacing-large  & { margin-bottom : 40px; }\n    ${FormWrapperStyled}.spacing-huge   & { margin-bottom : 48px; }\n`;\n\n/*  TOGGLE SWITCH  ========================================================  */\nexport const SwitchStyled = styled.div`\n    ${SharedStyling}\n\n    label {\n        position : relative;\n\n        /*  The grey stadium shape for the case */\n        &::before {\n            position      : absolute;\n            top           : 50%;\n            left          : 0;\n            transform     : translateY(-50%);\n            border-radius : 16px;\n            margin-right  : 4px;\n            background    : ${(props : CheckboxProps) => props.theme.toggleSwitch.case.default.bg};\n        }\n\n        /*  The white inner circle actuator */\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.actuator.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    /* States for the stadium */\n    input[type=\"checkbox\"]:hover + label::before {\n        background : ${(props : CheckboxProps) => props.theme.toggleSwitch.case.onHover.bg};\n    }\n\n    input[type=\"checkbox\"]:checked + label::before {\n        background : ${(props : CheckboxProps) => props.theme.toggleSwitch.case.isChecked.bg};\n    }\n\n    input[type=\"checkbox\"]:disabled + label::before {\n        background : ${(props : CheckboxProps) => props.theme.toggleSwitch.case.isDisabled.bg};\n    }\n\n    /* States for the circle */\n    input[type=\"checkbox\"]:hover + label::after {\n        background : ${(props : CheckboxProps) => props.theme.toggleSwitch.actuator.onHover.bg};\n    }\n\n    input[type=\"checkbox\"]:checked + label::after {\n        background : ${(props : CheckboxProps) => props.theme.toggleSwitch.actuator.isChecked.bg};\n    }\n\n    input[type=\"checkbox\"]:disabled + label::after {\n        background : ${(props : CheckboxProps) => props.theme.toggleSwitch.actuator.isDisabled.bg};\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\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    ${FormWrapperStyled}.spacing-none   & { margin-bottom :    0; }\n    ${FormWrapperStyled}.spacing-nano   & { margin-bottom :  8px; }\n    ${FormWrapperStyled}.spacing-micro  & { margin-bottom : 12px; }\n    ${FormWrapperStyled}.spacing-tiny   & { margin-bottom : 16px; }\n    ${FormWrapperStyled}.spacing-small  & { margin-bottom : 24px; }\n    ${FormWrapperStyled}.spacing-medium & { margin-bottom : 32px; }\n    ${FormWrapperStyled}.spacing-large  & { margin-bottom : 40px; }\n    ${FormWrapperStyled}.spacing-huge   & { margin-bottom : 48px; }\n`;\n"],"names":["SharedStyling","css","props","theme","text","font","sans","paras","color","checkBox","square","default","bg","onHover","isChecked","CheckBoxStyled","styled","div","check","border","FormWrapperStyled","SwitchStyled","toggleSwitch","case","actuator","isDisabled"],"mappings":"qdAMA,MAAMA,EAAgBC,mTAsBGC,GAA0BA,EAAMC,MAAMC,KAAKC,KAAKC,cAChDJ,GAA0BA,EAAMC,MAAMC,KAAKG,MAAMC,sPAkB9CN,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,uEAC/BjB,wLAmB+BE,GAA0BA,EAAMC,MAAMM,SAASS,MAAMP,QAAQQ,kCAC7DjB,GAA0BA,EAAMC,MAAMM,SAASS,MAAMP,QAAQQ,sHAY5FC,uDACAA,yDACAA,2DACAA,0DACAA,2DACAA,4DACAA,2DACAA,0DAIOC,EAAeL,UAAOC,qEAC7BjB,kJAayBE,GAA0BA,EAAMC,MAAMmB,aAAaC,KAAKZ,QAAQC,gHAUhEV,GAA0BA,EAAMC,MAAMmB,aAAaE,SAASb,QAAQC,sKAU3EV,GAA0BA,EAAMC,MAAMmB,aAAaC,KAAKV,QAAQD,iEAIhEV,GAA0BA,EAAMC,MAAMmB,aAAaC,KAAKT,UAAUF,kEAIlEV,GAA0BA,EAAMC,MAAMmB,aAAaC,KAAKE,WAAWb,8DAKnEV,GAA0BA,EAAMC,MAAMmB,aAAaE,SAASX,QAAQD,gEAIpEV,GAA0BA,EAAMC,MAAMmB,aAAaE,SAASV,UAAUF,iEAItEV,GAA0BA,EAAMC,MAAMmB,aAAaE,SAASC,WAAWb,6mBAmEzFQ,uDACAA,yDACAA,2DACAA,0DACAA,2DACAA,4DACAA,2DACAA"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../external/Element.js"),t=require("react"),r=require("../BaseInputComponent/BaseInputComponent.js"),s=require("./CheckBox.styled.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../InputLabel/InputLabel.js"),require("../FormItem/FormItem.js"),require("../FormItem/FormItem.styled.js"),require("styled-components"),require("../InputField/InputField.styled.js"),require("../Select/Select.styled.js"),require("../TextArea/TextArea.styled.js");var n=/*#__PURE__*/u(t);const a=n.default.forwardRef(((t,u)=>{var{size:a="medium"}=t,l=e.__rest(t,["size"]);return n.default.createElement(e.Element,{as:s.SwitchStyled,ref:u,className:`size-${a}`},n.default.createElement(r.BaseInputComponent,Object.assign({as:"input",type:"checkbox"},l)))}));exports.Switch=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../external/Element.js"),r=require("react"),t=require("../BaseInputComponent/BaseInputComponent.js"),s=require("./CheckBox.styled.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../InputLabel/InputLabel.js"),require("../FormItem/FormItem.js"),require("../FormItem/FormItem.styled.js"),require("styled-components"),require("../InputField/InputField.styled.js"),require("../Select/Select.styled.js"),require("../TextArea/TextArea.styled.js"),require("../FormWrapper/FormWrapper.styled.js"),require("../FormItemGroup/FormItemGroup.styled.js");var n=/*#__PURE__*/u(r);const o=n.default.forwardRef(((r,u)=>{var{size:o="medium"}=r,a=e.__rest(r,["size"]);return n.default.createElement(e.Element,{as:s.SwitchStyled,ref:u,className:`size-${o}`},n.default.createElement(t.BaseInputComponent,Object.assign({as:"input",type:"checkbox"},a)))}));exports.Switch=o;
 //# sourceMappingURL=Switch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../../../src/components/Form/CheckBox/Switch.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../../Element/Element\";\n\nimport { BaseInputComponent } from \"../BaseInputComponent/BaseInputComponent\";\nimport { BaseInputComponentProps } from \"../BaseInputComponent/constants\";\n\nimport { SwitchStyled } from \"./CheckBox.styled\";\n\nexport interface SwitchCustomProps {\n    size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport type SwitchElementType = HTMLInputElement;\nexport type SwitchProps = Omit<BaseInputComponentProps<SwitchElementType>, keyof SwitchCustomProps | \"as\"> &\n    SwitchCustomProps;\n\nexport const Switch = React.forwardRef(\n    ({ size = \"medium\", ...props }: SwitchProps, ref: React.Ref<SwitchElementType>) => {\n        return (\n            <Element<SwitchElementType> as={SwitchStyled} ref={ref} className={`size-${size}`}>\n                <BaseInputComponent as=\"input\" type=\"checkbox\" {...props} />\n            </Element>\n        );\n    }\n);\n"],"names":["Switch","React","forwardRef","_a","ref","size","props","Element","as","SwitchStyled","className","BaseInputComponent","type"],"mappings":"qlBAiBaA,EAASC,UAAMC,YACxB,CAACC,EAA4CC,SAA5CC,KAAEA,EAAO,YAAaC,aAAtB,iBAEOL,wBAACM,WAA2BC,GAAIC,eAAcL,IAAKA,EAAKM,kBAAmBL,KACvEJ,wBAACU,oCAAmBH,GAAG,QAAQI,KAAK,YAAeN"}
+{"version":3,"file":"Switch.js","sources":["../../../../../src/components/Form/CheckBox/Switch.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../../Element/Element\";\n\nimport { BaseInputComponent } from \"../BaseInputComponent/BaseInputComponent\";\nimport { BaseInputComponentProps } from \"../BaseInputComponent/constants\";\n\nimport { SwitchStyled } from \"./CheckBox.styled\";\n\nexport interface SwitchCustomProps {\n    size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport type SwitchElementType = HTMLInputElement;\nexport type SwitchProps = Omit<BaseInputComponentProps<SwitchElementType>, keyof SwitchCustomProps | \"as\"> &\n    SwitchCustomProps;\n\nexport const Switch = React.forwardRef(\n    ({ size = \"medium\", ...props }: SwitchProps, ref: React.Ref<SwitchElementType>) => {\n        return (\n            <Element<SwitchElementType> as={SwitchStyled} ref={ref} className={`size-${size}`}>\n                <BaseInputComponent as=\"input\" type=\"checkbox\" {...props} />\n            </Element>\n        );\n    }\n);\n"],"names":["Switch","React","forwardRef","_a","ref","size","props","Element","as","SwitchStyled","className","BaseInputComponent","type"],"mappings":"yrBAiBaA,EAASC,UAAMC,YACxB,CAACC,EAA4CC,SAA5CC,KAAEA,EAAO,YAAaC,aAAtB,iBAEOL,wBAACM,WAA2BC,GAAIC,eAAcL,IAAKA,EAAKM,kBAAmBL,KACvEJ,wBAACU,oCAAmBH,GAAG,QAAQI,KAAK,YAAeN"}

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

@@ -1 +1 @@
-{"version":3,"file":"FormItem.styled.js","sources":["../../../../../src/components/Form/FormItem/FormItem.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { FormItemProps } from \"../FormItem/FormItem\";\nimport { InputFieldStyled } from \"../InputField/InputField.styled\";\nimport { SelectWrapperStyled } from \"../Select/Select.styled\";\nimport { TextAreaStyled } from \"../TextArea/TextArea.styled\";\n\n\nexport const FormItemStyled = styled.div`\n    display        : flex;\n    flex-direction : column;\n    position       : relative;\n    width          : 100%;\n    align-items    : flex-start;\n\n    & > label {\n        position      : relative;\n        display       : flex;\n        flex          : 1 0 auto;\n        align-self    : flex-start;\n        margin-bottom : 4px;\n        color         : ${(props : FormItemProps) => props.theme.inputField.default.label};\n        font-family   : ${(props : FormItemProps) => props.theme.text.paras.font};\n        order         : -1;\n        flex-wrap     : wrap;\n    }\n\n    .info-section {\n        flex-wrap : wrap;\n\n        span.help-text,\n        span.error-text {\n            font-size   : ${(props : FormItemProps) => props.theme.inputField.default.helpText.scale};\n            font-family : ${(props : FormItemProps) => props.theme.text.paras.font};\n        }\n\n        span.help-text {\n            color : ${(props : FormItemProps) => props.theme.inputField.default.helpText.text};\n        }\n\n        span.error-text {\n            display : none;\n        }\n\n        span:not(:last-of-type) {\n            margin-right : 8px;\n        }\n    }\n\n    &[required] {\n        & > div, // For RadioGroup\n        & > ${InputFieldStyled},\n        & > ${TextAreaStyled},\n        & > ${SelectWrapperStyled} {\n            & ~ label::before {\n                position  : absolute;\n                top       : -4px;\n                bottom    : 0;\n                left      : -12px;\n                margin    : auto;\n                content   : \"*\";\n                font-size : 120%;\n                color     : ${(props : FormItemProps) => props.theme.inputField.required.text};\n            }\n        }\n    }\n\n    input[type=\"radio\"]:disabled + label,\n    input[type=\"checkbox\"]:disabled + label {\n        pointer-events : none;\n        user-select    : none;\n        cursor         : default;\n        opacity        : 0.36;\n    }\n\n    ${InputFieldStyled},\n    ${TextAreaStyled},\n    ${SelectWrapperStyled} {\n        &:read-only {\n            background-color : ${(props : FormItemProps) => props.theme.inputField.isReadOnly.bg};\n            color            : ${(props : FormItemProps) => props.theme.inputField.isReadOnly.text};\n            cursor           : text;\n\n            &:focus {\n                border : ${(props : FormItemProps) => props.theme.globals.borderWidth} solid ${(props : FormItemProps) => props.theme.inputField.isReadOnly.text};\n            }\n        }\n\n        &:disabled,\n        &[disabled] select {\n            background-color : ${(props : FormItemProps) => props.theme.inputField.isDisabled.bg};\n            border-color     : ${(props : FormItemProps) => props.theme.inputField.isDisabled.border};\n            color            : ${(props : FormItemProps) => props.theme.inputField.isDisabled.text};\n            cursor           : not-allowed;\n\n            & + label {\n                color : ${(props : FormItemProps) => props.theme.inputField.isDisabled.label};\n            }\n        }\n\n        &:not(:disabled) {\n            &:focus ~ label {\n                font-weight : bold;\n            }\n\n            &:invalid:not(:focus):not(:placeholder-shown) ~ .info-section span.error-text {\n                display : block;\n                color   : ${(props : FormItemProps) => props.theme.inputField.isInvalid.errorText};\n            }\n        }\n    }\n`;\n"],"names":["FormItemStyled","div","props","theme","inputField","default","label","text","paras","font","helpText","scale","InputFieldStyled","TextAreaStyled","SelectWrapperStyled","required","isReadOnly","bg","globals","borderWidth","isDisabled","border","isInvalid","errorText"],"mappings":"yTAQaA,4BAAwBC,oQAaVC,GAA0BA,EAAMC,MAAMC,WAAWC,QAAQC,qBACzDJ,GAA0BA,EAAMC,MAAMI,KAAKC,MAAMC,uGAU/CP,GAA0BA,EAAMC,MAAMC,WAAWC,QAAQK,SAASC,qBAClET,GAA0BA,EAAMC,MAAMI,KAAKC,MAAMC,8BAIvDP,GAA0BA,EAAMC,MAAMC,WAAWC,QAAQK,SAASH,0GAc3EK,0BACAC,wBACAC,uIASiBZ,GAA0BA,EAAMC,MAAMC,WAAWW,SAASR,0JAanFK,sBACAC,oBACAC,sDAE4BZ,GAA0BA,EAAMC,MAAMC,WAAWY,WAAWC,YAC5Df,GAA0BA,EAAMC,MAAMC,WAAWY,WAAWT,mCAIlEL,GAA0BA,EAAMC,MAAMe,QAAQC,qBAAsBjB,GAA0BA,EAAMC,MAAMC,WAAWY,WAAWT,yDAM1HL,GAA0BA,EAAMC,MAAMC,WAAWgB,WAAWH,mBAC5Df,GAA0BA,EAAMC,MAAMC,WAAWgB,WAAWC,gBAC5DnB,GAA0BA,EAAMC,MAAMC,WAAWgB,WAAWb,2CAInEL,GAA0BA,EAAMC,MAAMC,WAAWgB,WAAWd,+JAW1DJ,GAA0BA,EAAMC,MAAMC,WAAWkB,UAAUC"}
+{"version":3,"file":"FormItem.styled.js","sources":["../../../../../src/components/Form/FormItem/FormItem.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { FormItemProps } from \"./FormItem\";\nimport { InputFieldStyled } from \"../InputField/InputField.styled\";\nimport { SelectWrapperStyled } from \"../Select/Select.styled\";\nimport { TextAreaStyled } from \"../TextArea/TextArea.styled\";\n\n\nexport const FormItemStyled = styled.div`\n    display        : flex;\n    flex-direction : column;\n    position       : relative;\n    width          : 100%;\n    align-items    : flex-start;\n\n    & > label {\n        position      : relative;\n        display       : flex;\n        flex          : 1 0 auto;\n        align-self    : flex-start;\n        margin-bottom : 4px;\n        color         : ${(props : FormItemProps) => props.theme.inputField.default.label};\n        font-family   : ${(props : FormItemProps) => props.theme.text.paras.font};\n        order         : -1;\n        flex-wrap     : wrap;\n    }\n\n    .info-section {\n        flex-wrap : wrap;\n\n        span.help-text,\n        span.error-text {\n            font-size   : ${(props : FormItemProps) => props.theme.inputField.default.helpText.scale};\n            font-family : ${(props : FormItemProps) => props.theme.text.paras.font};\n        }\n\n        span.help-text {\n            color : ${(props : FormItemProps) => props.theme.inputField.default.helpText.text};\n        }\n\n        span.error-text {\n            display : none;\n        }\n\n        span:not(:last-of-type) {\n            margin-right : 8px;\n        }\n    }\n\n    &[required] {\n        & > div, // For RadioGroup\n        & > ${InputFieldStyled},\n        & > ${TextAreaStyled},\n        & > ${SelectWrapperStyled} {\n            & ~ label::before {\n                position  : absolute;\n                top       : -4px;\n                bottom    : 0;\n                left      : -12px;\n                margin    : auto;\n                content   : \"*\";\n                font-size : 120%;\n                color     : ${(props : FormItemProps) => props.theme.inputField.required.text};\n            }\n        }\n    }\n\n    input[type=\"radio\"]:disabled + label,\n    input[type=\"checkbox\"]:disabled + label {\n        pointer-events : none;\n        user-select    : none;\n        cursor         : default;\n        opacity        : 0.36;\n    }\n\n    ${InputFieldStyled},\n    ${TextAreaStyled},\n    ${SelectWrapperStyled} {\n        &:read-only {\n            background-color : ${(props : FormItemProps) => props.theme.inputField.isReadOnly.bg};\n            color            : ${(props : FormItemProps) => props.theme.inputField.isReadOnly.text};\n            cursor           : text;\n\n            &:focus {\n                border : ${(props : FormItemProps) => props.theme.globals.borderWidth} solid ${(props : FormItemProps) => props.theme.inputField.isReadOnly.text};\n            }\n        }\n\n        &:disabled,\n        &[disabled] select {\n            background-color : ${(props : FormItemProps) => props.theme.inputField.isDisabled.bg};\n            border-color     : ${(props : FormItemProps) => props.theme.inputField.isDisabled.border};\n            color            : ${(props : FormItemProps) => props.theme.inputField.isDisabled.text};\n            cursor           : not-allowed;\n\n            & + label {\n                color : ${(props : FormItemProps) => props.theme.inputField.isDisabled.label};\n            }\n        }\n\n        &:not(:disabled) {\n            &:focus ~ label {\n                font-weight : bold;\n            }\n\n            &:invalid:not(:focus):not(:placeholder-shown) ~ .info-section span.error-text {\n                display : block;\n                color   : ${(props : FormItemProps) => props.theme.inputField.isInvalid.errorText};\n            }\n        }\n    }\n`;\n"],"names":["FormItemStyled","div","props","theme","inputField","default","label","text","paras","font","helpText","scale","InputFieldStyled","TextAreaStyled","SelectWrapperStyled","required","isReadOnly","bg","globals","borderWidth","isDisabled","border","isInvalid","errorText"],"mappings":"yTAQaA,4BAAwBC,oQAaVC,GAA0BA,EAAMC,MAAMC,WAAWC,QAAQC,qBACzDJ,GAA0BA,EAAMC,MAAMI,KAAKC,MAAMC,uGAU/CP,GAA0BA,EAAMC,MAAMC,WAAWC,QAAQK,SAASC,qBAClET,GAA0BA,EAAMC,MAAMI,KAAKC,MAAMC,8BAIvDP,GAA0BA,EAAMC,MAAMC,WAAWC,QAAQK,SAASH,0GAc3EK,0BACAC,wBACAC,uIASiBZ,GAA0BA,EAAMC,MAAMC,WAAWW,SAASR,0JAanFK,sBACAC,oBACAC,sDAE4BZ,GAA0BA,EAAMC,MAAMC,WAAWY,WAAWC,YAC5Df,GAA0BA,EAAMC,MAAMC,WAAWY,WAAWT,mCAIlEL,GAA0BA,EAAMC,MAAMe,QAAQC,qBAAsBjB,GAA0BA,EAAMC,MAAMC,WAAWY,WAAWT,yDAM1HL,GAA0BA,EAAMC,MAAMC,WAAWgB,WAAWH,mBAC5Df,GAA0BA,EAAMC,MAAMC,WAAWgB,WAAWC,gBAC5DnB,GAA0BA,EAAMC,MAAMC,WAAWgB,WAAWb,2CAInEL,GAA0BA,EAAMC,MAAMC,WAAWgB,WAAWd,+JAW1DJ,GAA0BA,EAAMC,MAAMC,WAAWkB,UAAUC"}

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("../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"),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 m={CheckBox:s.CheckBox,Switch:u.Switch,InputField:a.InputField,FileUpload:n.FileUpload,InputLabel:i.InputLabel,RadioButton:l.RadioButton,RadioGroup:p.RadioGroup,Select:d.Select,TextArea:c.TextArea,Empty:"div"},S=(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,tabletLandscapeSpan:u,tabletPortraitSpan:l,mobileSpan:p,isHorizontal:d}=a,c=e.__rest(a,["desktopSpan","tabletLandscapeSpan","tabletPortraitSpan","mobileSpan","isHorizontal"]),j={desktopSpan:s,tabletLandscapeSpan:u,tabletPortraitSpan:l,mobileSpan:p,isHorizontal:d};n.push(q.default.createElement(o.Portion,Object.assign({},j,{key:`fields-${r}`}),S(c,i)))}return q.default.createElement(r.Row,{gutters:a},n)};
+"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"),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("./FormWrapper.styled.js"),require("../FormItemGroup/FormItemGroup.styled.js"),require("../RadioButton/RadioButton.styled.js");var m=/*#__PURE__*/j(t);const q={CheckBox:s.CheckBox,Switch:u.Switch,InputField:a.InputField,FileUpload:n.FileUpload,InputLabel:i.InputLabel,RadioButton:l.RadioButton,RadioGroup:p.RadioGroup,Select:d.Select,TextArea:c.TextArea,Empty:"div"},S=(t,r)=>{const{as:o}=t,i=e.__rest(t,["as"]);return m.default.createElement(e.Element,Object.assign({as:q[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,tabletLandscapeSpan:u,tabletPortraitSpan:l,mobileSpan:p,isHorizontal:d}=a,c=e.__rest(a,["desktopSpan","tabletLandscapeSpan","tabletPortraitSpan","mobileSpan","isHorizontal"]),j={desktopSpan:s,tabletLandscapeSpan:u,tabletPortraitSpan:l,mobileSpan:p,isHorizontal:d};n.push(m.default.createElement(o.Portion,Object.assign({},j,{key:`fields-${r}`}),S(c,i)))}return m.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, { 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, tabletLandscapeSpan, tabletPortraitSpan, mobileSpan, isHorizontal, ...formField } =\n            fields[i];\n\n        const portionProps = {\n            desktopSpan,\n            tabletLandscapeSpan,\n            tabletPortraitSpan,\n            mobileSpan,\n            isHorizontal,\n        };\n\n        formChildren.push(\n            <Portion {...portionProps} key={`fields-${i}`}>\n                {getFormItem(formField, onFieldsChange)}\n            </Portion>\n        );\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","tabletLandscapeSpan","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,EACFJ,EAAOG,IADLE,YAAEA,EAAFC,oBAAeA,EAAfC,mBAAoCA,EAApCC,WAAwDA,EAAxDC,aAAoEA,KAAiBlB,aAArF,wFAGAmB,EAAe,CACjBL,YAAAA,EACAC,oBAAAA,EACAC,mBAAAA,EACAC,WAAAA,EACAC,aAAAA,GAGJP,EAAaS,KACTf,wBAACgB,2BAAYF,GAAcG,cAAeV,MACrCb,EAAYC,EAAWC,YAI7BI,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, tabletLandscapeSpan, tabletPortraitSpan, mobileSpan, isHorizontal, ...formField } =\n            fields[i];\n\n        const portionProps = {\n            desktopSpan,\n            tabletLandscapeSpan,\n            tabletPortraitSpan,\n            mobileSpan,\n            isHorizontal,\n        };\n\n        formChildren.push(\n            <Portion {...portionProps} key={`fields-${i}`}>\n                {getFormItem(formField, onFieldsChange)}\n            </Portion>\n        );\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","tabletLandscapeSpan","tabletPortraitSpan","mobileSpan","isHorizontal","portionProps","push","Portion","key","Row","gutters"],"mappings":"qqCAuCA,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,EACFJ,EAAOG,IADLE,YAAEA,EAAFC,oBAAeA,EAAfC,mBAAoCA,EAApCC,WAAwDA,EAAxDC,aAAoEA,KAAiBlB,aAArF,wFAGAmB,EAAe,CACjBL,YAAAA,EACAC,oBAAAA,EACAC,mBAAAA,EACAC,WAAAA,EACAC,aAAAA,GAGJP,EAAaS,KACTf,wBAACgB,2BAAYF,GAAcG,cAAeV,MACrCb,EAAYC,EAAWC,YAI7BI,wBAACkB,OAAIC,QAASd,GAAUC"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),e=require("../FormItem/FormItem.styled.js"),o=require("../FormItemGroup/FormItemGroup.styled.js");function m(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}require("../InputField/InputField.styled.js"),require("../Select/Select.styled.js"),require("../TextArea/TextArea.styled.js");const r=/*#__PURE__*/m(t).default.form.withConfig({displayName:"FormWrapperStyled",componentId:"-5tfg5"})`display:flex;position:relative;width:100%;flex-direction:column;&.spacing-none ${e.FormItemStyled}:not(:last-child){margin-bottom:0;}&.spacing-nano ${e.FormItemStyled}:not(:last-child){margin-bottom:8px;}&.spacing-micro ${e.FormItemStyled}:not(:last-child){margin-bottom:12px;}&.spacing-tiny ${e.FormItemStyled}:not(:last-child){margin-bottom:16px;}&.spacing-small ${e.FormItemStyled}:not(:last-child){margin-bottom:24px;}&.spacing-medium ${e.FormItemStyled}:not(:last-child){margin-bottom:32px;}&.spacing-large ${e.FormItemStyled}:not(:last-child){margin-bottom:40px;}&.spacing-huge ${e.FormItemStyled}:not(:last-child){margin-bottom:48px;}/*${o.FormItemGroupStyled}${e.FormItemStyled}${o.FormItemGroupStyled}${e.FormItemStyled}${o.FormItemGroupStyled}${e.FormItemStyled}${o.FormItemGroupStyled}${e.FormItemStyled}${o.FormItemGroupStyled}${e.FormItemStyled}${o.FormItemGroupStyled}${e.FormItemStyled}${o.FormItemGroupStyled}${e.FormItemStyled}${o.FormItemGroupStyled}${e.FormItemStyled}*/`;exports.FormWrapperStyled=r;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),e=require("../FormItem/FormItem.styled.js"),o=require("../FormItemGroup/FormItemGroup.styled.js");function m(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}require("../InputField/InputField.styled.js"),require("../Select/Select.styled.js"),require("../TextArea/TextArea.styled.js");const r=/*#__PURE__*/m(t).default.form.withConfig({displayName:"FormWrapperStyled",componentId:"-5tfg5"})`display:flex;position:relative;width:100%;flex-direction:column;&.spacing-none ${e.FormItemStyled}:not(:last-child){margin-bottom:0;}&.spacing-nano ${e.FormItemStyled}:not(:last-child){margin-bottom:8px;}&.spacing-micro ${e.FormItemStyled}:not(:last-child){margin-bottom:12px;}&.spacing-tiny ${e.FormItemStyled}:not(:last-child){margin-bottom:16px;}&.spacing-small ${e.FormItemStyled}:not(:last-child){margin-bottom:24px;}&.spacing-medium ${e.FormItemStyled}:not(:last-child){margin-bottom:32px;}&.spacing-large ${e.FormItemStyled}:not(:last-child){margin-bottom:40px;}&.spacing-huge ${e.FormItemStyled}:not(:last-child){margin-bottom:48px;}&.spacing-none ${o.FormItemGroupStyled} ${e.FormItemStyled}:last-child{margin-bottom:0;}&.spacing-nano ${o.FormItemGroupStyled} ${e.FormItemStyled}:last-child{margin-bottom:8px;}&.spacing-micro ${o.FormItemGroupStyled} ${e.FormItemStyled}:last-child{margin-bottom:12px;}&.spacing-tiny ${o.FormItemGroupStyled} ${e.FormItemStyled}:last-child{margin-bottom:16px;}&.spacing-small ${o.FormItemGroupStyled} ${e.FormItemStyled}:last-child{margin-bottom:24px;}&.spacing-medium ${o.FormItemGroupStyled} ${e.FormItemStyled}:last-child{margin-bottom:32px;}&.spacing-large ${o.FormItemGroupStyled} ${e.FormItemStyled}:last-child{margin-bottom:40px;}&.spacing-huge ${o.FormItemGroupStyled} ${e.FormItemStyled}:last-child{margin-bottom:48px;}`;exports.FormWrapperStyled=r;
 //# sourceMappingURL=FormWrapper.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormWrapper.styled.js","sources":["../../../../../src/components/Form/FormWrapper/FormWrapper.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { FormItemStyled } from \"../FormItem/FormItem.styled\";\nimport { FormItemGroupStyled } from \"../FormItemGroup/FormItemGroup.styled\";\n\nexport const FormWrapperStyled = styled.form`\n    display        : flex;\n    position       : relative;\n    width          : 100%;\n    flex-direction : column;\n\n    &.spacing-none   ${FormItemStyled}:not(:last-child) { margin-bottom :    0; }\n    &.spacing-nano   ${FormItemStyled}:not(:last-child) { margin-bottom :  8px; }\n    &.spacing-micro  ${FormItemStyled}:not(:last-child) { margin-bottom : 12px; }\n    &.spacing-tiny   ${FormItemStyled}:not(:last-child) { margin-bottom : 16px; }\n    &.spacing-small  ${FormItemStyled}:not(:last-child) { margin-bottom : 24px; }\n    &.spacing-medium ${FormItemStyled}:not(:last-child) { margin-bottom : 32px; }\n    &.spacing-large  ${FormItemStyled}:not(:last-child) { margin-bottom : 40px; }\n    &.spacing-huge   ${FormItemStyled}:not(:last-child) { margin-bottom : 48px; }\n/* \n    &.spacing-none   ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom :    0; }\n    &.spacing-nano   ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom :  8px; }\n    &.spacing-micro  ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom : 12px; }\n    &.spacing-tiny   ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom : 16px; }\n    &.spacing-small  ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom : 24px; }\n    &.spacing-medium ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom : 32px; }\n    &.spacing-large  ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom : 40px; }\n    &.spacing-huge   ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom : 48px; } */\n`;\n"],"names":["FormWrapperStyled","form","FormItemStyled","FormItemGroupStyled"],"mappings":"qZAKaA,4BAA2BC,yJAMjBC,qEACAA,wEACAA,wEACAA,yEACAA,0EACAA,yEACAA,wEACAA,2DAEAC,wBAAuBD,mBACvBC,wBAAuBD,mBACvBC,wBAAuBD,mBACvBC,wBAAuBD,mBACvBC,wBAAuBD,mBACvBC,wBAAuBD,mBACvBC,wBAAuBD,mBACvBC,wBAAuBD"}
+{"version":3,"file":"FormWrapper.styled.js","sources":["../../../../../src/components/Form/FormWrapper/FormWrapper.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { FormItemStyled } from \"../FormItem/FormItem.styled\";\nimport { FormItemGroupStyled } from \"../FormItemGroup/FormItemGroup.styled\";\n\nexport const FormWrapperStyled = styled.form`\n    display        : flex;\n    position       : relative;\n    width          : 100%;\n    flex-direction : column;\n\n    &.spacing-none   ${FormItemStyled}:not(:last-child) { margin-bottom :    0; }\n    &.spacing-nano   ${FormItemStyled}:not(:last-child) { margin-bottom :  8px; }\n    &.spacing-micro  ${FormItemStyled}:not(:last-child) { margin-bottom : 12px; }\n    &.spacing-tiny   ${FormItemStyled}:not(:last-child) { margin-bottom : 16px; }\n    &.spacing-small  ${FormItemStyled}:not(:last-child) { margin-bottom : 24px; }\n    &.spacing-medium ${FormItemStyled}:not(:last-child) { margin-bottom : 32px; }\n    &.spacing-large  ${FormItemStyled}:not(:last-child) { margin-bottom : 40px; }\n    &.spacing-huge   ${FormItemStyled}:not(:last-child) { margin-bottom : 48px; }\n\n    &.spacing-none   ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom :    0; }\n    &.spacing-nano   ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom :  8px; }\n    &.spacing-micro  ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom : 12px; }\n    &.spacing-tiny   ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom : 16px; }\n    &.spacing-small  ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom : 24px; }\n    &.spacing-medium ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom : 32px; }\n    &.spacing-large  ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom : 40px; }\n    &.spacing-huge   ${FormItemGroupStyled} ${FormItemStyled}:last-child { margin-bottom : 48px; }\n`;\n"],"names":["FormWrapperStyled","form","FormItemStyled","FormItemGroupStyled"],"mappings":"qZAKaA,4BAA2BC,yJAMjBC,qEACAA,wEACAA,wEACAA,yEACAA,0EACAA,yEACAA,wEACAA,wEAEAC,yBAAuBD,+DACvBC,yBAAuBD,kEACvBC,yBAAuBD,kEACvBC,yBAAuBD,mEACvBC,yBAAuBD,oEACvBC,yBAAuBD,mEACvBC,yBAAuBD,kEACvBC,yBAAuBD"}

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

@@ -1,2 +1,2 @@
-"use strict";function i(i){return i&&"object"==typeof i&&"default"in i?i:{default:i}}Object.defineProperty(exports,"__esModule",{value:!0});const e=/*#__PURE__*/i(require("styled-components")).default.input.withConfig({displayName:"InputFieldStyled",componentId:"-18egqfl"})`position:relative;width:100%;flex:1 1 auto;font-family:${i=>i.theme.text.font.sans};color:${i=>i.theme.inputField.default.text};background-color:${i=>i.theme.inputField.default.bg};border:1px solid ${i=>i.theme.inputField.default.border};border-radius:${i=>i.theme.inputField.default.borderRadius};padding:12px;line-height:1;&:active,&:focus{background-color:${i=>i.theme.inputField.onFocus.bg};border:2px solid ${i=>i.theme.inputField.onFocus.border};color:${i=>i.theme.inputField.onFocus.text};padding:11px;}&[type=password]{letter-spacing:4px;}&[type=password]:placeholder-shown{letter-spacing:unset;}&.with-icon-left{padding-left:40px;}&.with-icon-right{padding-right:40px;}span.icon-left,span.icon-right{position:absolute;bottom:12px;width:24px;height:24px;}span.icon-left svg,span.icon-right svg{fill:${i=>i.theme.inputField.icons.default.fill};transition:all 0.2s;width:24px;height:24px;}span.icon-left{left:8px;}span.icon-right{right:8px;opacity:0.24;}&.with-icon-left:focus ~ span.icon-left svg{fill:${i=>i.theme.inputField.icons.onFocus.fill};}&.validate-this{padding-right:40px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICA8cG9seWxpbmUgcG9pbnRzPSIzLjUgMTIuNSA4LjUgMTcuNSAyMC41IDUuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTJlMmUyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==);background-repeat:no-repeat;background-position:right 12px top 56%;background-size:24px;&:focus{background-position:right 11px top 56%;}}&.validate-this ~ span.icon-right{display:none;}&.validate-this:valid:not(:placeholder-shown){background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICA8cG9seWxpbmUgcG9pbnRzPSIzLjUgMTIuNSA4LjUgMTcuNSAyMC41IDUuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGVjMDVjIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==);}&:invalid:not(:focus):not(:placeholder-shown){border:1px solid ${i=>i.theme.inputField.icons.isValid.border};background-color:${i=>i.theme.inputField.isInvalid.bg};background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICA8bGluZSB4MT0iNi41IiB5MT0iMTcuNSIgeDI9IjE4LjUiIHkyPSI1LjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2VmNDM0MyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz4gIDxsaW5lIHgxPSI2LjUiIHkxPSI1LjUiIHgyPSIxOC41IiB5Mj0iMTcuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZWY0MzQzIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==);background-repeat:no-repeat;background-position:98%;background-size:24px;}`;exports.InputFieldStyled=e;
+"use strict";function i(i){return i&&"object"==typeof i&&"default"in i?i:{default:i}}Object.defineProperty(exports,"__esModule",{value:!0});const e=/*#__PURE__*/i(require("styled-components")).default.input.withConfig({displayName:"InputFieldStyled",componentId:"-18egqfl"})`position:relative;width:100%;flex:1 1 auto;font-family:${i=>i.theme.text.font.sans};color:${i=>i.theme.inputField.default.text};background-color:${i=>i.theme.inputField.default.bg};border:1px solid ${i=>i.theme.inputField.default.border};border-radius:${i=>i.theme.inputField.default.borderRadius};padding:12px;line-height:1;&:active,&:focus{background-color:${i=>i.theme.inputField.onFocus.bg};border:2px solid ${i=>i.theme.inputField.onFocus.border};color:${i=>i.theme.inputField.onFocus.text};padding:11px;}&[type=password]{letter-spacing:4px;}&[type=password]:placeholder-shown{letter-spacing:unset;}&.with-icon-left{padding-left:40px;}&.with-icon-right{padding-right:40px;}span.icon-left,span.icon-right{position:absolute;bottom:12px;width:24px;height:24px;}span.icon-left svg,span.icon-right svg{fill:${i=>i.theme.inputField.icons.default.fill};transition:all 0.2s;width:24px;height:24px;}span.icon-left{left:8px;}span.icon-right{right:8px;opacity:0.24;}&.with-icon-left:focus ~ span.icon-left svg{fill:${i=>i.theme.inputField.icons.onFocus.fill};}&.validate-this{padding-right:40px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICA8cG9seWxpbmUgcG9pbnRzPSIzLjUgMTIuNSA4LjUgMTcuNSAyMC41IDUuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTJlMmUyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==);background-repeat:no-repeat;background-position:right 12px top 56%;background-size:24px;&:focus{background-position:right 11px top 56%;}}&.validate-this ~ span.icon-right{display:none;}&.validate-this:valid:not(:placeholder-shown){background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICA8cG9seWxpbmUgcG9pbnRzPSIzLjUgMTIuNSA4LjUgMTcuNSAyMC41IDUuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGVjMDVjIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==);}&:invalid:not(:focus):not(:placeholder-shown){color:${i=>i.theme.inputField.isInvalid.text};border:1px solid ${i=>i.theme.inputField.icons.isValid.border};background-color:${i=>i.theme.inputField.isInvalid.bg};background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICA8bGluZSB4MT0iNi41IiB5MT0iMTcuNSIgeDI9IjE4LjUiIHkyPSI1LjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2VmNDM0MyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz4gIDxsaW5lIHgxPSI2LjUiIHkxPSI1LjUiIHgyPSIxOC41IiB5Mj0iMTcuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZWY0MzQzIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==);background-repeat:no-repeat;background-position:98%;background-size:24px;}`;exports.InputFieldStyled=e;
 //# sourceMappingURL=InputField.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputField.styled.js","sources":["../../../../../src/components/Form/InputField/InputField.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { InputFieldProps } from \"./InputField\";\n\n\nexport const InputFieldStyled = styled.input`\n    position         : relative;\n    width            : 100%;\n    flex             : 1 1 auto;\n    font-family      : ${(props: InputFieldProps) => props.theme.text.font.sans};\n    color            : ${(props: InputFieldProps) => props.theme.inputField.default.text};\n    background-color : ${(props: InputFieldProps) => props.theme.inputField.default.bg};\n    border           : 1px solid ${(props: InputFieldProps) => props.theme.inputField.default.border};\n    border-radius    : ${(props : InputFieldProps) => props.theme.inputField.default.borderRadius};\n    padding          : 12px;\n    line-height      : 1;\n\n    &:active,\n    &:focus {\n        background-color : ${(props: InputFieldProps) => props.theme.inputField.onFocus.bg};\n        border           : 2px solid ${(props : InputFieldProps) => props.theme.inputField.onFocus.border};\n        color            : ${(props: InputFieldProps) => props.theme.inputField.onFocus.text};\n        padding          : 11px;\n    }\n\n    &[type=password] { letter-spacing : 4px; }\n\n    &[type=password]:placeholder-shown { letter-spacing : unset; }\n\n    /*  LEFT AND  RIGHT ICONS  ============================================  */\n    &.with-icon-left  { padding-left : 40px; }\n    &.with-icon-right { padding-right : 40px; }\n\n    span.icon-left,\n    span.icon-right {\n        position : absolute;\n        bottom   : 12px;\n        width    : 24px;\n        height   : 24px;\n    }\n\n    span.icon-left svg,\n    span.icon-right svg {\n        fill       : ${(props: InputFieldProps) => props.theme.inputField.icons.default.fill};\n        transition : all 0.2s;\n        width      : 24px;\n        height     : 24px;\n    }\n\n    span.icon-left { left : 8px; }\n\n    span.icon-right {\n        right   : 8px;\n        opacity : 0.24;\n    }\n\n    &.with-icon-left:focus ~ span.icon-left svg {\n        fill : ${(props: InputFieldProps) => props.theme.inputField.icons.onFocus.fill};\n    }\n\n    /*  Grey check mark  */\n    &.validate-this {\n        padding-right       : 40px;\n        background-image    : url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICA8cG9seWxpbmUgcG9pbnRzPSIzLjUgMTIuNSA4LjUgMTcuNSAyMC41IDUuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTJlMmUyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==);\n        background-repeat   : no-repeat;\n        background-position : right 12px top 56%;\n        background-size     : 24px;\n\n        &:focus {\n            background-position : right 11px top 56%;\n        }\n    }\n\n    &.validate-this ~ span.icon-right { display : none; }\n\n    /*  Green check mark  */\n    &.validate-this:valid:not(:placeholder-shown) {\n        background-image : url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICA8cG9seWxpbmUgcG9pbnRzPSIzLjUgMTIuNSA4LjUgMTcuNSAyMC41IDUuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGVjMDVjIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==);\n    }\n\n    /*  Red cross  */\n    &:invalid:not(:focus):not(:placeholder-shown) {\n        border              : 1px solid ${(props: InputFieldProps) => props.theme.inputField.icons.isValid.border};\n        background-color    : ${(props: InputFieldProps) => props.theme.inputField.isInvalid.bg};\n        background-image    : url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICA8bGluZSB4MT0iNi41IiB5MT0iMTcuNSIgeDI9IjE4LjUiIHkyPSI1LjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2VmNDM0MyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz4gIDxsaW5lIHgxPSI2LjUiIHkxPSI1LjUiIHgyPSIxOC41IiB5Mj0iMTcuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZWY0MzQzIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==);\n        background-repeat   : no-repeat;\n        background-position : 98%;\n        background-size     : 24px;\n    }\n`;\n"],"names":["InputFieldStyled","input","props","theme","text","font","sans","inputField","default","bg","border","borderRadius","onFocus","icons","fill","isValid","isInvalid"],"mappings":"kJAKaA,uDAA0BC,mIAIbC,GAA2BA,EAAMC,MAAMC,KAAKC,KAAKC,cACjDJ,GAA2BA,EAAMC,MAAMI,WAAWC,QAAQJ,yBAC1DF,GAA2BA,EAAMC,MAAMI,WAAWC,QAAQC,uBAChDP,GAA2BA,EAAMC,MAAMI,WAAWC,QAAQE,wBACpER,GAA4BA,EAAMC,MAAMI,WAAWC,QAAQG,6EAMvDT,GAA2BA,EAAMC,MAAMI,WAAWK,QAAQH,uBAChDP,GAA4BA,EAAMC,MAAMI,WAAWK,QAAQF,gBACrER,GAA2BA,EAAMC,MAAMI,WAAWK,QAAQR,+TAsBhEF,GAA2BA,EAAMC,MAAMI,WAAWM,MAAML,QAAQM,sKActEZ,GAA2BA,EAAMC,MAAMI,WAAWM,MAAMD,QAAQE,q6BAyBvCZ,GAA2BA,EAAMC,MAAMI,WAAWM,MAAME,QAAQL,2BAC1ER,GAA2BA,EAAMC,MAAMI,WAAWS,UAAUP"}
+{"version":3,"file":"InputField.styled.js","sources":["../../../../../src/components/Form/InputField/InputField.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { InputFieldProps } from \"./InputField\";\n\n\nexport const InputFieldStyled = styled.input`\n    position         : relative;\n    width            : 100%;\n    flex             : 1 1 auto;\n    font-family      : ${(props: InputFieldProps) => props.theme.text.font.sans};\n    color            : ${(props: InputFieldProps) => props.theme.inputField.default.text};\n    background-color : ${(props: InputFieldProps) => props.theme.inputField.default.bg};\n    border           : 1px solid ${(props: InputFieldProps) => props.theme.inputField.default.border};\n    border-radius    : ${(props : InputFieldProps) => props.theme.inputField.default.borderRadius};\n    padding          : 12px;\n    line-height      : 1;\n\n    &:active,\n    &:focus {\n        background-color : ${(props: InputFieldProps) => props.theme.inputField.onFocus.bg};\n        border           : 2px solid ${(props : InputFieldProps) => props.theme.inputField.onFocus.border};\n        color            : ${(props: InputFieldProps) => props.theme.inputField.onFocus.text};\n        padding          : 11px;\n    }\n\n    &[type=password] { letter-spacing : 4px; }\n\n    &[type=password]:placeholder-shown { letter-spacing : unset; }\n\n    /*  LEFT AND  RIGHT ICONS  ============================================  */\n    &.with-icon-left  { padding-left : 40px; }\n    &.with-icon-right { padding-right : 40px; }\n\n    span.icon-left,\n    span.icon-right {\n        position : absolute;\n        bottom   : 12px;\n        width    : 24px;\n        height   : 24px;\n    }\n\n    span.icon-left svg,\n    span.icon-right svg {\n        fill       : ${(props: InputFieldProps) => props.theme.inputField.icons.default.fill};\n        transition : all 0.2s;\n        width      : 24px;\n        height     : 24px;\n    }\n\n    span.icon-left { left : 8px; }\n\n    span.icon-right {\n        right   : 8px;\n        opacity : 0.24;\n    }\n\n    &.with-icon-left:focus ~ span.icon-left svg {\n        fill : ${(props: InputFieldProps) => props.theme.inputField.icons.onFocus.fill};\n    }\n\n    /*  Grey check mark  */\n    &.validate-this {\n        padding-right       : 40px;\n        background-image    : url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICA8cG9seWxpbmUgcG9pbnRzPSIzLjUgMTIuNSA4LjUgMTcuNSAyMC41IDUuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTJlMmUyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==);\n        background-repeat   : no-repeat;\n        background-position : right 12px top 56%;\n        background-size     : 24px;\n\n        &:focus {\n            background-position : right 11px top 56%;\n        }\n    }\n\n    &.validate-this ~ span.icon-right { display : none; }\n\n    /*  Green check mark  */\n    &.validate-this:valid:not(:placeholder-shown) {\n        background-image : url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICA8cG9seWxpbmUgcG9pbnRzPSIzLjUgMTIuNSA4LjUgMTcuNSAyMC41IDUuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGVjMDVjIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==);\n    }\n\n    /*  Red cross  */\n    &:invalid:not(:focus):not(:placeholder-shown) {\n        color               : ${(props: InputFieldProps) => props.theme.inputField.isInvalid.text};\n        border              : 1px solid ${(props: InputFieldProps) => props.theme.inputField.icons.isValid.border};\n        background-color    : ${(props: InputFieldProps) => props.theme.inputField.isInvalid.bg};\n        background-image    : url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICA8bGluZSB4MT0iNi41IiB5MT0iMTcuNSIgeDI9IjE4LjUiIHkyPSI1LjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2VmNDM0MyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz4gIDxsaW5lIHgxPSI2LjUiIHkxPSI1LjUiIHgyPSIxOC41IiB5Mj0iMTcuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZWY0MzQzIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==);\n        background-repeat   : no-repeat;\n        background-position : 98%;\n        background-size     : 24px;\n    }\n`;\n"],"names":["InputFieldStyled","input","props","theme","text","font","sans","inputField","default","bg","border","borderRadius","onFocus","icons","fill","isInvalid","isValid"],"mappings":"kJAKaA,uDAA0BC,mIAIbC,GAA2BA,EAAMC,MAAMC,KAAKC,KAAKC,cACjDJ,GAA2BA,EAAMC,MAAMI,WAAWC,QAAQJ,yBAC1DF,GAA2BA,EAAMC,MAAMI,WAAWC,QAAQC,uBAChDP,GAA2BA,EAAMC,MAAMI,WAAWC,QAAQE,wBACpER,GAA4BA,EAAMC,MAAMI,WAAWC,QAAQG,6EAMvDT,GAA2BA,EAAMC,MAAMI,WAAWK,QAAQH,uBAChDP,GAA4BA,EAAMC,MAAMI,WAAWK,QAAQF,gBACrER,GAA2BA,EAAMC,MAAMI,WAAWK,QAAQR,+TAsBhEF,GAA2BA,EAAMC,MAAMI,WAAWM,MAAML,QAAQM,sKActEZ,GAA2BA,EAAMC,MAAMI,WAAWM,MAAMD,QAAQE,05BAyBjDZ,GAA2BA,EAAMC,MAAMI,WAAWQ,UAAUX,yBAClDF,GAA2BA,EAAMC,MAAMI,WAAWM,MAAMG,QAAQN,2BAC1ER,GAA2BA,EAAMC,MAAMI,WAAWQ,UAAUN"}

package/dist/cjs/components/Typography/Text.d.ts

@@ -1,11 +1,10 @@
 import React from "react";
-import { CommonAndHTMLProps } from "../Element/constants";
+import { CommonAndHTMLProps, SpacingTypes, WeightTypes } from "../Element/constants";
 export interface TextCustomProps {
-    isSans?: boolean;
-    isSerif?: boolean;
-    isMono?: boolean;
-    weight?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
-    size?: "nano" | "micro" | "tiny" | "small" | "medium" | "large" | "huge";
+    style?: "sans-serif" | "serif" | "mono";
+    weight?: WeightTypes;
+    isSubtext?: boolean;
+    size?: SpacingTypes;
     align?: "left" | "centre" | "center" | "right";
 }
 export declare type TextElementType = HTMLParagraphElement;

package/dist/cjs/components/Typography/Text.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../external/Element.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=/*#__PURE__*/t(require("react"));const r=s.default.forwardRef(((t,r)=>{var{weight:i,size:n,isSans:a,isSerif:o,isMono:u,align:f}=t,l=e.__rest(t,["weight","size","isSans","isSerif","isMono","align"]);let p=[];return i&&p.push(`weight-${i}`),n&&p.push(`text-${n}`),a&&p.push("font-sans"),o&&p.push("font-serif"),u&&p.push("font-mono"),f&&p.push(`text-${f}`),s.default.createElement(e.Element,Object.assign({as:"p",ref:r,classNames:p},l))}));exports.Text=r;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../external/Element.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=/*#__PURE__*/t(require("react"));const r=s.default.forwardRef(((t,r)=>{var{weight:u,size:a,style:i="sans-serif",align:l,isSubtext:n}=t,f=e.__rest(t,["weight","size","style","align","isSubtext"]);let p=[];return u&&p.push(`weight-${u}`),a&&p.push(`text-${a}`),i&&p.push(i),n&&p.push("sub-text"),l&&p.push(`text-${l}`),s.default.createElement(e.Element,Object.assign({as:"p",ref:r,classNames:p},f))}));exports.Text=r;
 //# sourceMappingURL=Text.js.map

package/dist/cjs/components/Typography/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../../src/components/Typography/Text.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\n\n// prettier-ignore\nexport interface TextCustomProps {\n    isSans  ? : boolean;\n    isSerif ? : boolean;\n    isMono  ? : boolean;\n    weight  ? : \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\";\n    size    ? : \"nano\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\" | \"huge\";\n    align   ? : \"left\" | \"centre\" | \"center\" | \"right\";\n}\n\nexport type TextElementType = HTMLParagraphElement;\nexport type TextProps = Omit<CommonAndHTMLProps<TextElementType>, keyof TextCustomProps> & TextCustomProps;\n\nexport const Text = React.forwardRef(\n    ({ weight, size, isSans, isSerif, isMono, align, ...props }: TextProps, ref: React.Ref<TextElementType>) => {\n        let classNames = [];\n\n        if (weight) {\n            classNames.push(`weight-${weight}`);\n        }\n\n        if (size) {\n            classNames.push(`text-${size}`);\n        }\n\n        if (isSans) {\n            classNames.push(\"font-sans\");\n        }\n\n        if (isSerif) {\n            classNames.push(\"font-serif\");\n        }\n\n        if (isMono) {\n            classNames.push(\"font-mono\");\n        }\n\n        if (align) {\n            classNames.push(`text-${align}`);\n        }\n\n        return <Element<TextElementType> as=\"p\" ref={ref} classNames={classNames} {...props} />;\n    }\n);\n"],"names":["Text","React","forwardRef","_a","ref","weight","size","isSans","isSerif","isMono","align","props","classNames","push","Element","as"],"mappings":"oOAkBaA,EAAOC,UAAMC,YACtB,CAACC,EAAuEC,SAAvEC,OAAEA,EAAFC,KAAUA,EAAVC,OAAgBA,EAAhBC,QAAwBA,EAAxBC,OAAiCA,EAAjCC,MAAyCA,KAAUC,aAAnD,2DACOC,EAAa,UAEbP,GACAO,EAAWC,eAAeR,KAG1BC,GACAM,EAAWC,aAAaP,KAGxBC,GACAK,EAAWC,KAAK,aAGhBL,GACAI,EAAWC,KAAK,cAGhBJ,GACAG,EAAWC,KAAK,aAGhBH,GACAE,EAAWC,aAAaH,KAGrBT,wBAACa,yBAAyBC,GAAG,IAAIX,IAAKA,EAAKQ,WAAYA,GAAgBD"}
+{"version":3,"file":"Text.js","sources":["../../../../src/components/Typography/Text.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps, SpacingTypes, WeightTypes } from \"../Element/constants\";\n\n// prettier-ignore\nexport interface TextCustomProps {\n    style     ? : \"sans-serif\" | \"serif\" | \"mono\";\n    weight    ? : WeightTypes;\n    isSubtext ? : boolean;\n    size      ? : SpacingTypes;\n    align     ? : \"left\" | \"centre\" | \"center\" | \"right\";\n}\n\nexport type TextElementType = HTMLParagraphElement;\nexport type TextProps = Omit<CommonAndHTMLProps<TextElementType>, keyof TextCustomProps> & TextCustomProps;\n\nexport const Text = React.forwardRef(\n    ({ weight, size, style = \"sans-serif\", align, isSubtext, ...props }: TextProps, ref: React.Ref<TextElementType>) => {\n        let classNames = [];\n\n        if (weight) {\n            classNames.push(`weight-${weight}`);\n        }\n\n        if (size) {\n            classNames.push(`text-${size}`);\n        }\n\n        if (style) {\n            classNames.push(style);\n        }\n\n        if (isSubtext) {\n            classNames.push(\"sub-text\");\n        }\n\n        if (align) {\n            classNames.push(`text-${align}`);\n        }\n\n        return <Element<TextElementType> as=\"p\" ref={ref} classNames={classNames} {...props} />;\n    }\n);\n"],"names":["Text","React","forwardRef","_a","ref","weight","size","style","align","isSubtext","props","classNames","push","Element","as"],"mappings":"oOAiBaA,EAAOC,UAAMC,YACtB,CAACC,EAA+EC,SAA/EC,OAAEA,EAAFC,KAAUA,EAAVC,MAAgBA,EAAQ,aAAxBC,MAAsCA,EAAtCC,UAA6CA,KAAcC,aAA3D,mDACOC,EAAa,UAEbN,GACAM,EAAWC,eAAeP,KAG1BC,GACAK,EAAWC,aAAaN,KAGxBC,GACAI,EAAWC,KAAKL,GAGhBE,GACAE,EAAWC,KAAK,YAGhBJ,GACAG,EAAWC,aAAaJ,KAGrBP,wBAACY,yBAAyBC,GAAG,IAAIV,IAAKA,EAAKO,WAAYA,GAAgBD"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=require("styled-components").css`body{font-size:${e=>e.theme.text.paras.size}em;line-height:${e=>e.theme.text.paras.lineHeight};font-family:${e=>e.theme.text.font.sans};word-wrap:normal;text-rendering:optimizeLegibility;background-color:${e=>e.theme.body.bg};}h1,h2,h3,h4,h5,h6{font-family:${e=>e.theme.text.headings.font};font-weight:${e=>e.theme.text.headings.weight};color:${e=>e.theme.text.headings.color};line-height:${e=>e.theme.text.headings.lineHeight};margin:0;}h1{font-size:${e=>e.theme.text.paras.size*Math.pow(e.theme.text.headings.multiplier,8)}em;}h2{font-size:${e=>e.theme.text.paras.size*Math.pow(e.theme.text.headings.multiplier,6)}em;}h3{font-size:${e=>e.theme.text.paras.size*Math.pow(e.theme.text.headings.multiplier,4)}em;}h4{font-size:${e=>e.theme.text.paras.size*Math.pow(e.theme.text.headings.multiplier,3)}em;}h5{font-size:${e=>e.theme.text.paras.size*Math.pow(e.theme.text.headings.multiplier,2)}em;}h6{font-size:${e=>e.theme.text.paras.size*Math.pow(e.theme.text.headings.multiplier,1)}em;}@media all and (max-width : 720px){h1{font-size:32px;}h2{font-size:28px;}h3{font-size:24px;}h4{font-size:20px;}h5{font-size:18px;}h6{font-size:16px;}p{font-size:14px;}h1,h2,h3,h4,h5,h6{word-wrap:break-word;}}p{font-family:${e=>e.theme.text.paras.font};color:${e=>e.theme.text.paras.color};}a{cursor:pointer;font-family:${e=>e.theme.text.links.font};color:${e=>e.theme.text.links.default.color};font-weight:bold;transition:all 0.2s;width:fit-content;}a:not(.ff-button):hover{color:${e=>e.theme.text.links.onHover.color};}a:active{opacity:0.72;}.font-sans{font-family:${e=>e.theme.text.font.sans};}.font-serif{font-family:${e=>e.theme.text.font.serif};}.font-mono{font-family:${e=>e.theme.text.font.mono};}.text-left{text-align:left;}.text-centre,.text-center{text-align:center;}.text-right{text-align:right;}::-moz-selection{background:${e=>e.theme.text.selection.bg};color:${e=>e.theme.text.selection.text};}::selection{background:${e=>e.theme.text.selection.bg};color:${e=>e.theme.text.selection.text};}`;exports.TypographyStyled=e;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const t=require("styled-components").css`body{font-size:${t=>t.theme.text.paras.size}em;font-family:${t=>t.theme.text.font.sans};word-wrap:normal;text-rendering:optimizeLegibility;background-color:${t=>t.theme.body.bg};}h1,h2,h3,h4,h5,h6{font-family:${t=>t.theme.text.headings.font};font-weight:${t=>t.theme.text.headings.weight};color:${t=>t.theme.text.headings.color};line-height:${t=>t.theme.text.headings.lineHeight};margin:0;}h1{font-size:${t=>t.theme.text.paras.size*Math.pow(t.theme.text.headings.multiplier,8)}em;}h2{font-size:${t=>t.theme.text.paras.size*Math.pow(t.theme.text.headings.multiplier,6)}em;}h3{font-size:${t=>t.theme.text.paras.size*Math.pow(t.theme.text.headings.multiplier,4)}em;}h4{font-size:${t=>t.theme.text.paras.size*Math.pow(t.theme.text.headings.multiplier,3)}em;}h5{font-size:${t=>t.theme.text.paras.size*Math.pow(t.theme.text.headings.multiplier,2)}em;}h6{font-size:${t=>t.theme.text.paras.size*Math.pow(t.theme.text.headings.multiplier,1)}em;}@media all and (max-width : 720px){h1{font-size:32px;}h2{font-size:28px;}h3{font-size:24px;}h4{font-size:20px;}h5{font-size:18px;}h6{font-size:16px;}p{font-size:14px;}h1,h2,h3,h4,h5,h6{word-wrap:break-word;}}p{font-family:${t=>t.theme.text.paras.font};color:${t=>t.theme.text.paras.color};}p,a,li,span{line-height:${t=>t.theme.text.paras.lineHeight};}a{cursor:pointer;font-family:${t=>t.theme.text.links.font};color:${t=>t.theme.text.links.default.color};font-weight:bold;transition:all 0.2s;width:fit-content;}a:not(.ff-button):hover{color:${t=>t.theme.text.links.onHover.color};}a:active{opacity:0.72;}.font-sans{font-family:${t=>t.theme.text.font.sans};}.font-serif{font-family:${t=>t.theme.text.font.serif};}.font-mono{font-family:${t=>t.theme.text.font.mono};}.sub-text{color:${t=>t.theme.text.paras.subtext};}.text-left{text-align:left;}.text-centre,.text-center{text-align:center;}.text-right{text-align:right;}.weight-100{font-weight:100;}.weight-200{font-weight:200;}.weight-300{font-weight:300;}.weight-400{font-weight:400;}.weight-500{font-weight:500;}.weight-600{font-weight:600;}.weight-700{font-weight:700;}.weight-800{font-weight:800;}.weight-900{font-weight:900;}.text-nano{font-size:32%;}.text-micro{font-size:48%;}.text-tiny{font-size:64%;}.text-small{font-size:80%;}.text-medium{font-size:100%;}.text-large{font-size:128%;}.text-huge{font-size:160%;}::-moz-selection{background:${t=>t.theme.text.selection.bg};color:${t=>t.theme.text.selection.text};}::selection{background:${t=>t.theme.text.selection.bg};color:${t=>t.theme.text.selection.text};}`;exports.TypographyStyled=t;
 //# sourceMappingURL=Typography.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Typography.styled.js","sources":["../../../../src/components/Typography/Typography.styled.tsx"],"sourcesContent":["import { css } from \"styled-components\";\n\nimport { GlobalStyledProps } from \"../ThemeProvider/ThemeProvider\";\n\n\nexport const TypographyStyled = css`\n    body {\n        font-size        : ${(props: GlobalStyledProps) => props.theme.text.paras.size}em;\n        line-height      : ${(props: GlobalStyledProps) => props.theme.text.paras.lineHeight};\n        font-family      : ${(props: GlobalStyledProps) => props.theme.text.font.sans};\n        word-wrap        : normal;\n        text-rendering   : optimizeLegibility;\n        background-color : ${(props: GlobalStyledProps) => props.theme.body.bg};\n    }\n\n    h1, h2, h3, h4, h5, h6 {\n        font-family : ${(props: GlobalStyledProps) => props.theme.text.headings.font};\n        font-weight : ${(props: GlobalStyledProps) => props.theme.text.headings.weight};\n        color       : ${(props: GlobalStyledProps) => props.theme.text.headings.color};\n        line-height : ${(props: GlobalStyledProps) => props.theme.text.headings.lineHeight};\n        margin      : 0;\n    }\n\n    h1 { font-size : ${(props: GlobalStyledProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 8)}em; }\n    h2 { font-size : ${(props: GlobalStyledProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 6)}em; }\n    h3 { font-size : ${(props: GlobalStyledProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 4)}em; }\n    h4 { font-size : ${(props: GlobalStyledProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 3)}em; }\n    h5 { font-size : ${(props: GlobalStyledProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 2)}em; }\n    h6 { font-size : ${(props: GlobalStyledProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 1)}em; }\n\n    @media all and (max-width : 720px) {\n        h1 { font-size : 32px; }\n        h2 { font-size : 28px; }\n        h3 { font-size : 24px; }\n        h4 { font-size : 20px; }\n        h5 { font-size : 18px; }\n        h6 { font-size : 16px; }\n        p  { font-size : 14px; }\n\n        h1, h2, h3, h4, h5, h6 { word-wrap : break-word; }\n    }\n\n    p {\n        font-family : ${(props: GlobalStyledProps) => props.theme.text.paras.font};\n        color       : ${(props: GlobalStyledProps) => props.theme.text.paras.color};\n    }\n\n    a {\n        cursor      : pointer;\n        font-family : ${(props: GlobalStyledProps) => props.theme.text.links.font};\n        color       : ${(props: GlobalStyledProps) => props.theme.text.links.default.color};\n        font-weight : bold;\n        transition  : all 0.2s;\n        width       : fit-content;\n    }\n\n    a:not(.ff-button):hover { color : ${(props: GlobalStyledProps) => props.theme.text.links.onHover.color}; }\n\n    a:active { opacity: 0.72; }\n\n    .font-sans  { font-family : ${(props: GlobalStyledProps) => props.theme.text.font.sans}; }\n    .font-serif { font-family : ${(props: GlobalStyledProps) => props.theme.text.font.serif}; }\n    .font-mono  { font-family : ${(props: GlobalStyledProps) => props.theme.text.font.mono}; }\n\n    .text-left   { text-align : left; }\n    .text-centre,\n    .text-center { text-align : center; }\n    .text-right  { text-align : right; }\n\n    /*  Colour of highlight and text colour\n    - for Firefox browsers  */\n    ::-moz-selection {\n        background : ${(props: GlobalStyledProps) => props.theme.text.selection.bg};\n        color      : ${(props: GlobalStyledProps) => props.theme.text.selection.text};\n    }\n    //  Same thing - for Webkit browsers\n    ::selection {\n        background : ${(props: GlobalStyledProps) => props.theme.text.selection.bg};\n        color      : ${(props: GlobalStyledProps) => props.theme.text.selection.text};\n    }\n`;\n"],"names":["TypographyStyled","props","theme","text","paras","size","lineHeight","font","sans","body","bg","headings","weight","color","Math","pow","multiplier","links","default","onHover","serif","mono","selection"],"mappings":"0EAKaA,oDAEiBC,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMC,sBACpDJ,GAA6BA,EAAMC,MAAMC,KAAKC,MAAME,0BACpDL,GAA6BA,EAAMC,MAAMC,KAAKI,KAAKC,4EAGnDP,GAA6BA,EAAMC,MAAMO,KAAKC,qCAInDT,GAA6BA,EAAMC,MAAMC,KAAKQ,SAASJ,oBACvDN,GAA6BA,EAAMC,MAAMC,KAAKQ,SAASC,gBACvDX,GAA6BA,EAAMC,MAAMC,KAAKQ,SAASE,qBACvDZ,GAA6BA,EAAMC,MAAMC,KAAKQ,SAASL,qCAIxDL,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMC,KAAOS,KAAKC,IAAId,EAAMC,MAAMC,KAAKQ,SAASK,WAAY,sBAC1Gf,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMC,KAAOS,KAAKC,IAAId,EAAMC,MAAMC,KAAKQ,SAASK,WAAY,sBAC1Gf,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMC,KAAOS,KAAKC,IAAId,EAAMC,MAAMC,KAAKQ,SAASK,WAAY,sBAC1Gf,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMC,KAAOS,KAAKC,IAAId,EAAMC,MAAMC,KAAKQ,SAASK,WAAY,sBAC1Gf,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMC,KAAOS,KAAKC,IAAId,EAAMC,MAAMC,KAAKQ,SAASK,WAAY,sBAC1Gf,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMC,KAAOS,KAAKC,IAAId,EAAMC,MAAMC,KAAKQ,SAASK,WAAY,uOAezGf,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMG,cACpDN,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMS,uCAKpDZ,GAA6BA,EAAMC,MAAMC,KAAKc,MAAMV,cACpDN,GAA6BA,EAAMC,MAAMC,KAAKc,MAAMC,QAAQL,+FAM5CZ,GAA6BA,EAAMC,MAAMC,KAAKc,MAAME,QAAQN,wDAIlEZ,GAA6BA,EAAMC,MAAMC,KAAKI,KAAKC,iCACnDP,GAA6BA,EAAMC,MAAMC,KAAKI,KAAKa,iCACnDnB,GAA6BA,EAAMC,MAAMC,KAAKI,KAAKc,4IAU9DpB,GAA6BA,EAAMC,MAAMC,KAAKmB,UAAUZ,YACxDT,GAA6BA,EAAMC,MAAMC,KAAKmB,UAAUnB,gCAIxDF,GAA6BA,EAAMC,MAAMC,KAAKmB,UAAUZ,YACxDT,GAA6BA,EAAMC,MAAMC,KAAKmB,UAAUnB"}
+{"version":3,"file":"Typography.styled.js","sources":["../../../../src/components/Typography/Typography.styled.tsx"],"sourcesContent":["import { css } from \"styled-components\";\n\nimport { GlobalStyledProps } from \"../ThemeProvider/ThemeProvider\";\n\n\nexport const TypographyStyled = css`\n    body {\n        font-size        : ${(props: GlobalStyledProps) => props.theme.text.paras.size}em;\n        font-family      : ${(props: GlobalStyledProps) => props.theme.text.font.sans};\n        word-wrap        : normal;\n        text-rendering   : optimizeLegibility;\n        background-color : ${(props: GlobalStyledProps) => props.theme.body.bg};\n    }\n\n    h1, h2, h3, h4, h5, h6 {\n        font-family : ${(props: GlobalStyledProps) => props.theme.text.headings.font};\n        font-weight : ${(props: GlobalStyledProps) => props.theme.text.headings.weight};\n        color       : ${(props: GlobalStyledProps) => props.theme.text.headings.color};\n        line-height : ${(props: GlobalStyledProps) => props.theme.text.headings.lineHeight};\n        margin      : 0;\n    }\n\n    h1 { font-size : ${(props: GlobalStyledProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 8)}em; }\n    h2 { font-size : ${(props: GlobalStyledProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 6)}em; }\n    h3 { font-size : ${(props: GlobalStyledProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 4)}em; }\n    h4 { font-size : ${(props: GlobalStyledProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 3)}em; }\n    h5 { font-size : ${(props: GlobalStyledProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 2)}em; }\n    h6 { font-size : ${(props: GlobalStyledProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 1)}em; }\n\n    @media all and (max-width : 720px) {\n        h1 { font-size : 32px; }\n        h2 { font-size : 28px; }\n        h3 { font-size : 24px; }\n        h4 { font-size : 20px; }\n        h5 { font-size : 18px; }\n        h6 { font-size : 16px; }\n        p  { font-size : 14px; }\n\n        h1, h2, h3, h4, h5, h6 { word-wrap : break-word; }\n    }\n\n    p {\n        font-family : ${(props: GlobalStyledProps) => props.theme.text.paras.font};\n        color       : ${(props: GlobalStyledProps) => props.theme.text.paras.color};\n    }\n    \n    p,\n    a,\n    li,\n    span { line-height : ${(props: GlobalStyledProps) => props.theme.text.paras.lineHeight}; }\n\n    a {\n        cursor      : pointer;\n        font-family : ${(props: GlobalStyledProps) => props.theme.text.links.font};\n        color       : ${(props: GlobalStyledProps) => props.theme.text.links.default.color};\n        font-weight : bold;\n        transition  : all 0.2s;\n        width       : fit-content;\n    }\n\n    a:not(.ff-button):hover { color : ${(props: GlobalStyledProps) => props.theme.text.links.onHover.color}; }\n\n    a:active { opacity: 0.72; }\n\n    .font-sans  { font-family : ${(props: GlobalStyledProps) => props.theme.text.font.sans}; }\n    .font-serif { font-family : ${(props: GlobalStyledProps) => props.theme.text.font.serif}; }\n    .font-mono  { font-family : ${(props: GlobalStyledProps) => props.theme.text.font.mono}; }\n\n    .sub-text { color : ${(props: GlobalStyledProps) => props.theme.text.paras.subtext}; }\n\n    .text-left   { text-align : left; }\n    .text-centre,\n    .text-center { text-align : center; }\n    .text-right  { text-align : right; }\n\n    .weight-100 { font-weight : 100; }\n    .weight-200 { font-weight : 200; }\n    .weight-300 { font-weight : 300; }\n    .weight-400 { font-weight : 400; }\n    .weight-500 { font-weight : 500; }\n    .weight-600 { font-weight : 600; }\n    .weight-700 { font-weight : 700; }\n    .weight-800 { font-weight : 800; }\n    .weight-900 { font-weight : 900; }\n\n    .text-nano   { font-size :  32%; }\n    .text-micro  { font-size :  48%; }\n    .text-tiny   { font-size :  64%; }\n    .text-small  { font-size :  80%; }\n    .text-medium { font-size : 100%; }\n    .text-large  { font-size : 128%; }\n    .text-huge   { font-size : 160%; }\n\n    /*  Colour of highlight and text colour\n    - for Firefox browsers  */\n    ::-moz-selection {\n        background : ${(props: GlobalStyledProps) => props.theme.text.selection.bg};\n        color      : ${(props: GlobalStyledProps) => props.theme.text.selection.text};\n    }\n    //  Same thing - for Webkit browsers\n    ::selection {\n        background : ${(props: GlobalStyledProps) => props.theme.text.selection.bg};\n        color      : ${(props: GlobalStyledProps) => props.theme.text.selection.text};\n    }\n`;\n"],"names":["TypographyStyled","props","theme","text","paras","size","font","sans","body","bg","headings","weight","color","lineHeight","Math","pow","multiplier","links","default","onHover","serif","mono","subtext","selection"],"mappings":"0EAKaA,oDAEiBC,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMC,sBACpDJ,GAA6BA,EAAMC,MAAMC,KAAKG,KAAKC,4EAGnDN,GAA6BA,EAAMC,MAAMM,KAAKC,qCAInDR,GAA6BA,EAAMC,MAAMC,KAAKO,SAASJ,oBACvDL,GAA6BA,EAAMC,MAAMC,KAAKO,SAASC,gBACvDV,GAA6BA,EAAMC,MAAMC,KAAKO,SAASE,qBACvDX,GAA6BA,EAAMC,MAAMC,KAAKO,SAASG,qCAIxDZ,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMC,KAAOS,KAAKC,IAAId,EAAMC,MAAMC,KAAKO,SAASM,WAAY,sBAC1Gf,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMC,KAAOS,KAAKC,IAAId,EAAMC,MAAMC,KAAKO,SAASM,WAAY,sBAC1Gf,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMC,KAAOS,KAAKC,IAAId,EAAMC,MAAMC,KAAKO,SAASM,WAAY,sBAC1Gf,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMC,KAAOS,KAAKC,IAAId,EAAMC,MAAMC,KAAKO,SAASM,WAAY,sBAC1Gf,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMC,KAAOS,KAAKC,IAAId,EAAMC,MAAMC,KAAKO,SAASM,WAAY,sBAC1Gf,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMC,KAAOS,KAAKC,IAAId,EAAMC,MAAMC,KAAKO,SAASM,WAAY,uOAezGf,GAA6BA,EAAMC,MAAMC,KAAKC,MAAME,cACpDL,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMQ,kCAMjDX,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMS,4CAIvDZ,GAA6BA,EAAMC,MAAMC,KAAKc,MAAMX,cACpDL,GAA6BA,EAAMC,MAAMC,KAAKc,MAAMC,QAAQN,+FAM5CX,GAA6BA,EAAMC,MAAMC,KAAKc,MAAME,QAAQP,wDAIlEX,GAA6BA,EAAMC,MAAMC,KAAKG,KAAKC,iCACnDN,GAA6BA,EAAMC,MAAMC,KAAKG,KAAKc,iCACnDnB,GAA6BA,EAAMC,MAAMC,KAAKG,KAAKe,yBAE3DpB,GAA6BA,EAAMC,MAAMC,KAAKC,MAAMkB,klBA4BvDrB,GAA6BA,EAAMC,MAAMC,KAAKoB,UAAUd,YACxDR,GAA6BA,EAAMC,MAAMC,KAAKoB,UAAUpB,gCAIxDF,GAA6BA,EAAMC,MAAMC,KAAKoB,UAAUd,YACxDR,GAA6BA,EAAMC,MAAMC,KAAKoB,UAAUpB"}

package/dist/cjs/external/Element.js

@@ -1,2 +1,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var e=/*#__PURE__*/t(require("react"));function o(t,e){var o={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(o[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(t);n<r.length;n++)e.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(t,r[n])&&(o[r[n]]=t[r[n]])}return o}const r=t=>t.filter((t=>!!t)).join(" "),n=e.default.forwardRef(((t,n)=>{const{as:l,classNames:i=[],className:a,size:s,isFullWidth:d,isFullHeight:h,bgColor:g,bgColour:p,textColor:c,textColour:m,borderColor:b,borderColour:y,fillColor:O,fillColour:f,strokeColor:u,strokeColour:C,hideOnMobile:$,showOnlyOnMobile:w,hideOnTabletPortrait:T,showOnlyOnTabletPortrait:k,hideOnTabletLandscape:S,showOnlyOnTabletLandscape:v,hideOnDesktop:x,showOnlyOnDesktop:z,marginTop:I,marginRight:L,marginBottom:P,marginLeft:j,margin:N,paddingTop:E,paddingRight:R,paddingBottom:B,paddingLeft:D,padding:F,shadow:M,shape:H,opacity:W,horizontallyCentreThis:_,horizontallyCenterThis:q,verticallyCentreItems:A,verticallyCenterItems:G,pushItemsToEnds:J}=t,K=o(t,["as","classNames","className","size","isFullWidth","isFullHeight","bgColor","bgColour","textColor","textColour","borderColor","borderColour","fillColor","fillColour","strokeColor","strokeColour","hideOnMobile","showOnlyOnMobile","hideOnTabletPortrait","showOnlyOnTabletPortrait","hideOnTabletLandscape","showOnlyOnTabletLandscape","hideOnDesktop","showOnlyOnDesktop","marginTop","marginRight","marginBottom","marginLeft","margin","paddingTop","paddingRight","paddingBottom","paddingLeft","padding","shadow","shape","opacity","horizontallyCentreThis","horizontallyCenterThis","verticallyCentreItems","verticallyCenterItems","pushItemsToEnds"]),Q=o(t,["as","className","classNames"]);return e.default.createElement(l,Object.assign({ref:n},"string"!=typeof l&&l.hasOwnProperty("styledComponentId")?Q:K,{className:r([a,s&&`size-${s}`,d&&"full-width",h&&"full-height",g&&`bg-${String(g)}`,p&&`bg-${String(p)}`,c&&`text-${String(c)}`,m&&`text-${String(m)}`,b&&`border-${String(b)}`,y&&`border-${String(y)}`,O&&`fill-${String(O)}`,f&&`fill-${String(f)}`,u&&`stroke-${String(u)}`,C&&`stroke-${String(C)}`,$&&"hide-on-mobile",w&&"show-only-on-mobile",T&&"hide-on-tablet-portrait",k&&"show-only-on-tablet-portrait",S&&"hide-on-tablet-landscape",v&&"show-only-on-tablet-landscape",x&&"hide-on-desktop",z&&"show-only-on-desktop",I&&`margin-top-${I}`,L&&`margin-right-${L}`,P&&`margin-bottom-${P}`,j&&`margin-left-${j}`,N&&`margin-all-${N}`,E&&`padding-top-${E}`,R&&`padding-right-${R}`,B&&`padding-bottom-${B}`,D&&`padding-left-${D}`,F&&`padding-all-${F}`,M&&`shadow-${M}`,H&&`shape-${H}`,W&&`opacity-${W}`,_&&"horizontally-centre-this",q&&"horizontally-centre-this",A&&"vertically-centre-items",G&&"vertically-centre-items",J&&"push-to-ends"].concat(i))}))}));exports.Element=n,exports.__rest=o;
+"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var e=/*#__PURE__*/t(require("react"));function o(t,e){var o={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(o[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(t);n<r.length;n++)e.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(t,r[n])&&(o[r[n]]=t[r[n]])}return o}const r=t=>t.filter((t=>!!t)).join(" "),n=e.default.forwardRef(((t,n)=>{const{as:l,classNames:i=[],className:a,size:s,isFullWidth:d,isFullHeight:h,bgColor:g,bgColour:p,textColor:c,textColour:m,borderColor:b,borderColour:y,fillColor:O,fillColour:f,strokeColor:u,strokeColour:C,hideOnMobile:$,showOnlyOnMobile:w,hideOnTabletPortrait:T,showOnlyOnTabletPortrait:k,hideOnTabletLandscape:S,showOnlyOnTabletLandscape:v,hideOnDesktop:x,showOnlyOnDesktop:z,marginTop:I,marginRight:L,marginBottom:P,marginLeft:j,margin:N,paddingTop:E,paddingRight:R,paddingBottom:B,paddingLeft:D,padding:F,shadow:M,shape:H,opacity:W,horizontallyCentreThis:_,horizontallyCenterThis:q,verticallyCentreItems:A,verticallyCenterItems:G,pushItemsToEnds:J,weight:K}=t,Q=o(t,["as","classNames","className","size","isFullWidth","isFullHeight","bgColor","bgColour","textColor","textColour","borderColor","borderColour","fillColor","fillColour","strokeColor","strokeColour","hideOnMobile","showOnlyOnMobile","hideOnTabletPortrait","showOnlyOnTabletPortrait","hideOnTabletLandscape","showOnlyOnTabletLandscape","hideOnDesktop","showOnlyOnDesktop","marginTop","marginRight","marginBottom","marginLeft","margin","paddingTop","paddingRight","paddingBottom","paddingLeft","padding","shadow","shape","opacity","horizontallyCentreThis","horizontallyCenterThis","verticallyCentreItems","verticallyCenterItems","pushItemsToEnds","weight"]),U=o(t,["as","className","classNames"]);return e.default.createElement(l,Object.assign({ref:n},"string"!=typeof l&&l.hasOwnProperty("styledComponentId")?U:Q,{className:r([a,s&&`size-${s}`,d&&"full-width",h&&"full-height",g&&`bg-${String(g)}`,p&&`bg-${String(p)}`,c&&`text-${String(c)}`,m&&`text-${String(m)}`,b&&`border-${String(b)}`,y&&`border-${String(y)}`,O&&`fill-${String(O)}`,f&&`fill-${String(f)}`,u&&`stroke-${String(u)}`,C&&`stroke-${String(C)}`,$&&"hide-on-mobile",w&&"show-only-on-mobile",T&&"hide-on-tablet-portrait",k&&"show-only-on-tablet-portrait",S&&"hide-on-tablet-landscape",v&&"show-only-on-tablet-landscape",x&&"hide-on-desktop",z&&"show-only-on-desktop",I&&`margin-top-${I}`,L&&`margin-right-${L}`,P&&`margin-bottom-${P}`,j&&`margin-left-${j}`,N&&`margin-all-${N}`,E&&`padding-top-${E}`,R&&`padding-right-${R}`,B&&`padding-bottom-${B}`,D&&`padding-left-${D}`,F&&`padding-all-${F}`,M&&`shadow-${M}`,H&&`shape-${H}`,W&&`opacity-${W}`,_&&"horizontally-centre-this",q&&"horizontally-centre-this",A&&"vertically-centre-items",G&&"vertically-centre-items",J&&"push-to-ends",K&&`weight-${K}`].concat(i))}))}));exports.Element=n,exports.__rest=o;
 //# sourceMappingURL=Element.js.map

package/dist/cjs/external/Element.js.map

@@ -1 +1 @@
-{"version":3,"file":"Element.js","sources":["../../../src/utils/classNames.ts","../../../src/components/Element/Element.tsx"],"sourcesContent":["export const createClassName = (classNames: string[]): string => {\n    return classNames.filter((item) => !!item).join(\" \");\n};\n","import React from \"react\";\n\nimport { createClassName } from \"../../utils/classNames\";\n\nimport { ElementProps } from \"./constants\";\n\nexport const Element = React.forwardRef(<K extends {}>(props: ElementProps<K>, ref: React.LegacyRef<HTMLElement>) => {\n    const {\n        as: Component,\n        classNames = [],\n        className,\n        size,\n        isFullWidth,\n        isFullHeight,\n        bgColor,\n        bgColour,\n        textColor,\n        textColour,\n        borderColor,\n        borderColour,\n        fillColor,\n        fillColour,\n        strokeColor,\n        strokeColour,\n        hideOnMobile,\n        showOnlyOnMobile,\n        hideOnTabletPortrait,\n        showOnlyOnTabletPortrait,\n        hideOnTabletLandscape,\n        showOnlyOnTabletLandscape,\n        hideOnDesktop,\n        showOnlyOnDesktop,\n        marginTop,\n        marginRight,\n        marginBottom,\n        marginLeft,\n        margin,\n        paddingTop,\n        paddingRight,\n        paddingBottom,\n        paddingLeft,\n        padding,\n        shadow,\n        shape,\n        opacity,\n        horizontallyCentreThis,\n        horizontallyCenterThis,\n        verticallyCentreItems,\n        verticallyCenterItems,\n        pushItemsToEnds,\n        ...minimalProps\n    } = props;\n\n    const { as, className: _, classNames: __, ...sanitizedProps } = props;\n\n    return (\n        <Component\n            ref={ref}\n            {...(typeof Component !== \"string\" && Component.hasOwnProperty(\"styledComponentId\")\n                ? sanitizedProps\n                : minimalProps)}\n            className={createClassName(\n                [\n                    className,\n                    size && `size-${size}`,\n                    isFullWidth && \"full-width\",\n                    isFullHeight && \"full-height\",\n                    bgColor && `bg-${String(bgColor)}`,\n                    bgColour && `bg-${String(bgColour)}`,\n                    textColor && `text-${String(textColor)}`,\n                    textColour && `text-${String(textColour)}`,\n                    borderColor && `border-${String(borderColor)}`,\n                    borderColour && `border-${String(borderColour)}`,\n                    fillColor && `fill-${String(fillColor)}`,\n                    fillColour && `fill-${String(fillColour)}`,\n                    strokeColor && `stroke-${String(strokeColor)}`,\n                    strokeColour && `stroke-${String(strokeColour)}`,\n                    hideOnMobile && \"hide-on-mobile\",\n                    showOnlyOnMobile && \"show-only-on-mobile\",\n                    hideOnTabletPortrait && \"hide-on-tablet-portrait\",\n                    showOnlyOnTabletPortrait && \"show-only-on-tablet-portrait\",\n                    hideOnTabletLandscape && \"hide-on-tablet-landscape\",\n                    showOnlyOnTabletLandscape && \"show-only-on-tablet-landscape\",\n                    hideOnDesktop && \"hide-on-desktop\",\n                    showOnlyOnDesktop && \"show-only-on-desktop\",\n                    marginTop && `margin-top-${marginTop}`,\n                    marginRight && `margin-right-${marginRight}`,\n                    marginBottom && `margin-bottom-${marginBottom}`,\n                    marginLeft && `margin-left-${marginLeft}`,\n                    margin && `margin-all-${margin}`,\n                    paddingTop && `padding-top-${paddingTop}`,\n                    paddingRight && `padding-right-${paddingRight}`,\n                    paddingBottom && `padding-bottom-${paddingBottom}`,\n                    paddingLeft && `padding-left-${paddingLeft}`,\n                    padding && `padding-all-${padding}`,\n                    shadow && `shadow-${shadow}`,\n                    shape && `shape-${shape}`,\n                    opacity && `opacity-${opacity}`,\n                    horizontallyCentreThis && \"horizontally-centre-this\",\n                    horizontallyCenterThis && \"horizontally-centre-this\",\n                    verticallyCentreItems && \"vertically-centre-items\",\n                    verticallyCenterItems && \"vertically-centre-items\",\n                    pushItemsToEnds && \"push-to-ends\",\n                ].concat(classNames)\n            )}\n        />\n    );\n}) as <K extends {}>(props: ElementProps<K> & { ref?: React.LegacyRef<HTMLElement> }) => React.ReactElement;\n"],"names":["createClassName","classNames","filter","item","join","Element","React","forwardRef","props","ref","as","Component","className","size","isFullWidth","isFullHeight","bgColor","bgColour","textColor","textColour","borderColor","borderColour","fillColor","fillColour","strokeColor","strokeColour","hideOnMobile","showOnlyOnMobile","hideOnTabletPortrait","showOnlyOnTabletPortrait","hideOnTabletLandscape","showOnlyOnTabletLandscape","hideOnDesktop","showOnlyOnDesktop","marginTop","marginRight","marginBottom","marginLeft","margin","paddingTop","paddingRight","paddingBottom","paddingLeft","padding","shadow","shape","opacity","horizontallyCentreThis","horizontallyCenterThis","verticallyCentreItems","verticallyCenterItems","pushItemsToEnds","minimalProps","sanitizedProps","hasOwnProperty","String","concat"],"mappings":"ucAAO,MAAMA,EAAmBC,GACrBA,EAAWC,QAAQC,KAAWA,IAAMC,KAAK,KCKvCC,EAAUC,UAAMC,YAAW,CAAeC,EAAwBC,WAEvEC,GAAIC,EADFV,WAEFA,EAAa,GAFXW,UAGFA,EAHEC,KAIFA,EAJEC,YAKFA,EALEC,aAMFA,EANEC,QAOFA,EAPEC,SAQFA,EAREC,UASFA,EATEC,WAUFA,EAVEC,YAWFA,EAXEC,aAYFA,EAZEC,UAaFA,EAbEC,WAcFA,EAdEC,YAeFA,EAfEC,aAgBFA,EAhBEC,aAiBFA,EAjBEC,iBAkBFA,EAlBEC,qBAmBFA,EAnBEC,yBAoBFA,EApBEC,sBAqBFA,EArBEC,0BAsBFA,EAtBEC,cAuBFA,EAvBEC,kBAwBFA,EAxBEC,UAyBFA,EAzBEC,YA0BFA,EA1BEC,aA2BFA,EA3BEC,WA4BFA,EA5BEC,OA6BFA,EA7BEC,WA8BFA,EA9BEC,aA+BFA,EA/BEC,cAgCFA,EAhCEC,YAiCFA,EAjCEC,QAkCFA,EAlCEC,OAmCFA,EAnCEC,MAoCFA,EApCEC,QAqCFA,EArCEC,uBAsCFA,EAtCEC,uBAuCFA,EAvCEC,sBAwCFA,EAxCEC,sBAyCFA,EAzCEC,gBA0CFA,GAEA3C,EADG4C,IACH5C,EA5CE,ooBA8CuC6C,IAAmB7C,EAA1D,wCAGFF,wBAACK,iBACGF,IAAKA,GACqB,iBAAdE,GAA0BA,EAAU2C,eAAe,qBACzDD,EACAD,GACNxC,UAAWZ,EACP,CACIY,EACAC,WAAgBA,IAChBC,GAAe,aACfC,GAAgB,cAChBC,SAAiBuC,OAAOvC,KACxBC,SAAkBsC,OAAOtC,KACzBC,WAAqBqC,OAAOrC,KAC5BC,WAAsBoC,OAAOpC,KAC7BC,aAAyBmC,OAAOnC,KAChCC,aAA0BkC,OAAOlC,KACjCC,WAAqBiC,OAAOjC,KAC5BC,WAAsBgC,OAAOhC,KAC7BC,aAAyB+B,OAAO/B,KAChCC,aAA0B8B,OAAO9B,KACjCC,GAAgB,iBAChBC,GAAoB,sBACpBC,GAAwB,0BACxBC,GAA4B,+BAC5BC,GAAyB,2BACzBC,GAA6B,gCAC7BC,GAAiB,kBACjBC,GAAqB,uBACrBC,iBAA2BA,IAC3BC,mBAA+BA,IAC/BC,oBAAiCA,IACjCC,kBAA6BA,IAC7BC,iBAAwBA,IACxBC,kBAA6BA,IAC7BC,oBAAiCA,IACjCC,qBAAmCA,IACnCC,mBAA+BA,IAC/BC,kBAA0BA,IAC1BC,aAAoBA,IACpBC,YAAkBA,IAClBC,cAAsBA,IACtBC,GAA0B,2BAC1BC,GAA0B,2BAC1BC,GAAyB,0BACzBC,GAAyB,0BACzBC,GAAmB,gBACrBK,OAAOvD"}
+{"version":3,"file":"Element.js","sources":["../../../src/utils/classNames.ts","../../../src/components/Element/Element.tsx"],"sourcesContent":["export const createClassName = (classNames: string[]): string => {\n    return classNames.filter((item) => !!item).join(\" \");\n};\n","import React from \"react\";\n\nimport { createClassName } from \"../../utils/classNames\";\n\nimport { ElementProps } from \"./constants\";\n\nexport const Element = React.forwardRef(<K extends {}>(props: ElementProps<K>, ref: React.LegacyRef<HTMLElement>) => {\n    const {\n        as: Component,\n        classNames = [],\n        className,\n        size,\n        isFullWidth,\n        isFullHeight,\n        bgColor,\n        bgColour,\n        textColor,\n        textColour,\n        borderColor,\n        borderColour,\n        fillColor,\n        fillColour,\n        strokeColor,\n        strokeColour,\n        hideOnMobile,\n        showOnlyOnMobile,\n        hideOnTabletPortrait,\n        showOnlyOnTabletPortrait,\n        hideOnTabletLandscape,\n        showOnlyOnTabletLandscape,\n        hideOnDesktop,\n        showOnlyOnDesktop,\n        marginTop,\n        marginRight,\n        marginBottom,\n        marginLeft,\n        margin,\n        paddingTop,\n        paddingRight,\n        paddingBottom,\n        paddingLeft,\n        padding,\n        shadow,\n        shape,\n        opacity,\n        horizontallyCentreThis,\n        horizontallyCenterThis,\n        verticallyCentreItems,\n        verticallyCenterItems,\n        pushItemsToEnds,\n        weight,\n        ...minimalProps\n    } = props;\n\n    const { as, className: _, classNames: __, ...sanitizedProps } = props;\n\n    return (\n        <Component\n            ref={ref}\n            {...(typeof Component !== \"string\" && Component.hasOwnProperty(\"styledComponentId\")\n                ? sanitizedProps\n                : minimalProps)}\n            className={createClassName(\n                [\n                    className,\n                    size && `size-${size}`,\n                    isFullWidth && \"full-width\",\n                    isFullHeight && \"full-height\",\n                    bgColor && `bg-${String(bgColor)}`,\n                    bgColour && `bg-${String(bgColour)}`,\n                    textColor && `text-${String(textColor)}`,\n                    textColour && `text-${String(textColour)}`,\n                    borderColor && `border-${String(borderColor)}`,\n                    borderColour && `border-${String(borderColour)}`,\n                    fillColor && `fill-${String(fillColor)}`,\n                    fillColour && `fill-${String(fillColour)}`,\n                    strokeColor && `stroke-${String(strokeColor)}`,\n                    strokeColour && `stroke-${String(strokeColour)}`,\n                    hideOnMobile && \"hide-on-mobile\",\n                    showOnlyOnMobile && \"show-only-on-mobile\",\n                    hideOnTabletPortrait && \"hide-on-tablet-portrait\",\n                    showOnlyOnTabletPortrait && \"show-only-on-tablet-portrait\",\n                    hideOnTabletLandscape && \"hide-on-tablet-landscape\",\n                    showOnlyOnTabletLandscape && \"show-only-on-tablet-landscape\",\n                    hideOnDesktop && \"hide-on-desktop\",\n                    showOnlyOnDesktop && \"show-only-on-desktop\",\n                    marginTop && `margin-top-${marginTop}`,\n                    marginRight && `margin-right-${marginRight}`,\n                    marginBottom && `margin-bottom-${marginBottom}`,\n                    marginLeft && `margin-left-${marginLeft}`,\n                    margin && `margin-all-${margin}`,\n                    paddingTop && `padding-top-${paddingTop}`,\n                    paddingRight && `padding-right-${paddingRight}`,\n                    paddingBottom && `padding-bottom-${paddingBottom}`,\n                    paddingLeft && `padding-left-${paddingLeft}`,\n                    padding && `padding-all-${padding}`,\n                    shadow && `shadow-${shadow}`,\n                    shape && `shape-${shape}`,\n                    opacity && `opacity-${opacity}`,\n                    horizontallyCentreThis && \"horizontally-centre-this\",\n                    horizontallyCenterThis && \"horizontally-centre-this\",\n                    verticallyCentreItems && \"vertically-centre-items\",\n                    verticallyCenterItems && \"vertically-centre-items\",\n                    pushItemsToEnds && \"push-to-ends\",\n                    weight && `weight-${weight}`,\n                ].concat(classNames)\n            )}\n        />\n    );\n}) as <K extends {}>(props: ElementProps<K> & { ref?: React.LegacyRef<HTMLElement> }) => React.ReactElement;\n"],"names":["createClassName","classNames","filter","item","join","Element","React","forwardRef","props","ref","as","Component","className","size","isFullWidth","isFullHeight","bgColor","bgColour","textColor","textColour","borderColor","borderColour","fillColor","fillColour","strokeColor","strokeColour","hideOnMobile","showOnlyOnMobile","hideOnTabletPortrait","showOnlyOnTabletPortrait","hideOnTabletLandscape","showOnlyOnTabletLandscape","hideOnDesktop","showOnlyOnDesktop","marginTop","marginRight","marginBottom","marginLeft","margin","paddingTop","paddingRight","paddingBottom","paddingLeft","padding","shadow","shape","opacity","horizontallyCentreThis","horizontallyCenterThis","verticallyCentreItems","verticallyCenterItems","pushItemsToEnds","weight","minimalProps","sanitizedProps","hasOwnProperty","String","concat"],"mappings":"ucAAO,MAAMA,EAAmBC,GACrBA,EAAWC,QAAQC,KAAWA,IAAMC,KAAK,KCKvCC,EAAUC,UAAMC,YAAW,CAAeC,EAAwBC,WAEvEC,GAAIC,EADFV,WAEFA,EAAa,GAFXW,UAGFA,EAHEC,KAIFA,EAJEC,YAKFA,EALEC,aAMFA,EANEC,QAOFA,EAPEC,SAQFA,EAREC,UASFA,EATEC,WAUFA,EAVEC,YAWFA,EAXEC,aAYFA,EAZEC,UAaFA,EAbEC,WAcFA,EAdEC,YAeFA,EAfEC,aAgBFA,EAhBEC,aAiBFA,EAjBEC,iBAkBFA,EAlBEC,qBAmBFA,EAnBEC,yBAoBFA,EApBEC,sBAqBFA,EArBEC,0BAsBFA,EAtBEC,cAuBFA,EAvBEC,kBAwBFA,EAxBEC,UAyBFA,EAzBEC,YA0BFA,EA1BEC,aA2BFA,EA3BEC,WA4BFA,EA5BEC,OA6BFA,EA7BEC,WA8BFA,EA9BEC,aA+BFA,EA/BEC,cAgCFA,EAhCEC,YAiCFA,EAjCEC,QAkCFA,EAlCEC,OAmCFA,EAnCEC,MAoCFA,EApCEC,QAqCFA,EArCEC,uBAsCFA,EAtCEC,uBAuCFA,EAvCEC,sBAwCFA,EAxCEC,sBAyCFA,EAzCEC,gBA0CFA,EA1CEC,OA2CFA,GAEA5C,EADG6C,IACH7C,EA7CE,6oBA+CuC8C,IAAmB9C,EAA1D,wCAGFF,wBAACK,iBACGF,IAAKA,GACqB,iBAAdE,GAA0BA,EAAU4C,eAAe,qBACzDD,EACAD,GACNzC,UAAWZ,EACP,CACIY,EACAC,WAAgBA,IAChBC,GAAe,aACfC,GAAgB,cAChBC,SAAiBwC,OAAOxC,KACxBC,SAAkBuC,OAAOvC,KACzBC,WAAqBsC,OAAOtC,KAC5BC,WAAsBqC,OAAOrC,KAC7BC,aAAyBoC,OAAOpC,KAChCC,aAA0BmC,OAAOnC,KACjCC,WAAqBkC,OAAOlC,KAC5BC,WAAsBiC,OAAOjC,KAC7BC,aAAyBgC,OAAOhC,KAChCC,aAA0B+B,OAAO/B,KACjCC,GAAgB,iBAChBC,GAAoB,sBACpBC,GAAwB,0BACxBC,GAA4B,+BAC5BC,GAAyB,2BACzBC,GAA6B,gCAC7BC,GAAiB,kBACjBC,GAAqB,uBACrBC,iBAA2BA,IAC3BC,mBAA+BA,IAC/BC,oBAAiCA,IACjCC,kBAA6BA,IAC7BC,iBAAwBA,IACxBC,kBAA6BA,IAC7BC,oBAAiCA,IACjCC,qBAAmCA,IACnCC,mBAA+BA,IAC/BC,kBAA0BA,IAC1BC,aAAoBA,IACpBC,YAAkBA,IAClBC,cAAsBA,IACtBC,GAA0B,2BAC1BC,GAA0B,2BAC1BC,GAAyB,0BACzBC,GAAyB,0BACzBC,GAAmB,eACnBC,aAAoBA,KACtBK,OAAOxD"}