fictoan-react 0.36.0 → 0.36.3

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+### 0.36.3
+- Fix `Select` border-radius inheritance bug
+- Fix `SidebarItemText` hover state text colour
+
+### 0.36.2
+- Fix inconsistent `tabLS` and `tabPT` props
+
+### 0.36.1
+- Add types for `Element`’s `as` attribute
+
 ### 0.36.0
 - Fix text colour for nested links in sidebar for better differentiation
 - Fix typo in `portionProps`

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

@@ -1,4 +1,4 @@
-import { HTMLProps } from "react";
+import { ElementType, HTMLProps } from "react";
 import { defaultColourProps } from "../../styles/DefaultColourProps";
 import { customColours, FictoanTheme } from "../../styles/theme";
 declare type DeepPartial<T> = {
@@ -26,10 +26,10 @@ export interface CommonProps extends ThemeProps {
     strokeColour?: ColourPropTypes;
     hideOnMobile?: boolean;
     showOnlyOnMobile?: boolean;
-    hideOnTabPT?: boolean;
-    showOnlyOnTabPT?: boolean;
-    hideOnTabLS?: boolean;
-    showOnlyOnTabLS?: boolean;
+    hideOnTabletPortrait?: boolean;
+    showOnlyOnTabletPortrait?: boolean;
+    hideOnTabletLandscape?: boolean;
+    showOnlyOnTabletLandscape?: boolean;
     hideOnDesktop?: boolean;
     showOnlyOnDesktop?: boolean;
     isFullWidth?: boolean;
@@ -49,10 +49,10 @@ export interface CommonProps extends ThemeProps {
     opacity?: OpacityTypes;
     classNames?: any[];
 }
-export interface CommonAndHTMLProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "size" | "ref" | "shape"> {
+export interface CommonAndHTMLProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "as" | "size" | "ref" | "shape"> {
 }
 export interface ElementProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "as" | "ref" | "shape"> {
-    as: any;
+    as: ElementType;
     className?: string;
 }
 export {};

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

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

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

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

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

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

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

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

package/dist/cjs/components/Form/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        padding          : 11px;\n    }\n\n    &[type=password] { letter-spacing : 4px; }\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 check mark  */\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,GAA2BA,EAAMC,MAAMI,WAAWC,QAAQG,6EAMtDT,GAA2BA,EAAMC,MAAMI,WAAWK,QAAQH,uBAChDP,GAA2BA,EAAMC,MAAMI,WAAWK,QAAQF,wQAoB1ER,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        padding          : 11px;\n    }\n\n    &[type=password] { letter-spacing : 4px; }\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,wQAoB3ER,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"}

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

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

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

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

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

@@ -3,8 +3,8 @@ import { CommonAndHTMLProps, SpacingTypes } from "../Element/constants";
 export interface RowCustomProps {
     sidePadding?: "nano" | "micro" | "tiny" | "small" | "medium" | "large" | "huge";
     gutters?: SpacingTypes;
-    retainLayoutOnTabLS?: boolean;
-    retainLayoutOnTabPT?: boolean;
+    retainLayoutOnTabletLandscape?: boolean;
+    retainLayoutOnTabletPortrait?: boolean;
     retainLayoutOnMobile?: boolean;
     retainLayoutAlways?: boolean;
 }

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

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

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

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

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../external/Element.js"),t=require("react"),r=require("./SidebarItem.styled.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("styled-components");var s=/*#__PURE__*/a(t);const l=s.default.forwardRef(((t,a)=>{var{hasAlert:l}=t,u=e.__rest(t,["hasAlert"]);let n=[];return l&&n.push("has-alert"),s.default.createElement(e.Element,Object.assign({as:r.SidebarItemStyled,ref:a,classNames:n},u))}));exports.SidebarItem=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../external/Element.js"),t=require("react"),r=require("./SidebarItem.styled.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("styled-components"),require("../SidebarItemText/SidebarItemText.styled.js");var s=/*#__PURE__*/a(t);const l=s.default.forwardRef(((t,a)=>{var{hasAlert:l}=t,d=e.__rest(t,["hasAlert"]);let u=[];return l&&u.push("has-alert"),s.default.createElement(e.Element,Object.assign({as:r.SidebarItemStyled,ref:a,classNames:u},d))}));exports.SidebarItem=l;
 //# sourceMappingURL=SidebarItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.js","sources":["../../../../../src/components/Sidebar/SidebarItem/SidebarItem.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../../Element/Element\";\nimport { CommonAndHTMLProps } from \"../../Element/constants\";\n\nimport { SidebarItemStyled } from \"./SidebarItem.styled\";\n\nexport interface SidebarItemCustomProps {\n    hasAlert ?: boolean;\n}\n\nexport type SidebarItemElementType = HTMLDivElement;\nexport type SidebarItemProps = Omit<CommonAndHTMLProps<SidebarItemElementType>, keyof SidebarItemCustomProps> & SidebarItemCustomProps;\n\nexport const SidebarItem = React.forwardRef(\n    ({ hasAlert, ...props }: SidebarItemProps, ref: React.Ref<SidebarItemElementType>) => {\n        let classNames = [];\n\n        if(hasAlert) {\n            classNames.push(\"has-alert\");\n        }\n\n        return <Element<SidebarItemElementType> as={SidebarItemStyled} ref={ref} classNames={classNames} {...props} />;\n    }\n);\n"],"names":["SidebarItem","React","forwardRef","_a","ref","hasAlert","props","classNames","push","Element","as","SidebarItemStyled"],"mappings":"6SAcaA,EAAcC,UAAMC,YAC7B,CAACC,EAA0CC,SAA1CC,SAAEA,KAAaC,aAAf,kBACOC,EAAa,UAEdF,GACCE,EAAWC,KAAK,aAGbP,wBAACQ,yBAAgCC,GAAIC,oBAAmBP,IAAKA,EAAKG,WAAYA,GAAgBD"}
+{"version":3,"file":"SidebarItem.js","sources":["../../../../../src/components/Sidebar/SidebarItem/SidebarItem.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../../Element/Element\";\nimport { CommonAndHTMLProps } from \"../../Element/constants\";\n\nimport { SidebarItemStyled } from \"./SidebarItem.styled\";\n\nexport interface SidebarItemCustomProps {\n    hasAlert ? : boolean;\n}\n\nexport type SidebarItemElementType = HTMLDivElement;\nexport type SidebarItemProps = Omit<CommonAndHTMLProps<SidebarItemElementType>, keyof SidebarItemCustomProps> & SidebarItemCustomProps;\n\nexport const SidebarItem = React.forwardRef(\n    ({ hasAlert, ...props }: SidebarItemProps, ref: React.Ref<SidebarItemElementType>) => {\n        let classNames = [];\n\n        if(hasAlert) {\n            classNames.push(\"has-alert\");\n        }\n\n        return <Element<SidebarItemElementType> as={SidebarItemStyled} ref={ref} classNames={classNames} {...props} />;\n    }\n);\n"],"names":["SidebarItem","React","forwardRef","_a","ref","hasAlert","props","classNames","push","Element","as","SidebarItemStyled"],"mappings":"qWAcaA,EAAcC,UAAMC,YAC7B,CAACC,EAA0CC,SAA1CC,SAAEA,KAAaC,aAAf,kBACOC,EAAa,UAEdF,GACCE,EAAWC,KAAK,aAGbP,wBAACQ,yBAAgCC,GAAIC,oBAAmBP,IAAKA,EAAKG,WAAYA,GAAgBD"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarItemText.styled.js","sources":["../../../../../src/components/Sidebar/SidebarItemText/SidebarItemText.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const SidebarItemTextStyled = styled.p`\n    margin             : 0;\n    overflow           : hidden;\n    -webkit-line-clamp : 1;\n`;\n"],"names":["SidebarItemTextStyled","p"],"mappings":"kJAEaA,uDAA+BC"}
+{"version":3,"file":"SidebarItemText.styled.js","sources":["../../../../../src/components/Sidebar/SidebarItemText/SidebarItemText.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { SidebarItemTextProps } from \"./SidebarItemText\";\n\nexport const SidebarItemTextStyled = styled.p`\n    margin             : 0;\n    overflow           : hidden;\n    -webkit-line-clamp : 1;\n`;\n"],"names":["SidebarItemTextStyled","p"],"mappings":"kJAGaA,uDAA+BC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarWrapper.styled.js","sources":["../../../../../src/components/Sidebar/SidebarWrapper/SidebarWrapper.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { SidebarWrapperProps } from \"./SidebarWrapper\";\nimport { SidebarItemIconProps } from \"../SidebarItemIcon/SidebarItemIcon\";\n\nimport { SidebarHeaderStyled } from \"../SidebarHeader/SidebarHeader.styled\";\nimport { SidebarItemStyled } from \"../SidebarItem/SidebarItem.styled\"\nimport { SidebarItemTextStyled } from \"../SidebarItemText/SidebarItemText.styled\"\nimport { SidebarItemIconStyled } from \"../SidebarItemIcon/SidebarItemIcon.styled\"\nimport { SidebarFooterStyled } from \"../SidebarFooter/SidebarFooter.styled\";\n\n\nexport const SidebarWrapperStyled = styled.aside`\n    display          : flex;\n    flex-direction   : column;\n    position         : fixed;\n    top              : 0;\n    left             : 0;\n    bottom           : 0;\n    width            : ${(props: SidebarWrapperProps) => props.theme.sidebar.width};\n    min-height       : 100vh;\n    overflow-y       : auto;\n    transition       : all 0.4s ease-in-out;\n    background-color : ${(props: SidebarWrapperProps) => props.theme.sidebar.bg};\n    box-shadow       : 2px 0 8px -4px rgba(0, 0, 0, 0.16);\n    z-index          : 10000;\n    font-size        : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.default.scale}%;\n\n    /*  BASICS  ===========================================================  */\n    * { user-select : none; }\n    \n    @media (max-width : 900px) {\n        left    : calc(-1 * 100%);\n        z-index : 4000;\n    }\n\n    /*  COLLAPSED  ========================================================  */\n    &.collapsed {\n        width      : ${(props: SidebarWrapperProps) => props.theme.sidebar.isCollapsed.width};\n        overflow-x : hidden;\n\n        ${SidebarHeaderStyled} {\n            .header-logo { display : none; }\n\n            .header-icon {\n                display : block;\n                width   : 32px;\n                height  : 32px;\n            }\n        }\n\n        ${SidebarItemTextStyled} {\n            display  : none;\n            position : absolute;\n        }\n\n        ${SidebarItemStyled}:hover ${SidebarItemIconStyled} + ${SidebarItemTextStyled} {\n            display          : flex;\n            position         : fixed;\n            left             : 40px;\n            align-self       : center;\n            border-radius    : 4px;\n            padding          : 4px 8px;\n            background-color : ${(props: SidebarWrapperProps) => props.theme.sidebar.isCollapsed.label.bg};\n            color            : ${(props: SidebarWrapperProps) => props.theme.sidebar.isCollapsed.label.text};\n            font-size        : 88%;\n            box-shadow       : 0 4px 16px -2px rgba(0, 0, 0, 0.24);\n        }\n\n        ${SidebarFooterStyled} { padding-left : 0; }\n    }\n\n    a {\n        width : unset;\n        color : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.default.text};\n    }\n    \n    summary ~ a p { color : ${(props: SidebarWrapperProps) => props.theme.sidebar.subLinks.default.text}; }\n\n    a.active {\n        position         : relative;\n        display          : block;\n        background-color : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.isSelected.bg};\n\n        &::before {\n            display                    : block;\n            position                   : absolute;\n            width                      : 4px;\n            height                     : 100%;\n            top                        : 0;\n            left                       : 0;\n            content                    : \"\";\n            border-top-right-radius    : 4px;\n            border-bottom-right-radius : 4px;\n            background-color           : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.isSelected.border};\n        }\n        \n        & .icon-stroked svg {\n            fill         : none;\n            stroke       : ${(props: SidebarItemIconProps) => props.theme.sidebar.icons.stroked.isActive.line};\n        }\n\n        & .icon-filled svg {\n            stroke : none;\n            fill   : ${(props: SidebarItemIconProps) => props.theme.sidebar.icons.filled.isActive.bg};\n        }\n\n        p { color : ${(props : SidebarWrapperProps) => props.theme.sidebar.links.isSelected.text}; }\n    }\n`;\n"],"names":["SidebarWrapperStyled","aside","props","theme","sidebar","width","bg","links","default","scale","isCollapsed","SidebarHeaderStyled","SidebarItemTextStyled","SidebarItemStyled","SidebarItemIconStyled","label","text","SidebarFooterStyled","subLinks","isSelected","border","icons","stroked","isActive","line","filled"],"mappings":"ucAYaA,4BAA8BC,8JAOjBC,GAA+BA,EAAMC,MAAMC,QAAQC,2FAInDH,GAA+BA,EAAMC,MAAMC,QAAQE,4EAGnDJ,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMC,QAAQC,8GAYnEP,GAA+BA,EAAMC,MAAMC,QAAQM,YAAYL,2BAG7EM,wGAUAC,2DAKAC,6BAA2BC,6BAA2BF,sIAO9BV,GAA+BA,EAAMC,MAAMC,QAAQM,YAAYK,MAAMT,YACrEJ,GAA+BA,EAAMC,MAAMC,QAAQM,YAAYK,MAAMC,sEAK7FC,8DAKSf,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMC,QAAQQ,6BAGrDd,GAA+BA,EAAMC,MAAMC,QAAQc,SAASV,QAAQQ,mEAKrEd,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMY,WAAWb,0KAYtDJ,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMY,WAAWC,gDAKlFlB,GAAgCA,EAAMC,MAAMC,QAAQiB,MAAMC,QAAQC,SAASC,6CAKjFtB,GAAgCA,EAAMC,MAAMC,QAAQiB,MAAMI,OAAOF,SAASjB,eAG3EJ,GAAgCA,EAAMC,MAAMC,QAAQG,MAAMY,WAAWH"}
+{"version":3,"file":"SidebarWrapper.styled.js","sources":["../../../../../src/components/Sidebar/SidebarWrapper/SidebarWrapper.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { SidebarWrapperProps } from \"./SidebarWrapper\";\nimport { SidebarItemIconProps } from \"../SidebarItemIcon/SidebarItemIcon\";\nimport { SidebarItemTextProps } from \"../SidebarItemText/SidebarItemText\";\n\nimport { SidebarHeaderStyled } from \"../SidebarHeader/SidebarHeader.styled\";\nimport { SidebarItemStyled } from \"../SidebarItem/SidebarItem.styled\";\nimport { SidebarItemTextStyled } from \"../SidebarItemText/SidebarItemText.styled\";\nimport { SidebarItemIconStyled } from \"../SidebarItemIcon/SidebarItemIcon.styled\";\nimport { SidebarFooterStyled } from \"../SidebarFooter/SidebarFooter.styled\";\n\n\nexport const SidebarWrapperStyled = styled.aside`\n    display          : flex;\n    flex-direction   : column;\n    position         : fixed;\n    top              : 0;\n    left             : 0;\n    bottom           : 0;\n    width            : ${(props: SidebarWrapperProps) => props.theme.sidebar.width};\n    min-height       : 100vh;\n    overflow-y       : auto;\n    transition       : all 0.4s ease-in-out;\n    background-color : ${(props: SidebarWrapperProps) => props.theme.sidebar.bg};\n    box-shadow       : 2px 0 8px -4px rgba(0, 0, 0, 0.16);\n    z-index          : 10000;\n    font-size        : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.default.scale}%;\n\n    /*  BASICS  ===========================================================  */\n    * { user-select : none; }\n    \n    @media (max-width : 900px) {\n        left    : calc(-1 * 100%);\n        z-index : 4000;\n    }\n\n    /*  COLLAPSED  ========================================================  */\n    &.collapsed {\n        width      : ${(props: SidebarWrapperProps) => props.theme.sidebar.isCollapsed.width};\n        overflow-x : hidden;\n\n        ${SidebarHeaderStyled} {\n            .header-logo { display : none; }\n\n            .header-icon {\n                display : block;\n                width   : 32px;\n                height  : 32px;\n            }\n        }\n\n        ${SidebarItemTextStyled} {\n            display  : none;\n            position : absolute;\n        }\n\n        ${SidebarItemStyled}:hover ${SidebarItemIconStyled} + ${SidebarItemTextStyled} {\n            display          : flex;\n            position         : fixed;\n            left             : 40px;\n            align-self       : center;\n            border-radius    : 4px;\n            padding          : 4px 8px;\n            background-color : ${(props: SidebarWrapperProps) => props.theme.sidebar.isCollapsed.label.bg};\n            color            : ${(props: SidebarWrapperProps) => props.theme.sidebar.isCollapsed.label.text};\n            font-size        : 88%;\n            box-shadow       : 0 4px 16px -2px rgba(0, 0, 0, 0.24);\n        }\n\n        ${SidebarFooterStyled} { padding-left : 0; }\n    }\n\n    a {\n        width : unset;\n        color : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.default.text};\n    }\n    \n    summary ~ a p { color : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.default.text}; }\n\n    a p:hover { color : ${(props : SidebarWrapperProps) => props.theme.sidebar.links.onHover.text}; }\n\n    a.active {\n        position         : relative;\n        display          : block;\n        background-color : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.isSelected.bg};\n\n        &::before {\n            display                    : block;\n            position                   : absolute;\n            width                      : 4px;\n            height                     : 100%;\n            top                        : 0;\n            left                       : 0;\n            content                    : \"\";\n            border-top-right-radius    : 4px;\n            border-bottom-right-radius : 4px;\n            background-color           : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.isSelected.border};\n        }\n        \n        & .icon-stroked svg {\n            fill         : none;\n            stroke       : ${(props: SidebarItemIconProps) => props.theme.sidebar.icons.stroked.isActive.line};\n        }\n\n        & .icon-filled svg {\n            stroke : none;\n            fill   : ${(props: SidebarItemIconProps) => props.theme.sidebar.icons.filled.isActive.bg};\n        }\n\n        p { color : ${(props : SidebarWrapperProps) => props.theme.sidebar.links.isSelected.text}; }\n    }\n`;\n"],"names":["SidebarWrapperStyled","aside","props","theme","sidebar","width","bg","links","default","scale","isCollapsed","SidebarHeaderStyled","SidebarItemTextStyled","SidebarItemStyled","SidebarItemIconStyled","label","text","SidebarFooterStyled","onHover","isSelected","border","icons","stroked","isActive","line","filled"],"mappings":"ucAaaA,4BAA8BC,8JAOjBC,GAA+BA,EAAMC,MAAMC,QAAQC,2FAInDH,GAA+BA,EAAMC,MAAMC,QAAQE,4EAGnDJ,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMC,QAAQC,8GAYnEP,GAA+BA,EAAMC,MAAMC,QAAQM,YAAYL,2BAG7EM,wGAUAC,2DAKAC,6BAA2BC,6BAA2BF,sIAO9BV,GAA+BA,EAAMC,MAAMC,QAAQM,YAAYK,MAAMT,YACrEJ,GAA+BA,EAAMC,MAAMC,QAAQM,YAAYK,MAAMC,sEAK7FC,8DAKSf,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMC,QAAQQ,6BAGrDd,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMC,QAAQQ,yBAErEd,GAAgCA,EAAMC,MAAMC,QAAQG,MAAMW,QAAQF,mEAK/Dd,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMY,WAAWb,0KAYtDJ,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMY,WAAWC,gDAKlFlB,GAAgCA,EAAMC,MAAMC,QAAQiB,MAAMC,QAAQC,SAASC,6CAKjFtB,GAAgCA,EAAMC,MAAMC,QAAQiB,MAAMI,OAAOF,SAASjB,eAG3EJ,GAAgCA,EAAMC,MAAMC,QAAQG,MAAMY,WAAWH"}

package/dist/cjs/external/Element.js

@@ -1,2 +1,2 @@
-"use strict";function o(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var t=/*#__PURE__*/o(require("react"));function e(o,t){var e={};for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&t.indexOf(n)<0&&(e[n]=o[n]);if(null!=o&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(o);r<n.length;r++)t.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(o,n[r])&&(e[n[r]]=o[n[r]])}return e}const n=o=>o.filter((o=>!!o)).join(" "),r=t.default.forwardRef(((o,r)=>{const{as:i,classNames:l=[],className:a,size:s,isFullWidth:d,isFullHeight:g,bgColor:p,bgColour:h,textColor:b,textColour:m,borderColor:O,borderColour:f,fillColor:c,fillColour:u,strokeColor:y,strokeColour:$,hideOnMobile:w,showOnlyOnMobile:C,hideOnTabPT:S,showOnlyOnTabPT:T,hideOnTabLS:k,showOnlyOnTabLS:x,hideOnDesktop:j,showOnlyOnDesktop:L,marginTop:P,marginRight:N,marginBottom:R,marginLeft:v,margin:B,paddingTop:D,paddingRight:F,paddingBottom:M,paddingLeft:z,padding:E,shadow:H,shape:I,opacity:W}=o,_=e(o,["as","classNames","className","size","isFullWidth","isFullHeight","bgColor","bgColour","textColor","textColour","borderColor","borderColour","fillColor","fillColour","strokeColor","strokeColour","hideOnMobile","showOnlyOnMobile","hideOnTabPT","showOnlyOnTabPT","hideOnTabLS","showOnlyOnTabLS","hideOnDesktop","showOnlyOnDesktop","marginTop","marginRight","marginBottom","marginLeft","margin","paddingTop","paddingRight","paddingBottom","paddingLeft","padding","shadow","shape","opacity"]),q=e(o,["as","className","classNames"]);return t.default.createElement(i,Object.assign({ref:r},"object"==typeof i&&i.hasOwnProperty("styledComponentId")?q:_,{className:n([a,s&&`size-${s}`,d&&"full-width",g&&"full-height",p&&`bg-${String(p)}`,h&&`bg-${String(h)}`,b&&`text-${String(b)}`,m&&`text-${String(m)}`,O&&`border-${String(O)}`,f&&`border-${String(f)}`,c&&`fill-${String(c)}`,u&&`fill-${String(u)}`,y&&`stroke-${String(y)}`,$&&`stroke-${String($)}`,w&&"hide-on-mobile",C&&"show-only-on-mobile",S&&"hide-on-tablet-portrait",T&&"show-only-on-tablet-portrait",k&&"hide-on-tablet-landscape",x&&"show-only-on-tablet-landscape",j&&"hide-on-desktop",L&&"show-only-on-desktop",P&&`margin-top-${P}`,N&&`margin-right-${N}`,R&&`margin-bottom-${R}`,v&&`margin-left-${v}`,B&&`margin-all-${B}`,D&&`padding-top-${D}`,F&&`padding-right-${F}`,M&&`padding-bottom-${M}`,z&&`padding-left-${z}`,E&&`padding-all-${E}`,H&&`shadow-${H}`,I&&`shape-${I}`,W&&`opacity-${W}`].concat(l))}))}));exports.Element=r,exports.__rest=e;
+"use strict";function o(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var t=/*#__PURE__*/o(require("react"));function e(o,t){var e={};for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&t.indexOf(r)<0&&(e[r]=o[r]);if(null!=o&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(o);n<r.length;n++)t.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(o,r[n])&&(e[r[n]]=o[r[n]])}return e}const r=o=>o.filter((o=>!!o)).join(" "),n=t.default.forwardRef(((o,n)=>{const{as:l,classNames:a=[],className:i,size:s,isFullWidth:d,isFullHeight:g,bgColor:p,bgColour:h,textColor:b,textColour:m,borderColor:O,borderColour:c,fillColor:f,fillColour:u,strokeColor:y,strokeColour:$,hideOnMobile:w,showOnlyOnMobile:C,hideOnTabletPortrait:k,showOnlyOnTabletPortrait:S,hideOnTabletLandscape:T,showOnlyOnTabletLandscape:x,hideOnDesktop:L,showOnlyOnDesktop:P,marginTop:j,marginRight:N,marginBottom:R,marginLeft:v,margin:B,paddingTop:D,paddingRight:F,paddingBottom:M,paddingLeft:z,padding:E,shadow:H,shape:I,opacity:W}=o,_=e(o,["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"]),q=e(o,["as","className","classNames"]);return t.default.createElement(l,Object.assign({ref:n},"string"!=typeof l&&l.hasOwnProperty("styledComponentId")?q:_,{className:r([i,s&&`size-${s}`,d&&"full-width",g&&"full-height",p&&`bg-${String(p)}`,h&&`bg-${String(h)}`,b&&`text-${String(b)}`,m&&`text-${String(m)}`,O&&`border-${String(O)}`,c&&`border-${String(c)}`,f&&`fill-${String(f)}`,u&&`fill-${String(u)}`,y&&`stroke-${String(y)}`,$&&`stroke-${String($)}`,w&&"hide-on-mobile",C&&"show-only-on-mobile",k&&"hide-on-tablet-portrait",S&&"show-only-on-tablet-portrait",T&&"hide-on-tablet-landscape",x&&"show-only-on-tablet-landscape",L&&"hide-on-desktop",P&&"show-only-on-desktop",j&&`margin-top-${j}`,N&&`margin-right-${N}`,R&&`margin-bottom-${R}`,v&&`margin-left-${v}`,B&&`margin-all-${B}`,D&&`padding-top-${D}`,F&&`padding-right-${F}`,M&&`padding-bottom-${M}`,z&&`padding-left-${z}`,E&&`padding-all-${E}`,H&&`shadow-${H}`,I&&`shape-${I}`,W&&`opacity-${W}`].concat(a))}))}));exports.Element=n,exports.__rest=e;
 //# 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: any[]): 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        hideOnTabPT,\n        showOnlyOnTabPT,\n        hideOnTabLS,\n        showOnlyOnTabLS,\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        ...minimalProps\n    } = props;\n\n    const { as, className : _, classNames : __, ...sanitizedProps } = props;\n\n    return (\n        <Component\n            ref={ref}\n            {...(typeof Component === \"object\" && Component.hasOwnProperty(\"styledComponentId\") ? sanitizedProps : 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                    hideOnTabPT && \"hide-on-tablet-portrait\",\n                    showOnlyOnTabPT && \"show-only-on-tablet-portrait\",\n                    hideOnTabLS && \"hide-on-tablet-landscape\",\n                    showOnlyOnTabLS && \"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                ].concat(classNames)\n            )}\n            // data-testid={`${Component.displayName}Test`}\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","hideOnTabPT","showOnlyOnTabPT","hideOnTabLS","showOnlyOnTabLS","hideOnDesktop","showOnlyOnDesktop","marginTop","marginRight","marginBottom","marginLeft","margin","paddingTop","paddingRight","paddingBottom","paddingLeft","padding","shadow","shape","opacity","minimalProps","sanitizedProps","hasOwnProperty","String","concat"],"mappings":"ucAAO,MAAMA,EAAmBC,GACrBA,EAAWC,QAAQC,KAAWA,IAAMC,KAAK,KCKvCC,EAAUC,UAAMC,YAAW,CAAeC,EAAwBC,WAEvEC,GAAKC,EADHV,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,YAmBFA,EAnBEC,gBAoBFA,EApBEC,YAqBFA,EArBEC,gBAsBFA,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,GAEAtC,EADGuC,IACHvC,EAvCE,0eAyCyCwC,IAAmBxC,EAA5D,wCAGFF,wBAACK,iBACGF,IAAKA,GACqB,iBAAdE,GAA0BA,EAAUsC,eAAe,qBAAuBD,EAAiBD,GACvGnC,UAAWZ,EACP,CACIY,EACAC,WAAgBA,IAChBC,GAAe,aACfC,GAAgB,cAChBC,SAAiBkC,OAAOlC,KACxBC,SAAkBiC,OAAOjC,KACzBC,WAAqBgC,OAAOhC,KAC5BC,WAAsB+B,OAAO/B,KAC7BC,aAAyB8B,OAAO9B,KAChCC,aAA0B6B,OAAO7B,KACjCC,WAAqB4B,OAAO5B,KAC5BC,WAAsB2B,OAAO3B,KAC7BC,aAAyB0B,OAAO1B,KAChCC,aAA0ByB,OAAOzB,KACjCC,GAAgB,iBAChBC,GAAoB,sBACpBC,GAAe,0BACfC,GAAmB,+BACnBC,GAAe,2BACfC,GAAmB,gCACnBC,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,KACxBK,OAAOlD"}
+{"version":3,"file":"Element.js","sources":["../../../src/utils/classNames.ts","../../../src/components/Element/Element.tsx"],"sourcesContent":["export const createClassName = (classNames: any[]): 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        ...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\") ? sanitizedProps : 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                ].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","minimalProps","sanitizedProps","hasOwnProperty","String","concat"],"mappings":"ucAAO,MAAMA,EAAmBC,GACrBA,EAAWC,QAAQC,KAAWA,IAAMC,KAAK,KCKvCC,EAAUC,UAAMC,YAAW,CAAeC,EAAwBC,WAEvEC,GAAKC,EADHV,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,GAEAtC,EADGuC,IACHvC,EAvCE,ghBAyCyCwC,IAAmBxC,EAA5D,wCAGFF,wBAACK,iBACGF,IAAKA,GACqB,iBAAdE,GAA0BA,EAAUsC,eAAe,qBAAuBD,EAAiBD,GACvGnC,UAAWZ,EACP,CACIY,EACAC,WAAgBA,IAChBC,GAAe,aACfC,GAAgB,cAChBC,SAAiBkC,OAAOlC,KACxBC,SAAkBiC,OAAOjC,KACzBC,WAAqBgC,OAAOhC,KAC5BC,WAAsB+B,OAAO/B,KAC7BC,aAAyB8B,OAAO9B,KAChCC,aAA0B6B,OAAO7B,KACjCC,WAAqB4B,OAAO5B,KAC5BC,WAAsB2B,OAAO3B,KAC7BC,aAAyB0B,OAAO1B,KAChCC,aAA0ByB,OAAOzB,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,KACxBK,OAAOlD"}

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

@@ -1,4 +1,4 @@
-import { HTMLProps } from "react";
+import { ElementType, HTMLProps } from "react";
 import { defaultColourProps } from "../../styles/DefaultColourProps";
 import { customColours, FictoanTheme } from "../../styles/theme";
 declare type DeepPartial<T> = {
@@ -26,10 +26,10 @@ export interface CommonProps extends ThemeProps {
     strokeColour?: ColourPropTypes;
     hideOnMobile?: boolean;
     showOnlyOnMobile?: boolean;
-    hideOnTabPT?: boolean;
-    showOnlyOnTabPT?: boolean;
-    hideOnTabLS?: boolean;
-    showOnlyOnTabLS?: boolean;
+    hideOnTabletPortrait?: boolean;
+    showOnlyOnTabletPortrait?: boolean;
+    hideOnTabletLandscape?: boolean;
+    showOnlyOnTabletLandscape?: boolean;
     hideOnDesktop?: boolean;
     showOnlyOnDesktop?: boolean;
     isFullWidth?: boolean;
@@ -49,10 +49,10 @@ export interface CommonProps extends ThemeProps {
     opacity?: OpacityTypes;
     classNames?: any[];
 }
-export interface CommonAndHTMLProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "size" | "ref" | "shape"> {
+export interface CommonAndHTMLProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "as" | "size" | "ref" | "shape"> {
 }
 export interface ElementProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "as" | "ref" | "shape"> {
-    as: any;
+    as: ElementType;
     className?: string;
 }
 export {};

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

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

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

@@ -1,4 +1,4 @@
-import{_ as t,E as o}from"../../../external/Element.js";import e from"react";import{Row as r}from"../../Row/Row.js";import{Portion as i}from"../../Portion/Portion.js";import{InputField as a}from"../InputField/InputField.js";import{FileUpload as p}from"../InputField/FileUpload.js";import{InputLabel as s}from"../InputLabel/InputLabel.js";import{CheckBox as n}from"../CheckBox/CheckBox.js";import{Switch as m}from"../CheckBox/Switch.js";import{RadioButton as l}from"../RadioButton/RadioButton.js";import{RadioGroup as d}from"../RadioButton/RadioGroup.js";import{Select as c}from"../Select/Select.js";import{TextArea as j}from"../TextArea/TextArea.js";import"../../Row/Row.styled.js";import"styled-components";import"../../Portion/Portion.styled.js";import"../BaseInputComponent/BaseInputComponent.js";import"../FormItem/FormItem.js";import"../FormItem/FormItem.styled.js";import"../InputField/InputField.styled.js";import"../Select/Select.styled.js";import"../TextArea/TextArea.styled.js";import"../CheckBox/CheckBox.styled.js";import"../RadioButton/RadioButton.styled.js";const u={CheckBox:n,Switch:m,InputField:a,FileUpload:p,InputLabel:s,RadioButton:l,RadioGroup:d,Select:c,TextArea:j,Empty:"div"},S=(r,i)=>{const{as:p}=r,s=t(r,["as"]);/*#__PURE__*/
-return e.createElement(o,Object.assign({as:u[p]||a},s,{isFullWidth:!0,onChange:i}))},f=(o,a,p)=>{let s=[];for(const r in o){const p=o[r],{desktopSpan:n,tabletLandscape:m,tabletPortraitSpan:l,mobileSpan:d,isHorizontal:c}=p,j=t(p,["desktopSpan","tabletLandscape","tabletPortraitSpan","mobileSpan","isHorizontal"]),u={desktopSpan:n,tabletLandscape:m,tabletPortraitSpan:l,mobileSpan:d,isHorizontal:c};s.push(/*#__PURE__*/e.createElement(i,Object.assign({},u,{key:`fields-${r}`}),S(j,a)))}/*#__PURE__*/
+import{_ as t,E as o}from"../../../external/Element.js";import e from"react";import{Row as r}from"../../Row/Row.js";import{Portion as i}from"../../Portion/Portion.js";import{InputLabel as a}from"../InputLabel/InputLabel.js";import{InputField as p}from"../InputField/InputField.js";import{FileUpload as s}from"../InputField/FileUpload.js";import{CheckBox as n}from"../CheckBox/CheckBox.js";import{Switch as m}from"../CheckBox/Switch.js";import{RadioButton as l}from"../RadioButton/RadioButton.js";import{RadioGroup as d}from"../RadioButton/RadioGroup.js";import{Select as c}from"../Select/Select.js";import{TextArea as j}from"../TextArea/TextArea.js";import"../../Row/Row.styled.js";import"styled-components";import"../../Portion/Portion.styled.js";import"../BaseInputComponent/BaseInputComponent.js";import"../FormItem/FormItem.js";import"../FormItem/FormItem.styled.js";import"../InputField/InputField.styled.js";import"../Select/Select.styled.js";import"../TextArea/TextArea.styled.js";import"../CheckBox/CheckBox.styled.js";import"../RadioButton/RadioButton.styled.js";const u={CheckBox:n,Switch:m,InputField:p,FileUpload:s,InputLabel:a,RadioButton:l,RadioGroup:d,Select:c,TextArea:j,Empty:"div"},S=(r,i)=>{const{as:a}=r,s=t(r,["as"]);/*#__PURE__*/
+return e.createElement(o,Object.assign({as:u[a]||p},s,{isFullWidth:!0,onChange:i}))},f=(o,a,p)=>{let s=[];for(const r in o){const p=o[r],{desktopSpan:n,tabletLandscape:m,tabletPortraitSpan:l,mobileSpan:d,isHorizontal:c}=p,j=t(p,["desktopSpan","tabletLandscape","tabletPortraitSpan","mobileSpan","isHorizontal"]),u={desktopSpan:n,tabletLandscape:m,tabletPortraitSpan:l,mobileSpan:d,isHorizontal:c};s.push(/*#__PURE__*/e.createElement(i,Object.assign({},u,{key:`fields-${r}`}),S(j,a)))}/*#__PURE__*/
 return e.createElement(r,{gutters:p},s)};export{f as generateFormThroughConfig};
 //# sourceMappingURL=FormGenerator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormGenerator.js","sources":["../../../../../src/components/Form/FormWrapper/FormGenerator.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\n\nimport { Element } from \"../../Element/Element\";\nimport { ElementProps, SpacingTypes } from \"../../Element/constants\";\n\nimport { Row } from \"../../Row/Row\";\nimport { PortionProps, Portion } from \"../../Portion/Portion\";\nimport { InputLabelCustomProps } from \"../InputLabel/InputLabel\";\nimport { InputCommonProps } from \"../BaseInputComponent/constants\";\nimport { InputField } from \"../InputField/InputField\";\nimport { FileUpload } from \"../InputField/FileUpload\";\nimport { InputLabel } from \"../InputLabel/InputLabel\";\nimport { CheckBox } from \"../CheckBox/CheckBox\";\nimport { Switch } from \"../CheckBox/Switch\";\nimport { RadioButton } from \"../RadioButton/RadioButton\";\nimport { RadioGroup } from \"../RadioButton/RadioGroup\";\nimport { Select } from \"../Select/Select\";\nimport { TextArea } from \"../TextArea/TextArea\";\nimport { RadioGroupOption } from \"../RadioButton/constants\";\n\n// Types\nexport type FormFieldsType = ElementProps<HTMLInputElement> &\n    ElementProps<HTMLSelectElement> &\n    ElementProps<HTMLTextAreaElement> &\n    InputLabelCustomProps &\n    InputCommonProps;\nexport type FormFieldsConfigBase = PortionProps & FormFieldsType;\n\ninterface FormFieldOptionsType extends RadioGroupOption {\n    id: string;\n    label: string;\n    value: string;\n}\n\nexport interface FormFieldsConfig extends FormFieldsConfigBase {\n    as: string;\n    options?: FormFieldOptionsType[];\n}\n\n// Supported Form elements for \"as\" prop in config\nconst FormElements: Record<string, ReactNode | string> = {\n    CheckBox: CheckBox,\n    Switch: Switch,\n    InputField: InputField,\n    FileUpload: FileUpload,\n    InputLabel: InputLabel,\n    RadioButton: RadioButton,\n    RadioGroup: RadioGroup,\n    Select: Select,\n    TextArea: TextArea,\n    Empty: \"div\",\n};\n\nconst getFormItem = (formField: FormFieldsType, onFieldsChange: React.FormEventHandler | null): ReactNode => {\n    const { as: elementName, ...formFieldProps } = formField;\n\n    return (\n        <Element\n            as={FormElements[elementName] || InputField}\n            {...formFieldProps}\n            isFullWidth\n            // disabled={disabledIds.includes(formFieldProps.id)}\n            onChange={onFieldsChange}\n        />\n    );\n};\n\nexport const generateFormThroughConfig = (\n    fields: FormFieldsConfig[],\n    onFieldsChange: React.FormEventHandler | null,\n    spacing: SpacingTypes\n): ReactNode => {\n    let formChildren: ReactNode[] = [];\n\n    for (const i in fields) {\n        const { desktopSpan, tabletLandscape, tabletPortraitSpan, mobileSpan, isHorizontal, ...formField } = fields[i];\n\n        const portionProps = {\n            desktopSpan,\n            tabletLandscape,\n            tabletPortraitSpan,\n            mobileSpan,\n            isHorizontal,\n        };\n\n        formChildren.push(<Portion {...portionProps} key={`fields-${i}`}>{getFormItem(formField, onFieldsChange)}</Portion>);\n    }\n    return <Row gutters={spacing}>{formChildren}</Row>;\n};\n"],"names":["FormElements","CheckBox","Switch","InputField","FileUpload","InputLabel","RadioButton","RadioGroup","Select","TextArea","Empty","getFormItem","formField","onFieldsChange","as","elementName","formFieldProps","React","Element","isFullWidth","onChange","generateFormThroughConfig","fields","spacing","formChildren","i","_a","desktopSpan","tabletLandscape","tabletPortraitSpan","mobileSpan","isHorizontal","portionProps","push","Portion","key","Row","gutters"],"mappings":"gjCAwCA,MAAMA,EAAmD,CACrDC,SAAUA,EACVC,OAAQA,EACRC,WAAYA,EACZC,WAAYA,EACZC,WAAYA,EACZC,YAAaA,EACbC,WAAYA,EACZC,OAAQA,EACRC,SAAUA,EACVC,MAAO,OAGLC,EAAc,CAACC,EAA2BC,WACpCC,GAAIC,GAAmCH,EAAnBI,IAAmBJ,EAAzC;OAGFK,gBAACC,iBACGJ,GAAId,EAAae,IAAgBZ,GAC7Ba,GACJG,eAEAC,SAAUP,MAKTQ,EAA4B,CACrCC,EACAT,EACAU,SAEIC,EAA4B,OAE3B,MAAMC,KAAKH,EAAQ,OACdI,EAA+FJ,EAAOG,IAAtGE,YAAEA,EAAFC,gBAAeA,EAAfC,mBAAgCA,EAAhCC,WAAoDA,EAApDC,aAAgEA,KAAiBnB,MAAjF,oFAEAoB,EAAe,CACjBL,YAAAA,EACAC,gBAAAA,EACAC,mBAAAA,EACAC,WAAAA,EACAC,aAAAA,GAGJP,EAAaS,kBAAKhB,gBAACiB,mBAAYF,GAAcG,cAAeV,MAAMd,EAAYC,EAAWC;OAEtFI,gBAACmB,GAAIC,QAASd,GAAUC"}
+{"version":3,"file":"FormGenerator.js","sources":["../../../../../src/components/Form/FormWrapper/FormGenerator.tsx"],"sourcesContent":["import React, { ElementType, ReactNode } from \"react\";\n\nimport { Element } from \"../../Element/Element\";\nimport { ElementProps, SpacingTypes } from \"../../Element/constants\";\n\nimport { Row } from \"../../Row/Row\";\nimport { PortionProps, Portion } from \"../../Portion/Portion\";\nimport { InputLabel, InputLabelCustomProps } from \"../InputLabel/InputLabel\";\nimport { InputCommonProps } from \"../BaseInputComponent/constants\";\nimport { InputField } from \"../InputField/InputField\";\nimport { FileUpload } from \"../InputField/FileUpload\";\nimport { CheckBox } from \"../CheckBox/CheckBox\";\nimport { Switch } from \"../CheckBox/Switch\";\nimport { RadioButton } from \"../RadioButton/RadioButton\";\nimport { RadioGroup } from \"../RadioButton/RadioGroup\";\nimport { Select } from \"../Select/Select\";\nimport { TextArea } from \"../TextArea/TextArea\";\nimport { RadioGroupOption } from \"../RadioButton/constants\";\n\n// Types\nexport type FormFieldsType = ElementProps<HTMLInputElement> &\n    ElementProps<HTMLSelectElement> &\n    ElementProps<HTMLTextAreaElement> &\n    InputLabelCustomProps &\n    InputCommonProps;\nexport type FormFieldsConfigBase = PortionProps & FormFieldsType;\n\ninterface FormFieldOptionsType extends RadioGroupOption {\n    id: string;\n    label: string;\n    value: string;\n}\n\nexport interface FormFieldsConfig extends FormFieldsConfigBase {\n    as: ElementType;\n    options?: FormFieldOptionsType[];\n}\n\n// Supported Form elements for \"as\" prop in config\nconst FormElements: Record<string, ElementType> = {\n    CheckBox: CheckBox,\n    Switch: Switch,\n    InputField: InputField,\n    FileUpload: FileUpload,\n    InputLabel: InputLabel,\n    RadioButton: RadioButton,\n    RadioGroup: RadioGroup,\n    Select: Select,\n    TextArea: TextArea,\n    Empty: \"div\",\n};\n\nconst getFormItem = (formField: FormFieldsType, onFieldsChange: React.FormEventHandler | null): ReactNode => {\n    const { as: elementName, ...formFieldProps } = formField;\n\n    return (\n        <Element\n            as={FormElements[elementName as keyof typeof FormElements] || InputField}\n            {...formFieldProps}\n            isFullWidth\n            // disabled={disabledIds.includes(formFieldProps.id)}\n            onChange={onFieldsChange}\n        />\n    );\n};\n\nexport const generateFormThroughConfig = (\n    fields: FormFieldsConfig[],\n    onFieldsChange: React.FormEventHandler | null,\n    spacing: SpacingTypes\n): ReactNode => {\n    let formChildren: ReactNode[] = [];\n\n    for (const i in fields) {\n        const { desktopSpan, tabletLandscape, tabletPortraitSpan, mobileSpan, isHorizontal, ...formField } = fields[i];\n\n        const portionProps = {\n            desktopSpan,\n            tabletLandscape,\n            tabletPortraitSpan,\n            mobileSpan,\n            isHorizontal,\n        };\n\n        formChildren.push(<Portion {...portionProps} key={`fields-${i}`}>{getFormItem(formField, onFieldsChange)}</Portion>);\n    }\n    return <Row gutters={spacing}>{formChildren}</Row>;\n};\n"],"names":["FormElements","CheckBox","Switch","InputField","FileUpload","InputLabel","RadioButton","RadioGroup","Select","TextArea","Empty","getFormItem","formField","onFieldsChange","as","elementName","formFieldProps","React","Element","isFullWidth","onChange","generateFormThroughConfig","fields","spacing","formChildren","i","_a","desktopSpan","tabletLandscape","tabletPortraitSpan","mobileSpan","isHorizontal","portionProps","push","Portion","key","Row","gutters"],"mappings":"gjCAuCA,MAAMA,EAA4C,CAC9CC,SAAUA,EACVC,OAAQA,EACRC,WAAYA,EACZC,WAAYA,EACZC,WAAYA,EACZC,YAAaA,EACbC,WAAYA,EACZC,OAAQA,EACRC,SAAUA,EACVC,MAAO,OAGLC,EAAc,CAACC,EAA2BC,WACpCC,GAAIC,GAAmCH,EAAnBI,IAAmBJ,EAAzC;OAGFK,gBAACC,iBACGJ,GAAId,EAAae,IAA6CZ,GAC1Da,GACJG,eAEAC,SAAUP,MAKTQ,EAA4B,CACrCC,EACAT,EACAU,SAEIC,EAA4B,OAE3B,MAAMC,KAAKH,EAAQ,OACdI,EAA+FJ,EAAOG,IAAtGE,YAAEA,EAAFC,gBAAeA,EAAfC,mBAAgCA,EAAhCC,WAAoDA,EAApDC,aAAgEA,KAAiBnB,MAAjF,oFAEAoB,EAAe,CACjBL,YAAAA,EACAC,gBAAAA,EACAC,mBAAAA,EACAC,WAAAA,EACAC,aAAAA,GAGJP,EAAaS,kBAAKhB,gBAACiB,mBAAYF,GAAcG,cAAeV,MAAMd,EAAYC,EAAWC;OAEtFI,gBAACmB,GAAIC,QAASd,GAAUC"}

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

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

package/dist/es/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        padding          : 11px;\n    }\n\n    &[type=password] { letter-spacing : 4px; }\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 check mark  */\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","styled","input","props","theme","text","font","sans","inputField","default","bg","border","borderRadius","onFocus","icons","fill","isValid","isInvalid"],"mappings":"uCAKaA,EAAmBC,EAAOC,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,GAA2BA,EAAMC,MAAMI,WAAWC,QAAQG,6EAMtDT,GAA2BA,EAAMC,MAAMI,WAAWK,QAAQH,uBAChDP,GAA2BA,EAAMC,MAAMI,WAAWK,QAAQF,wQAoB1ER,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        padding          : 11px;\n    }\n\n    &[type=password] { letter-spacing : 4px; }\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","styled","input","props","theme","text","font","sans","inputField","default","bg","border","borderRadius","onFocus","icons","fill","isValid","isInvalid"],"mappings":"uCAKaA,EAAmBC,EAAOC,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,wQAoB3ER,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"}

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

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

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

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

package/dist/es/components/Row/Row.d.ts

@@ -3,8 +3,8 @@ import { CommonAndHTMLProps, SpacingTypes } from "../Element/constants";
 export interface RowCustomProps {
     sidePadding?: "nano" | "micro" | "tiny" | "small" | "medium" | "large" | "huge";
     gutters?: SpacingTypes;
-    retainLayoutOnTabLS?: boolean;
-    retainLayoutOnTabPT?: boolean;
+    retainLayoutOnTabletLandscape?: boolean;
+    retainLayoutOnTabletPortrait?: boolean;
     retainLayoutOnMobile?: boolean;
     retainLayoutAlways?: boolean;
 }

package/dist/es/components/Row/Row.js

@@ -1,2 +1,2 @@
-import{_ as t,E as a}from"../../external/Element.js";import e from"react";import{RowStyled as o}from"./Row.styled.js";import"styled-components";import"../Portion/Portion.styled.js";const n=/*#__PURE__*/e.forwardRef(((n,r)=>{var{sidePadding:i,gutters:s="medium",retainLayoutOnTabLS:l,retainLayoutOnTabPT:u,retainLayoutOnMobile:y,retainLayoutAlways:m}=n,p=t(n,["sidePadding","gutters","retainLayoutOnTabLS","retainLayoutOnTabPT","retainLayoutOnMobile","retainLayoutAlways"]);let d=[];return i&&d.push(`side-padding-${i}`),s&&d.push("none"===s?"no-gutters":`${s}-gutters`),l&&d.push("retain-layout-on-tablet-landscape"),u&&d.push("retain-layout-on-tablet-portrait"),y&&d.push("retain-layout-on-mobile"),m&&d.push("retain-layout-on-tablet-landscape retain-layout-on-tablet-portrait retain-layout-on-mobile"),/*#__PURE__*/e.createElement(a,Object.assign({as:o,ref:r,classNames:d,marginBottom:"tiny",isFullWidth:!0},p))}));export{n as Row};
+import{_ as t,E as a}from"../../external/Element.js";import e from"react";import{RowStyled as o}from"./Row.styled.js";import"styled-components";import"../Portion/Portion.styled.js";const n=/*#__PURE__*/e.forwardRef(((n,r)=>{var{sidePadding:i,gutters:s="medium",retainLayoutOnTabletLandscape:l,retainLayoutOnTabletPortrait:u,retainLayoutOnMobile:p,retainLayoutAlways:y}=n,d=t(n,["sidePadding","gutters","retainLayoutOnTabletLandscape","retainLayoutOnTabletPortrait","retainLayoutOnMobile","retainLayoutAlways"]);let m=[];return i&&m.push(`side-padding-${i}`),s&&m.push("none"===s?"no-gutters":`${s}-gutters`),l&&m.push("retain-layout-on-tablet-landscape"),u&&m.push("retain-layout-on-tablet-portrait"),p&&m.push("retain-layout-on-mobile"),y&&m.push("retain-layout-on-tablet-landscape retain-layout-on-tablet-portrait retain-layout-on-mobile"),/*#__PURE__*/e.createElement(a,Object.assign({as:o,ref:r,classNames:m,marginBottom:"tiny",isFullWidth:!0},d))}));export{n as Row};
 //# sourceMappingURL=Row.js.map

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

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

package/dist/es/components/Sidebar/SidebarItem/SidebarItem.js

@@ -1,2 +1,2 @@
-import{_ as e,E as r}from"../../../external/Element.js";import t from"react";import{SidebarItemStyled as s}from"./SidebarItem.styled.js";import"styled-components";const a=/*#__PURE__*/t.forwardRef(((a,m)=>{var{hasAlert:o}=a,l=e(a,["hasAlert"]);let n=[];return o&&n.push("has-alert"),/*#__PURE__*/t.createElement(r,Object.assign({as:s,ref:m,classNames:n},l))}));export{a as SidebarItem};
+import{_ as e,E as t}from"../../../external/Element.js";import r from"react";import{SidebarItemStyled as s}from"./SidebarItem.styled.js";import"styled-components";import"../SidebarItemText/SidebarItemText.styled.js";const a=/*#__PURE__*/r.forwardRef(((a,m)=>{var{hasAlert:o}=a,l=e(a,["hasAlert"]);let i=[];return o&&i.push("has-alert"),/*#__PURE__*/r.createElement(t,Object.assign({as:s,ref:m,classNames:i},l))}));export{a as SidebarItem};
 //# sourceMappingURL=SidebarItem.js.map

package/dist/es/components/Sidebar/SidebarItem/SidebarItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.js","sources":["../../../../../src/components/Sidebar/SidebarItem/SidebarItem.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../../Element/Element\";\nimport { CommonAndHTMLProps } from \"../../Element/constants\";\n\nimport { SidebarItemStyled } from \"./SidebarItem.styled\";\n\nexport interface SidebarItemCustomProps {\n    hasAlert ?: boolean;\n}\n\nexport type SidebarItemElementType = HTMLDivElement;\nexport type SidebarItemProps = Omit<CommonAndHTMLProps<SidebarItemElementType>, keyof SidebarItemCustomProps> & SidebarItemCustomProps;\n\nexport const SidebarItem = React.forwardRef(\n    ({ hasAlert, ...props }: SidebarItemProps, ref: React.Ref<SidebarItemElementType>) => {\n        let classNames = [];\n\n        if(hasAlert) {\n            classNames.push(\"has-alert\");\n        }\n\n        return <Element<SidebarItemElementType> as={SidebarItemStyled} ref={ref} classNames={classNames} {...props} />;\n    }\n);\n"],"names":["SidebarItem","React","forwardRef","_a","ref","hasAlert","props","classNames","push","Element","as","SidebarItemStyled"],"mappings":"yKAcaA,eAAcC,EAAMC,YAC7B,CAACC,EAA0CC,SAA1CC,SAAEA,KAAaC,MAAf,kBACOC,EAAa,UAEdF,GACCE,EAAWC,KAAK,0BAGbP,gBAACQ,iBAAgCC,GAAIC,EAAmBP,IAAKA,EAAKG,WAAYA,GAAgBD"}
+{"version":3,"file":"SidebarItem.js","sources":["../../../../../src/components/Sidebar/SidebarItem/SidebarItem.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../../Element/Element\";\nimport { CommonAndHTMLProps } from \"../../Element/constants\";\n\nimport { SidebarItemStyled } from \"./SidebarItem.styled\";\n\nexport interface SidebarItemCustomProps {\n    hasAlert ? : boolean;\n}\n\nexport type SidebarItemElementType = HTMLDivElement;\nexport type SidebarItemProps = Omit<CommonAndHTMLProps<SidebarItemElementType>, keyof SidebarItemCustomProps> & SidebarItemCustomProps;\n\nexport const SidebarItem = React.forwardRef(\n    ({ hasAlert, ...props }: SidebarItemProps, ref: React.Ref<SidebarItemElementType>) => {\n        let classNames = [];\n\n        if(hasAlert) {\n            classNames.push(\"has-alert\");\n        }\n\n        return <Element<SidebarItemElementType> as={SidebarItemStyled} ref={ref} classNames={classNames} {...props} />;\n    }\n);\n"],"names":["SidebarItem","React","forwardRef","_a","ref","hasAlert","props","classNames","push","Element","as","SidebarItemStyled"],"mappings":"8NAcaA,eAAcC,EAAMC,YAC7B,CAACC,EAA0CC,SAA1CC,SAAEA,KAAaC,MAAf,kBACOC,EAAa,UAEdF,GACCE,EAAWC,KAAK,0BAGbP,gBAACQ,iBAAgCC,GAAIC,EAAmBP,IAAKA,EAAKG,WAAYA,GAAgBD"}

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

@@ -1,2 +1,2 @@
-import e from"styled-components";const t=e.div.withConfig({displayName:"SidebarItemStyled",componentId:"-1rbxifo"})`display:grid;align-items:center;grid-template-columns:${e=>e.theme.sidebar.isCollapsed.width} 1fr;grid-template-rows:40px;& > a{width:unset;}&:hover{color:${e=>e.theme.sidebar.links.onHover.text};background-color:${e=>e.theme.sidebar.links.onHover.bg};}&.has-alert{position:relative;&::after{content:"";display:block;position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;right:6px;height:8px;width:8px;border-radius:50%;background-color:${e=>e.theme.sidebar.links.hasAlert.bg};}}`;export{t as SidebarItemStyled};
+import e from"styled-components";import{SidebarItemTextStyled as t}from"../SidebarItemText/SidebarItemText.styled.js";const o=e.div.withConfig({displayName:"SidebarItemStyled",componentId:"-1rbxifo"})`display:grid;align-items:center;grid-template-columns:${e=>e.theme.sidebar.isCollapsed.width} 1fr;grid-template-rows:40px;& > a{width:unset;}&:hover{color:${e=>e.theme.sidebar.links.onHover.text};background-color:${e=>e.theme.sidebar.links.onHover.bg};}&:hover a ${t}{color:${e=>e.theme.sidebar.links.onHover.text};}&.has-alert{position:relative;&::after{content:"";display:block;position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;right:6px;height:8px;width:8px;border-radius:50%;background-color:${e=>e.theme.sidebar.links.hasAlert.bg};}}`;export{o as SidebarItemStyled};
 //# sourceMappingURL=SidebarItem.styled.js.map

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

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

package/dist/es/components/Sidebar/SidebarItemText/SidebarItemText.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItemText.styled.js","sources":["../../../../../src/components/Sidebar/SidebarItemText/SidebarItemText.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const SidebarItemTextStyled = styled.p`\n    margin             : 0;\n    overflow           : hidden;\n    -webkit-line-clamp : 1;\n`;\n"],"names":["SidebarItemTextStyled","styled","p"],"mappings":"uCAEaA,EAAwBC,EAAOC"}
+{"version":3,"file":"SidebarItemText.styled.js","sources":["../../../../../src/components/Sidebar/SidebarItemText/SidebarItemText.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { SidebarItemTextProps } from \"./SidebarItemText\";\n\nexport const SidebarItemTextStyled = styled.p`\n    margin             : 0;\n    overflow           : hidden;\n    -webkit-line-clamp : 1;\n`;\n"],"names":["SidebarItemTextStyled","styled","p"],"mappings":"uCAGaA,EAAwBC,EAAOC"}

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

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

package/dist/es/components/Sidebar/SidebarWrapper/SidebarWrapper.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarWrapper.styled.js","sources":["../../../../../src/components/Sidebar/SidebarWrapper/SidebarWrapper.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { SidebarWrapperProps } from \"./SidebarWrapper\";\nimport { SidebarItemIconProps } from \"../SidebarItemIcon/SidebarItemIcon\";\n\nimport { SidebarHeaderStyled } from \"../SidebarHeader/SidebarHeader.styled\";\nimport { SidebarItemStyled } from \"../SidebarItem/SidebarItem.styled\"\nimport { SidebarItemTextStyled } from \"../SidebarItemText/SidebarItemText.styled\"\nimport { SidebarItemIconStyled } from \"../SidebarItemIcon/SidebarItemIcon.styled\"\nimport { SidebarFooterStyled } from \"../SidebarFooter/SidebarFooter.styled\";\n\n\nexport const SidebarWrapperStyled = styled.aside`\n    display          : flex;\n    flex-direction   : column;\n    position         : fixed;\n    top              : 0;\n    left             : 0;\n    bottom           : 0;\n    width            : ${(props: SidebarWrapperProps) => props.theme.sidebar.width};\n    min-height       : 100vh;\n    overflow-y       : auto;\n    transition       : all 0.4s ease-in-out;\n    background-color : ${(props: SidebarWrapperProps) => props.theme.sidebar.bg};\n    box-shadow       : 2px 0 8px -4px rgba(0, 0, 0, 0.16);\n    z-index          : 10000;\n    font-size        : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.default.scale}%;\n\n    /*  BASICS  ===========================================================  */\n    * { user-select : none; }\n    \n    @media (max-width : 900px) {\n        left    : calc(-1 * 100%);\n        z-index : 4000;\n    }\n\n    /*  COLLAPSED  ========================================================  */\n    &.collapsed {\n        width      : ${(props: SidebarWrapperProps) => props.theme.sidebar.isCollapsed.width};\n        overflow-x : hidden;\n\n        ${SidebarHeaderStyled} {\n            .header-logo { display : none; }\n\n            .header-icon {\n                display : block;\n                width   : 32px;\n                height  : 32px;\n            }\n        }\n\n        ${SidebarItemTextStyled} {\n            display  : none;\n            position : absolute;\n        }\n\n        ${SidebarItemStyled}:hover ${SidebarItemIconStyled} + ${SidebarItemTextStyled} {\n            display          : flex;\n            position         : fixed;\n            left             : 40px;\n            align-self       : center;\n            border-radius    : 4px;\n            padding          : 4px 8px;\n            background-color : ${(props: SidebarWrapperProps) => props.theme.sidebar.isCollapsed.label.bg};\n            color            : ${(props: SidebarWrapperProps) => props.theme.sidebar.isCollapsed.label.text};\n            font-size        : 88%;\n            box-shadow       : 0 4px 16px -2px rgba(0, 0, 0, 0.24);\n        }\n\n        ${SidebarFooterStyled} { padding-left : 0; }\n    }\n\n    a {\n        width : unset;\n        color : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.default.text};\n    }\n    \n    summary ~ a p { color : ${(props: SidebarWrapperProps) => props.theme.sidebar.subLinks.default.text}; }\n\n    a.active {\n        position         : relative;\n        display          : block;\n        background-color : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.isSelected.bg};\n\n        &::before {\n            display                    : block;\n            position                   : absolute;\n            width                      : 4px;\n            height                     : 100%;\n            top                        : 0;\n            left                       : 0;\n            content                    : \"\";\n            border-top-right-radius    : 4px;\n            border-bottom-right-radius : 4px;\n            background-color           : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.isSelected.border};\n        }\n        \n        & .icon-stroked svg {\n            fill         : none;\n            stroke       : ${(props: SidebarItemIconProps) => props.theme.sidebar.icons.stroked.isActive.line};\n        }\n\n        & .icon-filled svg {\n            stroke : none;\n            fill   : ${(props: SidebarItemIconProps) => props.theme.sidebar.icons.filled.isActive.bg};\n        }\n\n        p { color : ${(props : SidebarWrapperProps) => props.theme.sidebar.links.isSelected.text}; }\n    }\n`;\n"],"names":["SidebarWrapperStyled","styled","aside","props","theme","sidebar","width","bg","links","default","scale","isCollapsed","SidebarHeaderStyled","SidebarItemTextStyled","SidebarItemStyled","SidebarItemIconStyled","label","text","SidebarFooterStyled","subLinks","isSelected","border","icons","stroked","isActive","line","filled"],"mappings":"wbAYaA,EAAuBC,EAAOC,8JAOjBC,GAA+BA,EAAMC,MAAMC,QAAQC,2FAInDH,GAA+BA,EAAMC,MAAMC,QAAQE,4EAGnDJ,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMC,QAAQC,8GAYnEP,GAA+BA,EAAMC,MAAMC,QAAQM,YAAYL,2BAG7EM,oFAUAC,qCAKAC,WAA2BC,OAA2BF,gHAO9BV,GAA+BA,EAAMC,MAAMC,QAAQM,YAAYK,MAAMT,YACrEJ,GAA+BA,EAAMC,MAAMC,QAAQM,YAAYK,MAAMC,sEAK7FC,0CAKSf,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMC,QAAQQ,6BAGrDd,GAA+BA,EAAMC,MAAMC,QAAQc,SAASV,QAAQQ,mEAKrEd,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMY,WAAWb,0KAYtDJ,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMY,WAAWC,gDAKlFlB,GAAgCA,EAAMC,MAAMC,QAAQiB,MAAMC,QAAQC,SAASC,6CAKjFtB,GAAgCA,EAAMC,MAAMC,QAAQiB,MAAMI,OAAOF,SAASjB,eAG3EJ,GAAgCA,EAAMC,MAAMC,QAAQG,MAAMY,WAAWH"}
+{"version":3,"file":"SidebarWrapper.styled.js","sources":["../../../../../src/components/Sidebar/SidebarWrapper/SidebarWrapper.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { SidebarWrapperProps } from \"./SidebarWrapper\";\nimport { SidebarItemIconProps } from \"../SidebarItemIcon/SidebarItemIcon\";\nimport { SidebarItemTextProps } from \"../SidebarItemText/SidebarItemText\";\n\nimport { SidebarHeaderStyled } from \"../SidebarHeader/SidebarHeader.styled\";\nimport { SidebarItemStyled } from \"../SidebarItem/SidebarItem.styled\";\nimport { SidebarItemTextStyled } from \"../SidebarItemText/SidebarItemText.styled\";\nimport { SidebarItemIconStyled } from \"../SidebarItemIcon/SidebarItemIcon.styled\";\nimport { SidebarFooterStyled } from \"../SidebarFooter/SidebarFooter.styled\";\n\n\nexport const SidebarWrapperStyled = styled.aside`\n    display          : flex;\n    flex-direction   : column;\n    position         : fixed;\n    top              : 0;\n    left             : 0;\n    bottom           : 0;\n    width            : ${(props: SidebarWrapperProps) => props.theme.sidebar.width};\n    min-height       : 100vh;\n    overflow-y       : auto;\n    transition       : all 0.4s ease-in-out;\n    background-color : ${(props: SidebarWrapperProps) => props.theme.sidebar.bg};\n    box-shadow       : 2px 0 8px -4px rgba(0, 0, 0, 0.16);\n    z-index          : 10000;\n    font-size        : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.default.scale}%;\n\n    /*  BASICS  ===========================================================  */\n    * { user-select : none; }\n    \n    @media (max-width : 900px) {\n        left    : calc(-1 * 100%);\n        z-index : 4000;\n    }\n\n    /*  COLLAPSED  ========================================================  */\n    &.collapsed {\n        width      : ${(props: SidebarWrapperProps) => props.theme.sidebar.isCollapsed.width};\n        overflow-x : hidden;\n\n        ${SidebarHeaderStyled} {\n            .header-logo { display : none; }\n\n            .header-icon {\n                display : block;\n                width   : 32px;\n                height  : 32px;\n            }\n        }\n\n        ${SidebarItemTextStyled} {\n            display  : none;\n            position : absolute;\n        }\n\n        ${SidebarItemStyled}:hover ${SidebarItemIconStyled} + ${SidebarItemTextStyled} {\n            display          : flex;\n            position         : fixed;\n            left             : 40px;\n            align-self       : center;\n            border-radius    : 4px;\n            padding          : 4px 8px;\n            background-color : ${(props: SidebarWrapperProps) => props.theme.sidebar.isCollapsed.label.bg};\n            color            : ${(props: SidebarWrapperProps) => props.theme.sidebar.isCollapsed.label.text};\n            font-size        : 88%;\n            box-shadow       : 0 4px 16px -2px rgba(0, 0, 0, 0.24);\n        }\n\n        ${SidebarFooterStyled} { padding-left : 0; }\n    }\n\n    a {\n        width : unset;\n        color : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.default.text};\n    }\n    \n    summary ~ a p { color : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.default.text}; }\n\n    a p:hover { color : ${(props : SidebarWrapperProps) => props.theme.sidebar.links.onHover.text}; }\n\n    a.active {\n        position         : relative;\n        display          : block;\n        background-color : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.isSelected.bg};\n\n        &::before {\n            display                    : block;\n            position                   : absolute;\n            width                      : 4px;\n            height                     : 100%;\n            top                        : 0;\n            left                       : 0;\n            content                    : \"\";\n            border-top-right-radius    : 4px;\n            border-bottom-right-radius : 4px;\n            background-color           : ${(props: SidebarWrapperProps) => props.theme.sidebar.links.isSelected.border};\n        }\n        \n        & .icon-stroked svg {\n            fill         : none;\n            stroke       : ${(props: SidebarItemIconProps) => props.theme.sidebar.icons.stroked.isActive.line};\n        }\n\n        & .icon-filled svg {\n            stroke : none;\n            fill   : ${(props: SidebarItemIconProps) => props.theme.sidebar.icons.filled.isActive.bg};\n        }\n\n        p { color : ${(props : SidebarWrapperProps) => props.theme.sidebar.links.isSelected.text}; }\n    }\n`;\n"],"names":["SidebarWrapperStyled","styled","aside","props","theme","sidebar","width","bg","links","default","scale","isCollapsed","SidebarHeaderStyled","SidebarItemTextStyled","SidebarItemStyled","SidebarItemIconStyled","label","text","SidebarFooterStyled","onHover","isSelected","border","icons","stroked","isActive","line","filled"],"mappings":"wbAaaA,EAAuBC,EAAOC,8JAOjBC,GAA+BA,EAAMC,MAAMC,QAAQC,2FAInDH,GAA+BA,EAAMC,MAAMC,QAAQE,4EAGnDJ,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMC,QAAQC,8GAYnEP,GAA+BA,EAAMC,MAAMC,QAAQM,YAAYL,2BAG7EM,oFAUAC,qCAKAC,WAA2BC,OAA2BF,gHAO9BV,GAA+BA,EAAMC,MAAMC,QAAQM,YAAYK,MAAMT,YACrEJ,GAA+BA,EAAMC,MAAMC,QAAQM,YAAYK,MAAMC,sEAK7FC,0CAKSf,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMC,QAAQQ,6BAGrDd,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMC,QAAQQ,yBAErEd,GAAgCA,EAAMC,MAAMC,QAAQG,MAAMW,QAAQF,mEAK/Dd,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMY,WAAWb,0KAYtDJ,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMY,WAAWC,gDAKlFlB,GAAgCA,EAAMC,MAAMC,QAAQiB,MAAMC,QAAQC,SAASC,6CAKjFtB,GAAgCA,EAAMC,MAAMC,QAAQiB,MAAMI,OAAOF,SAASjB,eAG3EJ,GAAgCA,EAAMC,MAAMC,QAAQG,MAAMY,WAAWH"}

package/dist/es/external/Element.js

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

package/dist/es/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: any[]): 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        hideOnTabPT,\n        showOnlyOnTabPT,\n        hideOnTabLS,\n        showOnlyOnTabLS,\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        ...minimalProps\n    } = props;\n\n    const { as, className : _, classNames : __, ...sanitizedProps } = props;\n\n    return (\n        <Component\n            ref={ref}\n            {...(typeof Component === \"object\" && Component.hasOwnProperty(\"styledComponentId\") ? sanitizedProps : 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                    hideOnTabPT && \"hide-on-tablet-portrait\",\n                    showOnlyOnTabPT && \"show-only-on-tablet-portrait\",\n                    hideOnTabLS && \"hide-on-tablet-landscape\",\n                    showOnlyOnTabLS && \"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                ].concat(classNames)\n            )}\n            // data-testid={`${Component.displayName}Test`}\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","hideOnTabPT","showOnlyOnTabPT","hideOnTabLS","showOnlyOnTabLS","hideOnDesktop","showOnlyOnDesktop","marginTop","marginRight","marginBottom","marginLeft","margin","paddingTop","paddingRight","paddingBottom","paddingLeft","padding","shadow","shape","opacity","minimalProps","sanitizedProps","hasOwnProperty","String","concat"],"mappings":"gWAAO,MAAMA,EAAmBC,GACrBA,EAAWC,QAAQC,KAAWA,IAAMC,KAAK,KCKvCC,eAAUC,EAAMC,YAAW,CAAeC,EAAwBC,WAEvEC,GAAKC,EADHV,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,YAmBFA,EAnBEC,gBAoBFA,EApBEC,YAqBFA,EArBEC,gBAsBFA,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,GAEAtC,EADGuC,IACHvC,EAvCE,0eAyCyCwC,IAAmBxC,EAA5D;OAGFF,gBAACK,iBACGF,IAAKA,GACqB,iBAAdE,GAA0BA,EAAUsC,eAAe,qBAAuBD,EAAiBD,GACvGnC,UAAWZ,EACP,CACIY,EACAC,WAAgBA,IAChBC,GAAe,aACfC,GAAgB,cAChBC,SAAiBkC,OAAOlC,KACxBC,SAAkBiC,OAAOjC,KACzBC,WAAqBgC,OAAOhC,KAC5BC,WAAsB+B,OAAO/B,KAC7BC,aAAyB8B,OAAO9B,KAChCC,aAA0B6B,OAAO7B,KACjCC,WAAqB4B,OAAO5B,KAC5BC,WAAsB2B,OAAO3B,KAC7BC,aAAyB0B,OAAO1B,KAChCC,aAA0ByB,OAAOzB,KACjCC,GAAgB,iBAChBC,GAAoB,sBACpBC,GAAe,0BACfC,GAAmB,+BACnBC,GAAe,2BACfC,GAAmB,gCACnBC,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,KACxBK,OAAOlD"}
+{"version":3,"file":"Element.js","sources":["../../../src/utils/classNames.ts","../../../src/components/Element/Element.tsx"],"sourcesContent":["export const createClassName = (classNames: any[]): 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        ...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\") ? sanitizedProps : 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                ].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","minimalProps","sanitizedProps","hasOwnProperty","String","concat"],"mappings":"gWAAO,MAAMA,EAAmBC,GACrBA,EAAWC,QAAQC,KAAWA,IAAMC,KAAK,KCKvCC,eAAUC,EAAMC,YAAW,CAAeC,EAAwBC,WAEvEC,GAAKC,EADHV,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,GAEAtC,EADGuC,IACHvC,EAvCE,ghBAyCyCwC,IAAmBxC,EAA5D;OAGFF,gBAACK,iBACGF,IAAKA,GACqB,iBAAdE,GAA0BA,EAAUsC,eAAe,qBAAuBD,EAAiBD,GACvGnC,UAAWZ,EACP,CACIY,EACAC,WAAgBA,IAChBC,GAAe,aACfC,GAAgB,cAChBC,SAAiBkC,OAAOlC,KACxBC,SAAkBiC,OAAOjC,KACzBC,WAAqBgC,OAAOhC,KAC5BC,WAAsB+B,OAAO/B,KAC7BC,aAAyB8B,OAAO9B,KAChCC,aAA0B6B,OAAO7B,KACjCC,WAAqB4B,OAAO5B,KAC5BC,WAAsB2B,OAAO3B,KAC7BC,aAAyB0B,OAAO1B,KAChCC,aAA0ByB,OAAOzB,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,KACxBK,OAAOlD"}

package/package.json

@@ -1,103 +1,103 @@
 {
-    "name" : "fictoan-react",
-    "version" : "0.36.0",
-    "private" : false,
-    "main" : "dist/cjs/index.js",
-    "module" : "dist/es/index.js",
-    "jsnext:main" : "dist/es/index.js",
-    "sideEffects" : [
+    "name": "fictoan-react",
+    "version": "0.36.3",
+    "private": false,
+    "main": "dist/cjs/index.js",
+    "module": "dist/es/index.js",
+    "jsnext:main": "dist/es/index.js",
+    "sideEffects": [
         "**/*.css"
     ],
-    "engines" : {
-        "node" : ">=8",
-        "npm" : ">=5"
+    "engines": {
+        "node": ">=8",
+        "npm": ">=5"
     },
-    "repository" : {
-        "type" : "git",
-        "url" : "https://github.com/fictoan/fictoan-react"
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/fictoan/fictoan-react"
     },
-    "license" : "MIT",
-    "scripts" : {
-        "start" : "rollup -c -w",
-        "prebuild" : "rm -rf dist",
-        "build" : "rollup -c",
-        "predeploy" : "$npm_execpath run build",
-        "deploy" : "$npm_execpath publish",
-        "format" : "prettier --write $PWD/'src/**/*.[jt]s?(x)'",
-        "storybook" : "start-storybook -p 6006",
-        "build-storybook" : "build-storybook"
+    "license": "MIT",
+    "scripts": {
+        "start": "rollup -c -w",
+        "prebuild": "rm -rf dist",
+        "build": "rollup -c",
+        "predeploy": "$npm_execpath run build",
+        "deploy": "$npm_execpath publish",
+        "format": "prettier --write $PWD/'src/**/*.[jt]s?(x)'",
+        "storybook": "start-storybook -p 6006",
+        "build-storybook": "build-storybook"
     },
-    "eslintConfig" : {
-        "extends" : "react-app"
+    "eslintConfig": {
+        "extends": "react-app"
     },
-    "browserslist" : [
+    "browserslist": [
         ">0.2%",
         "not dead",
         "not ie <= 11",
         "not op_mini all"
     ],
-    "husky" : {
-        "hooks" : {
-            "pre-commit" : "lint-staged"
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
         }
     },
-    "lint-staged" : {
-        "src/**/*.[jt]s?(x)" : "prettier --write"
+    "lint-staged": {
+        "src/**/*.[jt]s?(x)": "prettier --write"
     },
-    "devDependencies" : {
-        "@babel/core" : "^7.15.0",
-        "@babel/preset-react" : "^7.14.5",
-        "@rollup/plugin-babel" : "^5.3.0",
-        "@rollup/plugin-commonjs" : "^20.0.0",
-        "@rollup/plugin-json" : "^4.1.0",
-        "@rollup/plugin-node-resolve" : "^13.0.0",
-        "@rollup/plugin-url" : "^6.0.0",
-        "@storybook/addon-actions" : "^6.3.7",
-        "@storybook/addon-essentials" : "^6.3.7",
-        "@storybook/addon-links" : "^6.3.7",
-        "@storybook/react" : "^6.3.7",
-        "@svgr/rollup" : "^5.5.0",
-        "@testing-library/jest-dom" : "^5.14.1",
-        "@testing-library/react" : "^12.1.0",
-        "@types/lodash-es" : "^4.17.5",
-        "@types/react" : "^17.0.22",
-        "@types/react-syntax-highlighter" : "^13.5.1",
-        "@types/styled-components" : "^5.1.11",
-        "autoprefixer" : "^10.3.1",
-        "babel-loader" : "^8.2.2",
-        "husky" : "^7.0.1",
-        "jest" : "^27.2.1",
-        "jest-dom" : "^4.0.0",
-        "lint-staged" : "^11.1.1",
-        "prettier" : "^2.4.1",
-        "react" : "^17.0.2",
-        "react-dom" : "^17.0.2",
-        "rollup" : "^2.52.7",
-        "rollup-plugin-progress" : "^1.1.2",
-        "rollup-plugin-styles" : "^3.14.1",
-        "rollup-plugin-terser" : "^7.0.2",
-        "rollup-plugin-typescript2" : "^0.30.0",
-        "rollup-plugin-visualizer" : "5.5.2",
-        "styled-components" : "^5.3.0",
-        "ts-jest" : "^27.0.5",
-        "ts-node" : "^10.2.1",
-        "tslib" : "^2.3.0",
-        "typescript" : "^4.4.3",
-        "typescript-plugin-styled-components" : "^2.0.0"
+    "devDependencies": {
+        "@babel/core": "^7.15.0",
+        "@babel/preset-react": "^7.14.5",
+        "@rollup/plugin-babel": "^5.3.0",
+        "@rollup/plugin-commonjs": "^20.0.0",
+        "@rollup/plugin-json": "^4.1.0",
+        "@rollup/plugin-node-resolve": "^13.0.0",
+        "@rollup/plugin-url": "^6.0.0",
+        "@storybook/addon-actions": "^6.3.7",
+        "@storybook/addon-essentials": "^6.3.7",
+        "@storybook/addon-links": "^6.3.7",
+        "@storybook/react": "^6.3.7",
+        "@svgr/rollup": "^5.5.0",
+        "@testing-library/jest-dom": "^5.14.1",
+        "@testing-library/react": "^12.1.0",
+        "@types/lodash-es": "^4.17.5",
+        "@types/react": "^17.0.22",
+        "@types/react-syntax-highlighter": "^13.5.1",
+        "@types/styled-components": "^5.1.11",
+        "autoprefixer": "^10.3.1",
+        "babel-loader": "^8.2.2",
+        "husky": "^7.0.1",
+        "jest": "^27.2.1",
+        "jest-dom": "^4.0.0",
+        "lint-staged": "^11.1.1",
+        "prettier": "^2.4.1",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "rollup": "^2.52.7",
+        "rollup-plugin-progress": "^1.1.2",
+        "rollup-plugin-styles": "^3.14.1",
+        "rollup-plugin-terser": "^7.0.2",
+        "rollup-plugin-typescript2": "^0.30.0",
+        "rollup-plugin-visualizer": "5.5.2",
+        "styled-components": "^5.3.0",
+        "ts-jest": "^27.0.5",
+        "ts-node": "^10.2.1",
+        "tslib": "^2.3.0",
+        "typescript": "^4.4.3",
+        "typescript-plugin-styled-components": "^2.0.0"
     },
-    "files" : [
+    "files": [
         "dist"
     ],
-    "dependencies" : {
-        "lodash-es" : "^4.17.21",
-        "polished" : "^4.1.3",
-        "prism-react-renderer" : "^1.2.1"
+    "dependencies": {
+        "lodash-es": "^4.17.21",
+        "polished": "^4.1.3",
+        "prism-react-renderer": "^1.2.1"
     },
-    "peerDependencies" : {
-        "react" : "16.x || 17.x",
-        "styled-components" : "^5.1.1"
+    "peerDependencies": {
+        "react": "16.x || 17.x",
+        "styled-components": "^5.1.1"
     },
-    "optionalDependencies" : {
-        "@emotion/is-prop-valid" : "^1.1.0"
+    "optionalDependencies": {
+        "@emotion/is-prop-valid": "^1.1.0"
     }
 }