fictoan-react 0.33.15 → 0.35.2

package/CHANGELOG.md

@@ -1,3 +1,86 @@
+### 0.35.1
+- Fix theme throwing error on colour overrides
+- Add custom colours to ColorPropsType and export it from library
+- Fix InputField element type
+
+### 0.35.0
+**General**
+- Add Storybook for easy testing and documentation
+  - Each component folder now contains a `<component_name>.stories.tsx` (to create stories) and `<component_name>.stories.mdx` (to write docs) file
+- Add make commands for easy creation of components
+- Remove `name` props from RadioGroup `options` type; Add `label` and `id`
+- Remove `as` from RadioButton and CheckBox props
+- Make `shadow` a global prop
+- Make `shape` a global prop
+- Add ExpandableContent component which implements details and summary tags
+- Add Tag component
+- Add `opacity` as a global prop
+- HRule now supports custom background colors
+  - Add `hr.default` to theme
+- All colour props are now typed
+  - Add command (`make color-props`) to generate colour props from default colors
+
+**Form improvements**
+- Remove `isAnswers` prop from FormItem
+- Remove FormItemJointGroup component
+  - Add `isJoint` prop to FormItemGroup
+- Remove Extra spacing after FormItemGroup
+- Add `fields` and `onFieldsChange` prop to FormWrapper to allow form creation using an array of config 🎉 
+- RadioGroup and Select now use BaseInputComponent
+- Add better and consistent help & error text for each form field
+  - Make InputLabel atomic
+- Add error text for FormWrapper which uses Callout component
+- Add sizes to Switch component
+- Make Select chevron consistent with ExpandableContent
+- Make required and disabled states consistent in form fields
+
+**Sidebar improvements**
+- Remove `name` props from RadioGroup `options` type; Add `label` and `id`
+- Remove `isSticky` from Sidebar footer
+- `sidebar.body.bg` is now `sidebar.bg` in theme
+- Add sidebar width properties to theme; SidebarHeader, SidebarFooter and SidebarItem span 100% automatically
+- Remove `isSticky` from SidebarFooter, it always sticks to bottom
+- Remove SidebarLink, SidebarNestedLinks and SidebarLinksWrapper
+- Make SidebarHeader and SidebarFooter sticky instead of fixed to get simpler and consistent sidebar layout
+- Remove `sidebar.linksWrapper.marginTop` and `sidebar.linksWrapper.marginBottom` from theme
+- Remove SidebarItemsGroup and SidebarItemsGroupHeader
+
+**New components**
+- Tooltip (very basic, might overflow screens)
+- Callout
+- ExpandableContent
+- Tag
+
+**Removed components**
+- FormItemJointGroup
+- SidebarLink
+- SidebarNestedLinks
+- SidebarLinksWrapper
+- SidebarItemsGroup
+- SidebarItemsGroupHeader
+
+## BREAKING CHANGES ⚠️ 
+- Inside theme:
+  - `inputField.default.helpText` is now `inputField.onFocus.helpText`
+  - `inputField.isInvalid.helpText` is now `inputField.isInvalid.errorText`
+  - `sidebar.body.bg` is now `sidebar.bg`
+  - `sidebar.linksWrapper.marginTop` and `sidebar.linksWrapper.marginBottom` have been removed
+- Remove `isSticky` from SidebarFooter 
+  - It always sticks to bottom
+- Remove FormItemJointGroup
+  - Use `isJoint` prop inside FormItemGroup instead
+- Remove SidebarLink, SidebarNestedLinks and SidebarLinksWrapper
+- Remove SidebarItemsGroup and SidebarItemsGroupHeader 
+  - Use ExpandableContent component instead
+- Default Switch size now `medium` which is larger than before 
+  - Set to size `small` for old size
+
+
+### 0.34.0
+- Replace `react-syntax-highlighter` with `prism-react-renderer`
+- Add simple wrappers for `prism-components` to import specific languages from `prismjs`
+- Fix CodeBlock erratic output issue
+
 ### 0.33.15
 - Fix `spinner` padding
 

package/README.md

@@ -39,6 +39,14 @@ const MyComponent = props => {
 }
 ```
 
+## Storybook
+Start development server for storybook
+```sh
+yarn storybook
+```
+
+Storybook recipe used for this project: https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-mdx-docs
+
 ## License
 Licensed under the [MIT License](LICENSE).
 

package/dist/cjs/components/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.stories.d.ts

@@ -0,0 +1,3 @@
+import { FictoanStory } from "../../../utils/storyUtils";
+import { BreadcrumbItem } from "./BreadcrumbItem";
+export declare const Default: FictoanStory<typeof BreadcrumbItem>;

package/dist/cjs/components/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.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.li.withConfig({displayName:"BreadcrumbItemStyled",componentId:"sc-24ul97"})`display:inline-flex;position:relative;font-size:14px;&::after{position:absolute;right:-14px;content:${e=>e.theme.breadcrumbs.separator.content};color:${e=>e.theme.breadcrumbs.separator.text};}&:last-child,&:last-child a{color:${e=>e.theme.breadcrumbs.item.active};}&:not(:last-child),&:not(:last-child)a{color:${e=>e.theme.breadcrumbs.item.inactive};}&:last-child::after{content:"";}`;exports.BreadcrumbItemStyled=t;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=/*#__PURE__*/e(require("styled-components")).default.li.withConfig({displayName:"BreadcrumbItemStyled",componentId:"-1v9ln8k"})`display:inline-flex;position:relative;font-size:14px;&::after{position:absolute;right:-14px;content:${e=>e.theme.breadcrumbs.separator.content};color:${e=>e.theme.breadcrumbs.separator.text};}&:last-child,&:last-child a{color:${e=>e.theme.breadcrumbs.item.active};}&:not(:last-child),&:not(:last-child)a{color:${e=>e.theme.breadcrumbs.item.inactive};}&:last-child::after{content:"";}`;exports.BreadcrumbItemStyled=t;
 //# sourceMappingURL=BreadcrumbItem.styled.js.map

package/dist/cjs/components/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.styled.js","sources":["../../../../../src/components/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { BreadcrumbItemProps } from \"./BreadcrumbItem\";\n\n\nexport const BreadcrumbItemStyled = styled.li`\n    display   : inline-flex;\n    position  : relative;\n    font-size : 14px;\n\n    &::after {\n        position : absolute;\n        right    : -14px;\n        content  : ${(props : BreadcrumbItemProps) => props.theme.breadcrumbs.separator.content};\n        color    : ${(props : BreadcrumbItemProps) => props.theme.breadcrumbs.separator.text};\n    }\n\n    &:last-child,\n    &:last-child a {\n        color : ${(props : BreadcrumbItemProps) => props.theme.breadcrumbs.item.active};\n    }\n\n    &:not(:last-child),\n    &:not(:last-child) a {\n        color : ${(props : BreadcrumbItemProps) => props.theme.breadcrumbs.item.inactive};\n    }\n\n    &:last-child::after {\n        content : \"\";\n    }\n`;\n"],"names":["BreadcrumbItemStyled","li","props","theme","breadcrumbs","separator","content","text","item","active","inactive"],"mappings":"kJAKaA,uDAA8BC,kLAQrBC,GAAgCA,EAAMC,MAAMC,YAAYC,UAAUC,iBAClEJ,GAAgCA,EAAMC,MAAMC,YAAYC,UAAUE,2CAKrEL,GAAgCA,EAAMC,MAAMC,YAAYI,KAAKC,wDAK7DP,GAAgCA,EAAMC,MAAMC,YAAYI,KAAKE"}
+{"version":3,"file":"BreadcrumbItem.styled.js","sources":["../../../../../src/components/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { BreadcrumbItemProps } from \"./BreadcrumbItem\";\n\n\nexport const BreadcrumbItemStyled = styled.li`\n    display   : inline-flex;\n    position  : relative;\n    font-size : 14px;\n\n    &::after {\n        position : absolute;\n        right    : -14px;\n        content  : ${(props : BreadcrumbItemProps) => props.theme.breadcrumbs.separator.content};\n        color    : ${(props : BreadcrumbItemProps) => props.theme.breadcrumbs.separator.text};\n    }\n\n    &:last-child,\n    &:last-child a {\n        color : ${(props : BreadcrumbItemProps) => props.theme.breadcrumbs.item.active};\n    }\n\n    &:not(:last-child),\n    &:not(:last-child) a {\n        color : ${(props : BreadcrumbItemProps) => props.theme.breadcrumbs.item.inactive};\n    }\n\n    &:last-child::after {\n        content : \"\";\n    }\n`;\n"],"names":["BreadcrumbItemStyled","li","props","theme","breadcrumbs","separator","content","text","item","active","inactive"],"mappings":"kJAKaA,uDAA8BC,iLAQrBC,GAAgCA,EAAMC,MAAMC,YAAYC,UAAUC,iBAClEJ,GAAgCA,EAAMC,MAAMC,YAAYC,UAAUE,2CAKrEL,GAAgCA,EAAMC,MAAMC,YAAYI,KAAKC,wDAK7DP,GAAgCA,EAAMC,MAAMC,YAAYI,KAAKE"}

package/dist/cjs/components/Breadcrumbs/BreadcrumbsWrapper/BreadcrumbsWrapper.stories.d.ts

@@ -0,0 +1,3 @@
+import { FictoanStory } from "../../../utils/storyUtils";
+import { BreadcrumbsWrapper } from "./BreadcrumbsWrapper";
+export declare const Default: FictoanStory<typeof BreadcrumbsWrapper>;

package/dist/cjs/components/Breadcrumbs/BreadcrumbsWrapper/BreadcrumbsWrapper.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 r=/*#__PURE__*/e(require("styled-components")).default.nav.withConfig({displayName:"BreadcrumbsWrapperStyled",componentId:"sc-arfw0y"})`display:flex;flex-wrap:wrap;align-items:flex-start;box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.08);&:not([class*="bg-"]){background-color:${e=>e.theme.breadcrumbs.wrapper.bg};}`;exports.BreadcrumbsWrapperStyled=r;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const r=/*#__PURE__*/e(require("styled-components")).default.nav.withConfig({displayName:"BreadcrumbsWrapperStyled",componentId:"-1qp7oay"})`display:flex;flex-wrap:wrap;align-items:flex-start;box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.08);&:not([class*="bg-"]){background-color:${e=>e.theme.breadcrumbs.wrapper.bg};}`;exports.BreadcrumbsWrapperStyled=r;
 //# sourceMappingURL=BreadcrumbsWrapper.styled.js.map

package/dist/cjs/components/Breadcrumbs/BreadcrumbsWrapper/BreadcrumbsWrapper.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsWrapper.styled.js","sources":["../../../../../src/components/Breadcrumbs/BreadcrumbsWrapper/BreadcrumbsWrapper.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { BreadcrumbsWrapperProps } from \"./BreadcrumbsWrapper\";\n\n\nexport const BreadcrumbsWrapperStyled = styled.nav`\n    display     : flex;\n    flex-wrap   : wrap;\n    align-items : flex-start;\n    box-shadow  : 0 1px 1px -1px rgba(0, 0, 0, 0.08);\n    \n    &:not([class*=\"bg-\"]) {\n        background-color : ${(props : BreadcrumbsWrapperProps) => props.theme.breadcrumbs.wrapper.bg};\n    }\n`;\n"],"names":["BreadcrumbsWrapperStyled","nav","props","theme","breadcrumbs","wrapper","bg"],"mappings":"kJAKaA,uDAAkCC,2NAOjBC,GAAoCA,EAAMC,MAAMC,YAAYC,QAAQC"}
+{"version":3,"file":"BreadcrumbsWrapper.styled.js","sources":["../../../../../src/components/Breadcrumbs/BreadcrumbsWrapper/BreadcrumbsWrapper.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { BreadcrumbsWrapperProps } from \"./BreadcrumbsWrapper\";\n\n\nexport const BreadcrumbsWrapperStyled = styled.nav`\n    display     : flex;\n    flex-wrap   : wrap;\n    align-items : flex-start;\n    box-shadow  : 0 1px 1px -1px rgba(0, 0, 0, 0.08);\n    \n    &:not([class*=\"bg-\"]) {\n        background-color : ${(props : BreadcrumbsWrapperProps) => props.theme.breadcrumbs.wrapper.bg};\n    }\n`;\n"],"names":["BreadcrumbsWrapperStyled","nav","props","theme","breadcrumbs","wrapper","bg"],"mappings":"kJAKaA,uDAAkCC,0NAOjBC,GAAoCA,EAAMC,MAAMC,YAAYC,QAAQC"}

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

@@ -4,10 +4,9 @@ export interface ButtonCustomProps {
     kind?: "primary" | "secondary" | "tertiary" | "custom";
     size?: "tiny" | "small" | "medium" | "large" | "huge";
     shape?: "rounded" | "curved" | "circular";
-    shadow?: "mild" | "soft" | "hard";
     isLoading?: boolean;
     hasDelete?: boolean;
 }
 export declare type ButtonElementType = HTMLButtonElement;
-export declare type ButtonProps = CommonAndHTMLProps<ButtonElementType> & ButtonCustomProps;
-export declare const Button: React.ForwardRefExoticComponent<CommonAndHTMLProps<HTMLButtonElement> & ButtonCustomProps & React.RefAttributes<HTMLButtonElement>>;
+export declare type ButtonProps = Omit<CommonAndHTMLProps<ButtonElementType>, keyof ButtonCustomProps> & ButtonCustomProps;
+export declare const Button: React.ForwardRefExoticComponent<Omit<CommonAndHTMLProps<HTMLButtonElement>, keyof ButtonCustomProps> & ButtonCustomProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/components/Button/Button.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../external/Element.js"),s=require("react"),t=require("./Button.styled.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../external/helpers.js"),require("../../external/DefaultColours.js"),require("styled-components");var a=/*#__PURE__*/r(s);const u=a.default.forwardRef(((s,r)=>{var{size:u,shape:l,shadow:n,kind:i,isLoading:o,hasDelete:d}=s,h=e.__rest(s,["size","shape","shadow","kind","isLoading","hasDelete"]);let p=[];return i&&p.push(i),u&&p.push(`size-${u}`),l&&p.push(`shape-${l}`),n&&p.push(`shadow-${n}`),o&&p.push("is-loading"),d&&p.push("has-delete"),a.default.createElement(e.Element,Object.assign({as:t.ButtonStyled,ref:r,classNames:p},h))}));exports.Button=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../external/Element.js"),t=require("react"),s=require("./Button.styled.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../external/helpers.js"),require("../../external/DefaultColours.js"),require("styled-components");var a=/*#__PURE__*/r(t);const u=a.default.forwardRef(((t,r)=>{var{size:u,shape:l,kind:n,isLoading:i,hasDelete:o}=t,d=e.__rest(t,["size","shape","kind","isLoading","hasDelete"]);let p=[];return n&&p.push(n),u&&p.push(`size-${u}`),l&&p.push(`shape-${l}`),i&&p.push("is-loading"),o&&p.push("has-delete"),a.default.createElement(e.Element,Object.assign({as:s.ButtonStyled,ref:r,classNames:p},d))}));exports.Button=u;
 //# sourceMappingURL=Button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\n\nimport { ButtonStyled } from \"./Button.styled\";\n\n// prettier-ignore\nexport interface ButtonCustomProps {\n    kind          ? : \"primary\" | \"secondary\" | \"tertiary\" | \"custom\";\n    size          ? : \"tiny\" | \"small\" | \"medium\" | \"large\" | \"huge\";\n    shape         ? : \"rounded\" | \"curved\" | \"circular\";\n    shadow        ? : \"mild\" | \"soft\" | \"hard\";\n    isLoading     ? : boolean;\n    hasDelete     ? : boolean;\n}\n\nexport type ButtonElementType = HTMLButtonElement;\nexport type ButtonProps = CommonAndHTMLProps<ButtonElementType> & ButtonCustomProps;\n\nexport const Button = React.forwardRef(\n    ({ size, shape, shadow, kind, isLoading, hasDelete, ...props }: ButtonProps, ref: React.Ref<ButtonElementType>) => {\n        let classNames = [];\n\n        if (kind) {\n            classNames.push(kind);\n        }\n\n        if (size) {\n            classNames.push(`size-${size}`);\n        }\n\n        if (shape) {\n            classNames.push(`shape-${shape}`);\n        }\n\n        if (shadow) {\n            classNames.push(`shadow-${shadow}`);\n        }\n\n        if (isLoading) {\n            classNames.push(\"is-loading\");\n        }\n\n        if (hasDelete) {\n            classNames.push(\"has-delete\");\n        }\n\n        return <Element<ButtonElementType> as={ButtonStyled} ref={ref} classNames={classNames} {...props} />;\n    }\n);\n"],"names":["Button","React","forwardRef","_a","ref","size","shape","shadow","kind","isLoading","hasDelete","props","classNames","push","Element","as","ButtonStyled"],"mappings":"sXAoBaA,EAASC,UAAMC,YACxB,CAACC,EAA4EC,SAA5EC,KAAEA,EAAFC,MAAQA,EAARC,OAAeA,EAAfC,KAAuBA,EAAvBC,UAA6BA,EAA7BC,UAAwCA,KAAcC,aAAtD,8DACOC,EAAa,UAEbJ,GACAI,EAAWC,KAAKL,GAGhBH,GACAO,EAAWC,aAAaR,KAGxBC,GACAM,EAAWC,cAAcP,KAGzBC,GACAK,EAAWC,eAAeN,KAG1BE,GACAG,EAAWC,KAAK,cAGhBH,GACAE,EAAWC,KAAK,cAGbZ,wBAACa,yBAA2BC,GAAIC,eAAcZ,IAAKA,EAAKQ,WAAYA,GAAgBD"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\n\nimport { ButtonStyled } from \"./Button.styled\";\n\n// prettier-ignore\nexport interface ButtonCustomProps {\n    kind      ? : \"primary\" | \"secondary\" | \"tertiary\" | \"custom\";\n    size      ? : \"tiny\" | \"small\" | \"medium\" | \"large\" | \"huge\";\n    shape     ? : \"rounded\" | \"curved\" | \"circular\";\n    isLoading ? : boolean;\n    hasDelete ? : boolean;\n}\n\nexport type ButtonElementType = HTMLButtonElement;\nexport type ButtonProps = Omit<CommonAndHTMLProps<ButtonElementType>, keyof ButtonCustomProps> & ButtonCustomProps;\n\nexport const Button = React.forwardRef(\n    ({ size, shape, kind, isLoading, hasDelete, ...props }: ButtonProps, ref: React.Ref<ButtonElementType>) => {\n        let classNames = [];\n\n        if (kind) {\n            classNames.push(kind);\n        }\n\n        if (size) {\n            classNames.push(`size-${size}`);\n        }\n\n        if (shape) {\n            classNames.push(`shape-${shape}`);\n        }\n\n        if (isLoading) {\n            classNames.push(\"is-loading\");\n        }\n\n        if (hasDelete) {\n            classNames.push(\"has-delete\");\n        }\n\n        return <Element<ButtonElementType> as={ButtonStyled} ref={ref} classNames={classNames} {...props} />;\n    }\n);\n"],"names":["Button","React","forwardRef","_a","ref","size","shape","kind","isLoading","hasDelete","props","classNames","push","Element","as","ButtonStyled"],"mappings":"sXAmBaA,EAASC,UAAMC,YACxB,CAACC,EAAoEC,SAApEC,KAAEA,EAAFC,MAAQA,EAARC,KAAeA,EAAfC,UAAqBA,EAArBC,UAAgCA,KAAcC,aAA9C,qDACOC,EAAa,UAEbJ,GACAI,EAAWC,KAAKL,GAGhBF,GACAM,EAAWC,aAAaP,KAGxBC,GACAK,EAAWC,cAAcN,KAGzBE,GACAG,EAAWC,KAAK,cAGhBH,GACAE,EAAWC,KAAK,cAGbX,wBAACY,yBAA2BC,GAAIC,eAAcX,IAAKA,EAAKO,WAAYA,GAAgBD"}

package/dist/cjs/components/Button/Button.stories.d.ts

@@ -0,0 +1,6 @@
+import { FictoanStory } from "../../utils/storyUtils";
+import { Button } from "./Button";
+export declare const Primary: FictoanStory<typeof Button>;
+export declare const Secondary: FictoanStory<typeof Button>;
+export declare const Tertiary: FictoanStory<typeof Button>;
+export declare const Custom: FictoanStory<typeof Button>;

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../external/helpers.js"),t=require("styled-components");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../external/DefaultColours.js");const o=/*#__PURE__*/r(t).default.button.withConfig({displayName:"ButtonStyled",componentId:"sc-1g0qody"})`position:relative;cursor:pointer;font-family:${e=>e.theme.button.font};font-weight:bold;font-size:92%;text-align:center;text-decoration:none;line-height:1;transition:all 0.2s ease-in-out;background-position:center;user-select:none;&:not([class*="padding-"]){padding:12px 24px;}> *{all:unset;}&.is-loading::after{border:3px solid;border-top-color:transparent;border-right-color:transparent;}&.primary{background-color:${e=>e.theme.button.primary.default.bg};color:${e=>e.theme.button.primary.default.text};border:solid ${e=>e.theme.button.primary.default.border};border-width:${e=>e.theme.globals.borderWidth};border-radius:${e=>e.theme.button.primary.default.borderRadius};:hover{background-color:${e=>e.theme.button.primary.onHover.bg};color:${e=>e.theme.button.primary.onHover.text};border:solid ${e=>e.theme.button.primary.onHover.border};border-width:${e=>e.theme.globals.borderWidth};}:active{background-color:${e=>e.theme.button.primary.isActive.bg};color:${e=>e.theme.button.primary.isActive.text};border:solid ${e=>e.theme.button.primary.isActive.border};border-width:${e=>e.theme.globals.borderWidth};}&.is-loading::after{border:3px solid ${e=>e.theme.button.primary.isLoading.spinnerBorder};border-top-color:transparent;border-right-color:transparent;}}&.secondary{background-color:${e=>e.theme.button.secondary.default.bg};color:${e=>e.theme.button.secondary.default.text};border:solid ${e=>e.theme.button.secondary.default.border};border-radius:${e=>e.theme.button.secondary.default.borderRadius};border-width:${e=>e.theme.globals.borderWidth};:hover{background-color:${e=>e.theme.button.secondary.onHover.bg};color:${e=>e.theme.button.secondary.onHover.text};border:solid ${e=>e.theme.button.secondary.onHover.border};border-width:${e=>e.theme.globals.borderWidth};}:active{background-color:${e=>e.theme.button.secondary.isActive.bg};color:${e=>e.theme.button.secondary.isActive.text};border:solid ${e=>e.theme.button.secondary.isActive.border};border-width:${e=>e.theme.globals.borderWidth};}&.is-loading::after{border:3px solid ${e=>e.theme.button.secondary.isLoading.spinnerBorder};border-top-color:transparent;border-right-color:transparent;}}&.tertiary{background-color:${e=>e.theme.button.tertiary.default.bg};color:${e=>e.theme.button.tertiary.default.text};border:solid ${e=>e.theme.button.tertiary.default.border};border-radius:${e=>e.theme.button.tertiary.default.borderRadius};border-width:${e=>e.theme.globals.borderWidth};:hover{background-color:${e=>e.theme.button.tertiary.onHover.bg};color:${e=>e.theme.button.tertiary.onHover.text};border:solid ${e=>e.theme.button.tertiary.onHover.border};border-width:${e=>e.theme.globals.borderWidth};}:active{background-color:${e=>e.theme.button.tertiary.isActive.bg};color:${e=>e.theme.button.tertiary.isActive.text};border:solid ${e=>e.theme.button.tertiary.isActive.border};border-width:${e=>e.theme.globals.borderWidth};}&.is-loading::after{border:3px solid ${e=>e.theme.button.tertiary.isLoading.spinnerBorder};border-top-color:transparent;border-right-color:transparent;}}&:active{box-shadow:none;opacity:0.72;}&.shape-circular{width:64px;height:64px;padding:0 !important;border-radius:50%;}&.shape-circular.size-tiny{width:16px;height:16px;padding:0;font-size:8px;}&.shape-circular.size-small{width:32px;height:32px;padding:0;font-size:12px;}&.shape-circular.size-medium{font-size:16px;}&.shape-circular.size-large{width:80px;height:80px;padding:0;font-size:24px;}&.shape-circular.size-huge{width:128px;height:128px;padding:0;font-size:32px;}&.shape-circular img{position:absolute;margin:auto;left:0;top:0;bottom:0;right:0;}&[class*="border-"]{border-width:${e=>e.theme.globals.borderWidth};}&.border-none{border-width:0 !important;}&[disabled]{box-shadow:none;user-select:none;pointer-events:none;opacity:0.32;filter:grayscale(100%);}&.size-tiny{padding:4px 8px;font-size:${e=>e.theme.text.paras.size*Math.pow(e.theme.text.headings.multiplier,-2)}em;}&.size-small{padding:6px 12px;font-size:${e=>e.theme.text.paras.size*Math.pow(e.theme.text.headings.multiplier,-1)}em;}&.size-large{padding:16px 32px;font-size:${e=>e.theme.text.paras.size*Math.pow(e.theme.text.headings.multiplier,2)}em;}&.size-huge{padding:24px 40px;font-size:${e=>e.theme.text.paras.size*Math.pow(e.theme.text.headings.multiplier,4)}em;}&.is-loading{color:transparent !important;box-shadow:none;user-select:none;pointer-events:none;}&.is-loading::after{display:block;position:absolute;margin:auto;left:0;top:0;bottom:0;right:0;height:16px;width:16px;border-radius:50%;content:"";border:3px solid;border-color:${t=>{var r;return e.convertToFictoanColor(null!==(r=t.textColor)&&void 0!==r?r:t.textColour)}};border-top-color:transparent;border-right-color:transparent;-webkit-animation:spinner 0.4s infinite linear;animation:spinner 0.4s infinite linear;}&.size-tiny.is-loading::after,&.size-small.is-loading::after{height:8px;width:8px;}@-webkit-keyframes spinner{from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(359deg);}}@keyframes spinner{from{transform:rotate(0deg);}to{transform:rotate(359deg);}}&.has-delete{display:inline-flex;}&.has-delete::after{display:inline-flex;position:absolute;cursor:pointer;right:8px;content:"\\00d7";font-size:17px;line-height:1;align-self:center;}&.has-delete,&.size-tiny.has-delete,&.size-small.has-delete{padding-right:32px !important;}&.size-large.has-delete{padding-right:40px !important;}&.size-huge.has-delete{padding-right:48px !important;}&.size-large.has-delete::after,&.size-huge.has-delete::after{font-size:25px;right:16px;}`;exports.ButtonStyled=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../external/helpers.js"),t=require("styled-components");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../external/DefaultColours.js");const o=/*#__PURE__*/r(t).default.button.withConfig({displayName:"ButtonStyled",componentId:"-1j6qre9"})`position:relative;cursor:pointer;font-family:${e=>e.theme.button.font};font-weight:bold;font-size:92%;text-align:center;text-decoration:none;line-height:1;transition:all 0.2s ease-in-out;background-position:center;user-select:none;&:not([class*="padding-"]){padding:12px 24px;}> *{all:unset;}&.is-loading::after{border:3px solid;border-top-color:transparent;border-right-color:transparent;}&.primary{background-color:${e=>e.theme.button.primary.default.bg};color:${e=>e.theme.button.primary.default.text};border:solid ${e=>e.theme.button.primary.default.border};border-width:${e=>e.theme.globals.borderWidth};border-radius:${e=>e.theme.button.primary.default.borderRadius};:hover{background-color:${e=>e.theme.button.primary.onHover.bg};color:${e=>e.theme.button.primary.onHover.text};border:solid ${e=>e.theme.button.primary.onHover.border};border-width:${e=>e.theme.globals.borderWidth};}:active{background-color:${e=>e.theme.button.primary.isActive.bg};color:${e=>e.theme.button.primary.isActive.text};border:solid ${e=>e.theme.button.primary.isActive.border};border-width:${e=>e.theme.globals.borderWidth};}&.is-loading::after{border:3px solid ${e=>e.theme.button.primary.isLoading.spinnerBorder};border-top-color:transparent;border-right-color:transparent;}}&.secondary{background-color:${e=>e.theme.button.secondary.default.bg};color:${e=>e.theme.button.secondary.default.text};border:solid ${e=>e.theme.button.secondary.default.border};border-radius:${e=>e.theme.button.secondary.default.borderRadius};border-width:${e=>e.theme.globals.borderWidth};:hover{background-color:${e=>e.theme.button.secondary.onHover.bg};color:${e=>e.theme.button.secondary.onHover.text};border:solid ${e=>e.theme.button.secondary.onHover.border};border-width:${e=>e.theme.globals.borderWidth};}:active{background-color:${e=>e.theme.button.secondary.isActive.bg};color:${e=>e.theme.button.secondary.isActive.text};border:solid ${e=>e.theme.button.secondary.isActive.border};border-width:${e=>e.theme.globals.borderWidth};}&.is-loading::after{border:3px solid ${e=>e.theme.button.secondary.isLoading.spinnerBorder};border-top-color:transparent;border-right-color:transparent;}}&.tertiary{background-color:${e=>e.theme.button.tertiary.default.bg};color:${e=>e.theme.button.tertiary.default.text};border:solid ${e=>e.theme.button.tertiary.default.border};border-radius:${e=>e.theme.button.tertiary.default.borderRadius};border-width:${e=>e.theme.globals.borderWidth};:hover{background-color:${e=>e.theme.button.tertiary.onHover.bg};color:${e=>e.theme.button.tertiary.onHover.text};border:solid ${e=>e.theme.button.tertiary.onHover.border};border-width:${e=>e.theme.globals.borderWidth};}:active{background-color:${e=>e.theme.button.tertiary.isActive.bg};color:${e=>e.theme.button.tertiary.isActive.text};border:solid ${e=>e.theme.button.tertiary.isActive.border};border-width:${e=>e.theme.globals.borderWidth};}&.is-loading::after{border:3px solid ${e=>e.theme.button.tertiary.isLoading.spinnerBorder};border-top-color:transparent;border-right-color:transparent;}}&:active{box-shadow:none;opacity:0.72;}&.shape-circular{width:64px;height:64px;padding:0 !important;border-radius:50%;}&.shape-circular.size-tiny{width:16px;height:16px;padding:0;font-size:8px;}&.shape-circular.size-small{width:32px;height:32px;padding:0;font-size:12px;}&.shape-circular.size-medium{font-size:16px;}&.shape-circular.size-large{width:80px;height:80px;padding:0;font-size:24px;}&.shape-circular.size-huge{width:128px;height:128px;padding:0;font-size:32px;}&.shape-circular img{position:absolute;margin:auto;left:0;top:0;bottom:0;right:0;}&[class*="border-"]{border-width:${e=>e.theme.globals.borderWidth};}&.border-none{border-width:0 !important;}&[disabled]{box-shadow:none;user-select:none;pointer-events:none;opacity:0.32;filter:grayscale(100%);}&.size-tiny{padding:4px 8px;font-size:${e=>e.theme.text.paras.size*Math.pow(e.theme.text.headings.multiplier,-2)}em;}&.size-small{padding:6px 12px;font-size:${e=>e.theme.text.paras.size*Math.pow(e.theme.text.headings.multiplier,-1)}em;}&.size-large{padding:16px 32px;font-size:${e=>e.theme.text.paras.size*Math.pow(e.theme.text.headings.multiplier,2)}em;}&.size-huge{padding:24px 40px;font-size:${e=>e.theme.text.paras.size*Math.pow(e.theme.text.headings.multiplier,4)}em;}&.is-loading{color:transparent !important;box-shadow:none;user-select:none;pointer-events:none;}&.is-loading::after{display:block;position:absolute;margin:auto;left:0;top:0;bottom:0;right:0;height:16px;width:16px;border-radius:50%;content:"";border:3px solid;border-color:${t=>{var r;return e.convertToFictoanColor(null!==(r=t.textColor)&&void 0!==r?r:t.textColour)}};border-top-color:transparent;border-right-color:transparent;-webkit-animation:spinner 0.4s infinite linear;animation:spinner 0.4s infinite linear;}&.size-tiny.is-loading::after,&.size-small.is-loading::after{height:8px;width:8px;}@-webkit-keyframes spinner{from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(359deg);}}@keyframes spinner{from{transform:rotate(0deg);}to{transform:rotate(359deg);}}&.has-delete{display:inline-flex;}&.has-delete::after{display:inline-flex;position:absolute;cursor:pointer;right:8px;content:"\\00d7";font-size:17px;line-height:1;align-self:center;}&.has-delete,&.size-tiny.has-delete,&.size-small.has-delete{padding-right:32px !important;}&.size-large.has-delete{padding-right:40px !important;}&.size-huge.has-delete{padding-right:48px !important;}&.size-large.has-delete::after,&.size-huge.has-delete::after{font-size:25px;right:16px;}`;exports.ButtonStyled=o;
 //# sourceMappingURL=Button.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.styled.js","sources":["../../../../src/components/Button/Button.styled.tsx"],"sourcesContent":["import { defaultColours } from \"src/styles/DefaultColours\";\nimport { convertToFictoanColor } from \"src/utils/helpers\";\nimport styled from \"styled-components\";\n\nimport { ButtonProps } from \"./Button\";\n\nexport const ButtonStyled = styled.button`\n    position            : relative;\n    cursor              : pointer;\n    font-family         : ${(props: ButtonProps) => props.theme.button.font};\n    font-weight         : bold;\n    font-size           : 92%;\n    text-align          : center;\n    text-decoration     : none;\n    line-height         : 1;\n    transition          : all 0.2s ease-in-out;\n    background-position : center;\n    user-select         : none;\n    \n    &:not([class*=\"padding-\"]) {\n        padding : 12px 24px;\n    }\n\n    // To make sure a button’s children\n    // don’t style themselves like a douchebag\n    > * {\n        all : unset;\n    }\n\n    &.is-loading::after {\n        border             : 3px solid ;\n        border-top-color   : transparent;\n        border-right-color : transparent;\n    }\n\n    &.primary {\n        background-color : ${(props: ButtonProps) => props.theme.button.primary.default.bg};\n        color            : ${(props: ButtonProps) => props.theme.button.primary.default.text};\n        border           : solid ${(props: ButtonProps) => props.theme.button.primary.default.border};\n        border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n        border-radius    : ${(props: ButtonProps) => props.theme.button.primary.default.borderRadius};\n\n        :hover {\n            background-color : ${(props: ButtonProps) => props.theme.button.primary.onHover.bg};\n            color            : ${(props: ButtonProps) => props.theme.button.primary.onHover.text};\n            border           : solid ${(props: ButtonProps) => props.theme.button.primary.onHover.border};\n            border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n        }\n\n        :active {\n            background-color : ${(props: ButtonProps) => props.theme.button.primary.isActive.bg};\n            color            : ${(props: ButtonProps) => props.theme.button.primary.isActive.text};\n            border           : solid ${(props: ButtonProps) => props.theme.button.primary.isActive.border};\n            border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n        }\n\n        &.is-loading::after {\n            border             : 3px solid ${(props: ButtonProps) => props.theme.button.primary.isLoading.spinnerBorder};\n            border-top-color   : transparent;\n            border-right-color : transparent;\n        }\n    }\n\n    &.secondary {\n        background-color : ${(props: ButtonProps) => props.theme.button.secondary.default.bg};\n        color            : ${(props: ButtonProps) => props.theme.button.secondary.default.text};\n        border           : solid ${(props: ButtonProps) => props.theme.button.secondary.default.border};\n        border-radius    : ${(props: ButtonProps) => props.theme.button.secondary.default.borderRadius};\n        border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n\n        :hover {\n            background-color : ${(props: ButtonProps) => props.theme.button.secondary.onHover.bg};\n            color            : ${(props: ButtonProps) => props.theme.button.secondary.onHover.text};\n            border           : solid ${(props: ButtonProps) => props.theme.button.secondary.onHover.border};\n            border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n        }\n\n        :active {\n            background-color : ${(props: ButtonProps) => props.theme.button.secondary.isActive.bg};\n            color            : ${(props: ButtonProps) => props.theme.button.secondary.isActive.text};\n            border           : solid ${(props: ButtonProps) => props.theme.button.secondary.isActive.border};\n            border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n        }\n\n        &.is-loading::after {\n            border             : 3px solid ${(props: ButtonProps) => props.theme.button.secondary.isLoading.spinnerBorder};\n            border-top-color   : transparent;\n            border-right-color : transparent;\n        }\n    }\n\n    &.tertiary {\n        background-color : ${(props: ButtonProps) => props.theme.button.tertiary.default.bg};\n        color            : ${(props: ButtonProps) => props.theme.button.tertiary.default.text};\n        border           : solid ${(props: ButtonProps) => props.theme.button.tertiary.default.border};\n        border-radius    : ${(props: ButtonProps) => props.theme.button.tertiary.default.borderRadius};\n        border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n\n        :hover {\n            background-color : ${(props: ButtonProps) => props.theme.button.tertiary.onHover.bg};\n            color            : ${(props: ButtonProps) => props.theme.button.tertiary.onHover.text};\n            border           : solid ${(props: ButtonProps) => props.theme.button.tertiary.onHover.border};\n            border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n        }\n\n        :active {\n            background-color : ${(props: ButtonProps) => props.theme.button.tertiary.isActive.bg};\n            color            : ${(props: ButtonProps) => props.theme.button.tertiary.isActive.text};\n            border           : solid ${(props: ButtonProps) => props.theme.button.tertiary.isActive.border};\n            border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n        }\n\n        &.is-loading::after {\n            border             : 3px solid ${(props: ButtonProps) => props.theme.button.tertiary.isLoading.spinnerBorder};\n            border-top-color   : transparent;\n            border-right-color : transparent;\n        }\n    }\n\n    &:active {\n        box-shadow : none;\n        opacity    : 0.72;\n    }\n\n    //  ROUND BUTTON  /////////////////////////////////////////////////////////\n    &.shape-circular {\n        width         : 64px;\n        height        : 64px;\n        padding       : 0 !important;\n        border-radius : 50%;\n    }\n\n    &.shape-circular.size-tiny {\n        width     : 16px;\n        height    : 16px;\n        padding   : 0;\n        font-size : 8px;\n    }\n\n    &.shape-circular.size-small {\n        width     : 32px;\n        height    : 32px;\n        padding   : 0;\n        font-size : 12px;\n    }\n\n    &.shape-circular.size-medium {\n        font-size : 16px;\n    }\n\n    &.shape-circular.size-large {\n        width     : 80px;\n        height    : 80px;\n        padding   : 0;\n        font-size : 24px;\n    }\n\n    &.shape-circular.size-huge {\n        width     : 128px;\n        height    : 128px;\n        padding   : 0;\n        font-size : 32px;\n    }\n\n    &.shape-circular img {\n        position : absolute;\n        margin   : auto;\n        left     : 0;\n        top      : 0;\n        bottom   : 0;\n        right    : 0;\n    }\n\n    &[class*=\"border-\"] {\n        border-width : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n    }\n\n    &.border-none {\n        border-width : 0 !important;\n    }\n\n    &[disabled] {\n        box-shadow     : none;\n        user-select    : none;\n        pointer-events : none;\n        opacity        : 0.32;\n        filter         : grayscale(100%);\n    }\n\n    //  DIFFERENT SIZES  //////////////////////////////////////////////////////\n    &.size-tiny {\n        padding   : 4px 8px;\n        font-size : ${(props: ButtonProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, -2)}em;\n    }\n\n    &.size-small {\n        padding   : 6px 12px;\n        font-size : ${(props: ButtonProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, -1)}em;\n    }\n\n    &.size-large {\n        padding   : 16px 32px;\n        font-size : ${(props: ButtonProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 2)}em;\n    }\n\n    &.size-huge {\n        padding   : 24px 40px;\n        font-size : ${(props: ButtonProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 4)}em;\n    }\n\n    //  BUTTON WITH SPINNER  //////////////////////////////////////////////////\n    &.is-loading {\n        color          : transparent !important;\n        box-shadow     : none;\n        user-select    : none;\n        pointer-events : none;\n    }\n\n    &.is-loading::after {\n        display            : block;\n        position           : absolute;\n        margin             : auto;\n        left               : 0;\n        top                : 0;\n        bottom             : 0;\n        right              : 0;\n        height             : 16px;\n        width              : 16px;\n        border-radius      : 50%;\n        content            : \"\";\n        border             : 3px solid;\n        border-color       : ${(props: ButtonProps) => convertToFictoanColor(props.textColor ?? props.textColour)};\n        border-top-color   : transparent;\n        border-right-color : transparent;\n        -webkit-animation  : spinner 0.4s infinite linear;\n        animation          : spinner 0.4s infinite linear;\n    }\n\n    &.size-tiny.is-loading::after,\n    &.size-small.is-loading::after {\n        height : 8px;\n        width  : 8px;\n    }\n\n    /*  Animation for loader  */\n    @-webkit-keyframes spinner {\n        from {\n            -webkit-transform : rotate(0deg);\n        }\n        to {\n            -webkit-transform : rotate(359deg);\n        }\n    }\n\n    @keyframes spinner {\n        from {\n            transform : rotate(0deg);\n        }\n        to {\n            transform : rotate(359deg);\n        }\n    }\n\n    //  BUTTON WITH DELETE  ///////////////////////////////////////////////////\n    &.has-delete { display : inline-flex; }\n\n    &.has-delete::after {\n        display     : inline-flex;\n        position    : absolute;\n        cursor      : pointer;\n        right       : 8px;\n        content     : \"\\\\00d7\";\n        font-size   : 17px;\n        line-height : 1;\n        align-self  : center;\n    }\n\n    &.has-delete,\n    &.size-tiny.has-delete,\n    &.size-small.has-delete {\n        padding-right : 32px !important;\n    }\n\n    &.size-large.has-delete {\n        padding-right : 40px !important;\n    }\n\n    &.size-huge.has-delete {\n        padding-right : 48px !important;\n    }\n\n    &.size-large.has-delete::after,\n    &.size-huge.has-delete::after {\n        font-size : 25px;\n        right     : 16px;\n    }\n`;\n"],"names":["ButtonStyled","button","props","theme","font","primary","default","bg","text","border","globals","borderWidth","borderRadius","onHover","isActive","isLoading","spinnerBorder","secondary","tertiary","paras","size","Math","pow","headings","multiplier","convertToFictoanColor","textColor","textColour"],"mappings":"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"}
+{"version":3,"file":"Button.styled.js","sources":["../../../../src/components/Button/Button.styled.tsx"],"sourcesContent":["import { convertToFictoanColor } from \"../../utils/helpers\";\nimport styled from \"styled-components\";\n\nimport { ButtonProps } from \"./Button\";\nimport { ColourPropTypes } from \"../Element/constants\";\n\nexport const ButtonStyled = styled.button`\n    position            : relative;\n    cursor              : pointer;\n    font-family         : ${(props: ButtonProps) => props.theme.button.font};\n    font-weight         : bold;\n    font-size           : 92%;\n    text-align          : center;\n    text-decoration     : none;\n    line-height         : 1;\n    transition          : all 0.2s ease-in-out;\n    background-position : center;\n    user-select         : none;\n    \n    &:not([class*=\"padding-\"]) {\n        padding : 12px 24px;\n    }\n\n    // To make sure a button’s children\n    // don’t style themselves like a douchebag\n    > * {\n        all : unset;\n    }\n\n    &.is-loading::after {\n        border             : 3px solid ;\n        border-top-color   : transparent;\n        border-right-color : transparent;\n    }\n\n    &.primary {\n        background-color : ${(props: ButtonProps) => props.theme.button.primary.default.bg};\n        color            : ${(props: ButtonProps) => props.theme.button.primary.default.text};\n        border           : solid ${(props: ButtonProps) => props.theme.button.primary.default.border};\n        border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n        border-radius    : ${(props: ButtonProps) => props.theme.button.primary.default.borderRadius};\n\n        :hover {\n            background-color : ${(props: ButtonProps) => props.theme.button.primary.onHover.bg};\n            color            : ${(props: ButtonProps) => props.theme.button.primary.onHover.text};\n            border           : solid ${(props: ButtonProps) => props.theme.button.primary.onHover.border};\n            border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n        }\n\n        :active {\n            background-color : ${(props: ButtonProps) => props.theme.button.primary.isActive.bg};\n            color            : ${(props: ButtonProps) => props.theme.button.primary.isActive.text};\n            border           : solid ${(props: ButtonProps) => props.theme.button.primary.isActive.border};\n            border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n        }\n\n        &.is-loading::after {\n            border             : 3px solid ${(props: ButtonProps) => props.theme.button.primary.isLoading.spinnerBorder};\n            border-top-color   : transparent;\n            border-right-color : transparent;\n        }\n    }\n\n    &.secondary {\n        background-color : ${(props: ButtonProps) => props.theme.button.secondary.default.bg};\n        color            : ${(props: ButtonProps) => props.theme.button.secondary.default.text};\n        border           : solid ${(props: ButtonProps) => props.theme.button.secondary.default.border};\n        border-radius    : ${(props: ButtonProps) => props.theme.button.secondary.default.borderRadius};\n        border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n\n        :hover {\n            background-color : ${(props: ButtonProps) => props.theme.button.secondary.onHover.bg};\n            color            : ${(props: ButtonProps) => props.theme.button.secondary.onHover.text};\n            border           : solid ${(props: ButtonProps) => props.theme.button.secondary.onHover.border};\n            border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n        }\n\n        :active {\n            background-color : ${(props: ButtonProps) => props.theme.button.secondary.isActive.bg};\n            color            : ${(props: ButtonProps) => props.theme.button.secondary.isActive.text};\n            border           : solid ${(props: ButtonProps) => props.theme.button.secondary.isActive.border};\n            border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n        }\n\n        &.is-loading::after {\n            border             : 3px solid ${(props: ButtonProps) => props.theme.button.secondary.isLoading.spinnerBorder};\n            border-top-color   : transparent;\n            border-right-color : transparent;\n        }\n    }\n\n    &.tertiary {\n        background-color : ${(props: ButtonProps) => props.theme.button.tertiary.default.bg};\n        color            : ${(props: ButtonProps) => props.theme.button.tertiary.default.text};\n        border           : solid ${(props: ButtonProps) => props.theme.button.tertiary.default.border};\n        border-radius    : ${(props: ButtonProps) => props.theme.button.tertiary.default.borderRadius};\n        border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n\n        :hover {\n            background-color : ${(props: ButtonProps) => props.theme.button.tertiary.onHover.bg};\n            color            : ${(props: ButtonProps) => props.theme.button.tertiary.onHover.text};\n            border           : solid ${(props: ButtonProps) => props.theme.button.tertiary.onHover.border};\n            border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n        }\n\n        :active {\n            background-color : ${(props: ButtonProps) => props.theme.button.tertiary.isActive.bg};\n            color            : ${(props: ButtonProps) => props.theme.button.tertiary.isActive.text};\n            border           : solid ${(props: ButtonProps) => props.theme.button.tertiary.isActive.border};\n            border-width     : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n        }\n\n        &.is-loading::after {\n            border             : 3px solid ${(props: ButtonProps) => props.theme.button.tertiary.isLoading.spinnerBorder};\n            border-top-color   : transparent;\n            border-right-color : transparent;\n        }\n    }\n\n    &:active {\n        box-shadow : none;\n        opacity    : 0.72;\n    }\n\n    //  ROUND BUTTON  /////////////////////////////////////////////////////////\n    &.shape-circular {\n        width         : 64px;\n        height        : 64px;\n        padding       : 0 !important;\n        border-radius : 50%;\n    }\n\n    &.shape-circular.size-tiny {\n        width     : 16px;\n        height    : 16px;\n        padding   : 0;\n        font-size : 8px;\n    }\n\n    &.shape-circular.size-small {\n        width     : 32px;\n        height    : 32px;\n        padding   : 0;\n        font-size : 12px;\n    }\n\n    &.shape-circular.size-medium {\n        font-size : 16px;\n    }\n\n    &.shape-circular.size-large {\n        width     : 80px;\n        height    : 80px;\n        padding   : 0;\n        font-size : 24px;\n    }\n\n    &.shape-circular.size-huge {\n        width     : 128px;\n        height    : 128px;\n        padding   : 0;\n        font-size : 32px;\n    }\n\n    &.shape-circular img {\n        position : absolute;\n        margin   : auto;\n        left     : 0;\n        top      : 0;\n        bottom   : 0;\n        right    : 0;\n    }\n\n    &[class*=\"border-\"] {\n        border-width : ${(props: ButtonProps) => props.theme.globals.borderWidth};\n    }\n\n    &.border-none {\n        border-width : 0 !important;\n    }\n\n    &[disabled] {\n        box-shadow     : none;\n        user-select    : none;\n        pointer-events : none;\n        opacity        : 0.32;\n        filter         : grayscale(100%);\n    }\n\n    //  DIFFERENT SIZES  //////////////////////////////////////////////////////\n    &.size-tiny {\n        padding   : 4px 8px;\n        font-size : ${(props: ButtonProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, -2)}em;\n    }\n\n    &.size-small {\n        padding   : 6px 12px;\n        font-size : ${(props: ButtonProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, -1)}em;\n    }\n\n    &.size-large {\n        padding   : 16px 32px;\n        font-size : ${(props: ButtonProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 2)}em;\n    }\n\n    &.size-huge {\n        padding   : 24px 40px;\n        font-size : ${(props: ButtonProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 4)}em;\n    }\n\n    //  BUTTON WITH SPINNER  //////////////////////////////////////////////////\n    &.is-loading {\n        color          : transparent !important;\n        box-shadow     : none;\n        user-select    : none;\n        pointer-events : none;\n    }\n\n    &.is-loading::after {\n        display            : block;\n        position           : absolute;\n        margin             : auto;\n        left               : 0;\n        top                : 0;\n        bottom             : 0;\n        right              : 0;\n        height             : 16px;\n        width              : 16px;\n        border-radius      : 50%;\n        content            : \"\";\n        border             : 3px solid;\n        border-color       : ${(props: ButtonProps) => convertToFictoanColor((props.textColor ?? props.textColour) as ColourPropTypes)};\n        border-top-color   : transparent;\n        border-right-color : transparent;\n        -webkit-animation  : spinner 0.4s infinite linear;\n        animation          : spinner 0.4s infinite linear;\n    }\n\n    &.size-tiny.is-loading::after,\n    &.size-small.is-loading::after {\n        height : 8px;\n        width  : 8px;\n    }\n\n    /*  Animation for loader  */\n    @-webkit-keyframes spinner {\n        from {\n            -webkit-transform : rotate(0deg);\n        }\n        to {\n            -webkit-transform : rotate(359deg);\n        }\n    }\n\n    @keyframes spinner {\n        from {\n            transform : rotate(0deg);\n        }\n        to {\n            transform : rotate(359deg);\n        }\n    }\n\n    //  BUTTON WITH DELETE  ///////////////////////////////////////////////////\n    &.has-delete { display : inline-flex; }\n\n    &.has-delete::after {\n        display     : inline-flex;\n        position    : absolute;\n        cursor      : pointer;\n        right       : 8px;\n        content     : \"\\\\00d7\";\n        font-size   : 17px;\n        line-height : 1;\n        align-self  : center;\n    }\n\n    &.has-delete,\n    &.size-tiny.has-delete,\n    &.size-small.has-delete {\n        padding-right : 32px !important;\n    }\n\n    &.size-large.has-delete {\n        padding-right : 40px !important;\n    }\n\n    &.size-huge.has-delete {\n        padding-right : 48px !important;\n    }\n\n    &.size-large.has-delete::after,\n    &.size-huge.has-delete::after {\n        font-size : 25px;\n        right     : 16px;\n    }\n`;\n"],"names":["ButtonStyled","button","props","theme","font","primary","default","bg","text","border","globals","borderWidth","borderRadius","onHover","isActive","isLoading","spinnerBorder","secondary","tertiary","paras","size","Math","pow","headings","multiplier","convertToFictoanColor","textColor","textColour"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+import { CommonAndHTMLProps } from "../Element/constants";
+export interface CalloutCustomProps {
+    kind: "info" | "success" | "warning" | "error";
+    children: ReactNode;
+}
+export declare type CalloutElementType = HTMLDivElement;
+export declare type CalloutProps = Omit<CommonAndHTMLProps<CalloutElementType>, keyof CalloutCustomProps> & CalloutCustomProps;
+export declare const Callout: React.ForwardRefExoticComponent<Omit<CommonAndHTMLProps<HTMLDivElement>, keyof CalloutCustomProps> & CalloutCustomProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/Callout/Callout.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../external/Element.js"),r=require("react"),t=require("../Typography/Text.js"),a=require("./Callout.styled.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../external/transparentize.js"),require("../../external/rgba.js"),require("../../external/DefaultColours.js"),require("styled-components");var l=/*#__PURE__*/n(r);const u=l.default.forwardRef(((r,n)=>{var{kind:u,children:s}=r,o=e.__rest(r,["kind","children"]);return l.default.createElement(e.Element,Object.assign({as:a.CalloutStyled,ref:n,className:u},o),l.default.createElement(t.Text,{marginBottom:"none",marginTop:"none"},s))}));exports.Callout=u;
+//# sourceMappingURL=Callout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.js","sources":["../../../../src/components/Callout/Callout.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { Element } from \"../Element/Element\";\nimport { Text } from \"../Typography/Text\";\n\nimport { CalloutStyled } from \"./Callout.styled\";\n\nexport interface CalloutCustomProps {\n    kind: \"info\" | \"success\" | \"warning\" | \"error\";\n    children: ReactNode;\n}\n\nexport type CalloutElementType = HTMLDivElement;\nexport type CalloutProps = Omit<CommonAndHTMLProps<CalloutElementType>, keyof CalloutCustomProps> & CalloutCustomProps;\n\nexport const Callout = React.forwardRef(\n    (\n        { kind, children, ...props }: CalloutProps,\n        ref: React.Ref<CalloutElementType>\n    ) => {\n        return (\n            <Element<CalloutElementType> as={CalloutStyled} ref={ref} className={kind} {...props}>\n                <Text marginBottom=\"none\" marginTop=\"none\">\n                    {children}\n                </Text>\n            </Element>\n        );\n    }\n);\n"],"names":["Callout","React","forwardRef","_a","ref","kind","children","props","Element","as","CalloutStyled","className","Text","marginBottom","marginTop"],"mappings":"mcAeaA,EAAUC,UAAMC,YACzB,CACIC,EACAC,SADAC,KAAEA,EAAFC,SAAQA,KAAaC,aAArB,4BAIIN,wBAACO,yBAA4BC,GAAIC,gBAAeN,IAAKA,EAAKO,UAAWN,GAAUE,GAC3EN,wBAACW,QAAKC,aAAa,OAAOC,UAAU,QAC/BR"}

package/dist/cjs/components/Callout/Callout.stories.d.ts

@@ -0,0 +1,3 @@
+import { FictoanStory } from "../../utils/storyUtils";
+import { Callout } from "./Callout";
+export declare const Default: FictoanStory<typeof Callout>;

package/dist/cjs/components/Callout/Callout.styled.d.ts

@@ -0,0 +1 @@
+export declare const CalloutStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../external/transparentize.js"),e=require("../../external/DefaultColours.js"),o=require("styled-components");function l(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}require("../../external/rgba.js");const t=/*#__PURE__*/l(o).default.div.withConfig({displayName:"CalloutStyled",componentId:"-vq9kys"})`display:block;border-width:0 0 0 5px;word-break:break-word;border-style:solid;padding:16px;border-radius:4px;&.info{background-color:${r.transparentize(.8,e.defaultColours.blue)};border-color:${e.defaultColours.blue};}&.success{background-color:${r.transparentize(.8,e.defaultColours.green)};border-color:${e.defaultColours.green};}&.warning{background-color:${r.transparentize(.8,e.defaultColours.amber)};border-color:${e.defaultColours.amber};}&.error{background-color:${r.transparentize(.8,e.defaultColours.red)};border-color:${e.defaultColours.red};}`;exports.CalloutStyled=t;
+//# sourceMappingURL=Callout.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.styled.js","sources":["../../../../src/components/Callout/Callout.styled.tsx"],"sourcesContent":["import transparentize from \"polished/lib/color/transparentize\";\nimport { defaultColours } from \"../../styles/DefaultColours\";\nimport styled from \"styled-components\";\n\nexport const CalloutStyled = styled.div`\n    display       : block;\n    border-width  : 0 0 0 5px;\n    word-break    : break-word;\n    border-style  : solid;\n    padding       : 16px;\n    border-radius : 4px;\n\n    &.info {\n        background-color : ${transparentize(0.80, defaultColours.blue)};\n        border-color     : ${defaultColours.blue};\n    }\n\n    &.success {\n        background-color : ${transparentize(0.80, defaultColours.green)};\n        border-color     : ${defaultColours.green};\n    }\n    \n    &.warning {\n        background-color : ${transparentize(0.80, defaultColours.amber)};\n        border-color     : ${defaultColours.amber};\n    }\n\n    &.error {\n        background-color : ${transparentize(0.80, defaultColours.red)};\n        border-color     : ${defaultColours.red};\n    }\n\n`;\n"],"names":["CalloutStyled","div","transparentize","defaultColours","blue","green","amber","red"],"mappings":"mTAIaA,4BAAuBC,2MASPC,iBAAe,GAAMC,iBAAeC,sBACpCD,iBAAeC,oCAIfF,iBAAe,GAAMC,iBAAeE,uBACpCF,iBAAeE,qCAIfH,iBAAe,GAAMC,iBAAeG,uBACpCH,iBAAeG,mCAIfJ,iBAAe,GAAMC,iBAAeI,qBACpCJ,iBAAeI"}

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

@@ -1,9 +1,5 @@
 import React from "react";
 import { CommonAndHTMLProps } from "../Element/constants";
-export interface CardCustomProps {
-    shape?: "rounded" | "curved";
-    shadow?: "mild" | "soft" | "hard";
-}
 export declare type CardElementType = HTMLDivElement;
-export declare type CardProps = CommonAndHTMLProps<CardElementType> & CardCustomProps;
-export declare const Card: React.ForwardRefExoticComponent<CommonAndHTMLProps<HTMLDivElement> & CardCustomProps & React.RefAttributes<HTMLDivElement>>;
+export declare type CardProps = CommonAndHTMLProps<CardElementType>;
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/Card/Card.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\n\nimport { CardStyled } from \"./Card.styled\";\n\n// prettier-ignore\nexport interface CardCustomProps {\n    shape  ? : \"rounded\" | \"curved\";\n    shadow ? : \"mild\" | \"soft\" | \"hard\";\n}\n\nexport type CardElementType = HTMLDivElement;\nexport type CardProps = CommonAndHTMLProps<CardElementType> & CardCustomProps;\n\nexport const Card = React.forwardRef(({ shadow, shape, ...props }: CardProps, ref: React.Ref<CardElementType>) => {\n    let classNames = [];\n\n    if (shape) {\n        classNames.push(`shape-${shape}`);\n    }\n\n    if (shadow) {\n        classNames.push(`shadow-${shadow}`);\n    }\n\n    return <Element<CardElementType> as={CardStyled} ref={ref} classNames={classNames} {...props} />;\n});\n"],"names":["Card","React","forwardRef","_a","ref","shadow","shape","props","classNames","push","Element","as","CardStyled"],"mappings":"mSAgBaA,EAAOC,UAAMC,YAAW,CAACC,EAAwCC,SAAxCC,OAAEA,EAAFC,MAAUA,KAAUC,aAApB,wBAC9BC,EAAa,UAEbF,GACAE,EAAWC,cAAcH,KAGzBD,GACAG,EAAWC,eAAeJ,KAGvBJ,wBAACS,yBAAyBC,GAAIC,aAAYR,IAAKA,EAAKI,WAAYA,GAAgBD"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\n\nimport { CardStyled } from \"./Card.styled\";\n\nexport type CardElementType = HTMLDivElement;\nexport type CardProps = CommonAndHTMLProps<CardElementType>;\n\nexport const Card = React.forwardRef(({ shape, ...props }: CardProps, ref: React.Ref<CardElementType>) => {\n    let classNames = [];\n\n    if (shape) {\n        classNames.push(`shape-${shape}`);\n    }\n\n    return <Element<CardElementType> as={CardStyled} ref={ref} classNames={classNames} {...props} />;\n});\n"],"names":["Card","React","forwardRef","_a","ref","shape","props","classNames","push","Element","as","CardStyled"],"mappings":"mSAUaA,EAAOC,UAAMC,YAAW,CAACC,EAAgCC,SAAhCC,MAAEA,KAAUC,aAAZ,eAC9BC,EAAa,UAEbF,GACAE,EAAWC,cAAcH,KAGtBJ,wBAACQ,yBAAyBC,GAAIC,aAAYP,IAAKA,EAAKG,WAAYA,GAAgBD"}

package/dist/cjs/components/Card/Card.stories.d.ts

@@ -0,0 +1,3 @@
+import { FictoanStory } from "../../utils/storyUtils";
+import { Card } from "./Card";
+export declare const Default: FictoanStory<typeof Card>;

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

@@ -1,2 +1,2 @@
-"use strict";function d(d){return d&&"object"==typeof d&&"default"in d?d:{default:d}}Object.defineProperty(exports,"__esModule",{value:!0});const e=/*#__PURE__*/d(require("styled-components")).default.div.withConfig({displayName:"CardStyled",componentId:"sc-1otqjh1"})`position:relative;width:100%;&[class*="border-"]{border-width:${d=>d.theme.globals.borderWidth};}&:not([class*="border-"]){border:1px solid ${d=>d.theme.card.border};}&:not([class*="bg-"]){background-color:${d=>d.theme.card.bg};}&.shape-rounded{border-radius:${d=>d.theme.card.borderRadius};}&.padding-all-tiny{padding:8px;}&.padding-all-small{padding:16px;}&.padding-all-medium{padding:32px;}&.padding-all-large{padding:48px;}&.padding-all-huge{padding:64px;}@media all and (max-width : 600px){&[class*="padding"]{padding:4vmin;}.padding-none{padding:0 !important;}}`;exports.CardStyled=e;
+"use strict";function d(d){return d&&"object"==typeof d&&"default"in d?d:{default:d}}Object.defineProperty(exports,"__esModule",{value:!0});const e=/*#__PURE__*/d(require("styled-components")).default.div.withConfig({displayName:"CardStyled",componentId:"-lrjl3l"})`position:relative;width:100%;&[class*="border-"]{border-width:${d=>d.theme.globals.borderWidth};}&:not([class*="border-"]){border:1px solid ${d=>d.theme.card.border};}&:not([class*="bg-"]){background-color:${d=>d.theme.card.bg};}&.shape-rounded{border-radius:${d=>d.theme.card.borderRadius};}&.padding-all-tiny{padding:8px;}&.padding-all-small{padding:16px;}&.padding-all-medium{padding:32px;}&.padding-all-large{padding:48px;}&.padding-all-huge{padding:64px;}@media all and (max-width : 600px){&[class*="padding"]{padding:4vmin;}.padding-none{padding:0 !important;}}`;exports.CardStyled=e;
 //# sourceMappingURL=Card.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.styled.js","sources":["../../../../src/components/Card/Card.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { CardProps } from \"./Card\";\n\n\nexport const CardStyled = styled.div`\n    position : relative;\n    width    : 100%;\n\n    &[class*=\"border-\"] {\n        border-width : ${(props: CardProps) => props.theme.globals.borderWidth};\n    }\n\n    &:not([class*=\"border-\"]) {\n        border : 1px solid ${(props: CardProps) => props.theme.card.border};\n    }\n\n    &:not([class*=\"bg-\"]) {\n        background-color : ${(props: CardProps) => props.theme.card.bg};\n    }\n\n    &.shape-rounded { border-radius : ${(props: CardProps) => props.theme.card.borderRadius}; }\n\n    &.padding-all-tiny   { padding : 8px; }\n    &.padding-all-small  { padding : 16px; }\n    &.padding-all-medium { padding : 32px; }\n    &.padding-all-large  { padding : 48px; }\n    &.padding-all-huge   { padding : 64px; }\n\n    @media all and (max-width : 600px) {\n        &[class*=\"padding\"] { padding : 4vmin; }\n\n        .padding-none { padding : 0 !important; }\n    }\n`;\n"],"names":["CardStyled","div","props","theme","globals","borderWidth","card","border","bg","borderRadius"],"mappings":"kJAKaA,uDAAoBC,oIAKPC,GAAqBA,EAAMC,MAAMC,QAAQC,2DAIrCH,GAAqBA,EAAMC,MAAMG,KAAKC,kDAItCL,GAAqBA,EAAMC,MAAMG,KAAKE,qCAG3BN,GAAqBA,EAAMC,MAAMG,KAAKG"}
+{"version":3,"file":"Card.styled.js","sources":["../../../../src/components/Card/Card.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { CardProps } from \"./Card\";\n\n\nexport const CardStyled = styled.div`\n    position : relative;\n    width    : 100%;\n\n    &[class*=\"border-\"] {\n        border-width : ${(props: CardProps) => props.theme.globals.borderWidth};\n    }\n\n    &:not([class*=\"border-\"]) {\n        border : 1px solid ${(props: CardProps) => props.theme.card.border};\n    }\n\n    &:not([class*=\"bg-\"]) {\n        background-color : ${(props: CardProps) => props.theme.card.bg};\n    }\n\n    &.shape-rounded { border-radius : ${(props: CardProps) => props.theme.card.borderRadius}; }\n\n    &.padding-all-tiny   { padding : 8px; }\n    &.padding-all-small  { padding : 16px; }\n    &.padding-all-medium { padding : 32px; }\n    &.padding-all-large  { padding : 48px; }\n    &.padding-all-huge   { padding : 64px; }\n\n    @media all and (max-width : 600px) {\n        &[class*=\"padding\"] { padding : 4vmin; }\n\n        .padding-none { padding : 0 !important; }\n    }\n`;\n"],"names":["CardStyled","div","props","theme","globals","borderWidth","card","border","bg","borderRadius"],"mappings":"kJAKaA,uDAAoBC,iIAKPC,GAAqBA,EAAMC,MAAMC,QAAQC,2DAIrCH,GAAqBA,EAAMC,MAAMG,KAAKC,kDAItCL,GAAqBA,EAAMC,MAAMG,KAAKE,qCAG3BN,GAAqBA,EAAMC,MAAMG,KAAKG"}

package/dist/cjs/components/CodeBlock/Code.styled.d.ts

@@ -1 +1 @@
-export declare const CodeStyled: import("styled-components").StyledComponent<"div", any, import("../Element/constants").CommonAndHTMLProps<HTMLPreElement> & import("./CodeBlock").CodeBlockCustomProps, never>;
+export declare const CodeStyled: import("styled-components").StyledComponent<"div", any, Omit<import("../Element/constants").CommonAndHTMLProps<HTMLPreElement>, keyof import("./CodeBlock").CodeBlockCustomProps> & import("./CodeBlock").CodeBlockCustomProps, never>;

package/dist/cjs/components/CodeBlock/Code.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:"CodeStyled",componentId:"sc-75guoy"})`pre{display:block;width:100%;max-width:100%;font-family:${e=>e.theme.text.font.mono};color:${e=>e.theme.text.code.block.text};font-size:${e=>e.theme.text.code.block.scale}%;line-height:${e=>e.theme.text.code.block.lineHeight};font-weight:400;padding:16px 24px;background-color:${e=>e.theme.text.code.block.bg};text-align:left;overflow:auto;direction:ltr;white-space:pre;word-spacing:normal;word-break:normal;letter-spacing:-0.5px;font-variant-ligatures:none;-webkit-font-smoothing:subpixel-antialiased;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:4px;-moz-tab-size:4;tab-size:4;}@media print{pre[class*="language-"],code[class*="language-"]{text-shadow:none;}}.token.tag{color:${e=>e.theme.text.code.prism.tokens.tag};}.token.atrule{color:${e=>e.theme.text.code.prism.tokens.atrule};}.token.attr-name{color:${e=>e.theme.text.code.prism.tokens.attrName};}.token.attr-value{color:${e=>e.theme.text.code.prism.tokens.attrValue};}.token.boolean{color:${e=>e.theme.text.code.prism.tokens.boolean};}.token.cdata{color:${e=>e.theme.text.code.prism.tokens.cdata};}.token.class-name{color:${e=>e.theme.text.code.prism.tokens.className};}.token.comment{color:${e=>e.theme.text.code.prism.tokens.comment};}.token.constant{color:${e=>e.theme.text.code.prism.tokens.constant}}.token.deleted{color:${e=>e.theme.text.code.prism.tokens.deleted};}.token.delimiter{color:${e=>e.theme.text.code.prism.tokens.delimiter};}.token.doctype{color:${e=>e.theme.text.code.prism.tokens.doctype};}.token.entity{color:${e=>e.theme.text.code.prism.tokens.entity}}.token.function{color:${e=>e.theme.text.code.prism.tokens.function};}.token.hexcode{color:${e=>e.theme.text.code.prism.tokens.hexcode};}.token.inserted{color:${e=>e.theme.text.code.prism.tokens.inserted}}.token.keyword{color:${e=>e.theme.text.code.prism.tokens.keyword};}.token.number{color:${e=>e.theme.text.code.prism.tokens.number}}.token.operator{color:${e=>e.theme.text.code.prism.tokens.operator};}.token.plain{color:${e=>e.theme.text.code.prism.tokens.plain}}.token.prolog{color:${e=>e.theme.text.code.prism.tokens.prolog};}.token.property{color:${e=>e.theme.text.code.prism.tokens.property};}.token.punctuation{color:${e=>e.theme.text.code.prism.tokens.punctuation};}.token.regex{color:${e=>e.theme.text.code.prism.tokens.regex}}.token.selector{color:${e=>e.theme.text.code.prism.tokens.selector};}.token.string{color:${e=>e.theme.text.code.prism.tokens.string};}.token.symbol{color:${e=>e.theme.text.code.prism.tokens.symbol}}.token.url{color:${e=>e.theme.text.code.prism.tokens.url}}.token.variable{color:${e=>e.theme.text.code.prism.tokens.variable};}.token.namespace{opacity:0.72;}.token.italic{font-style:italic;}pre::selection,code::selection,pre::-moz-selection,code::-moz-selection,pre[class*=language-]::selection,code[class*=language-]::selection,pre[class*=language-]::-moz-selection,code[class*=language-]::-moz-selection{text-shadow:none;color:${e=>e.theme.text.selection.text};background:${e=>e.theme.text.selection.bg} !important;}code[class*=language-css],code[class*=language-less],code[class*=language-sass]{color:${e=>e.theme.text.code.prism.languages.css.fallback};}code[class*=language-scss]{color:${e=>e.theme.text.code.prism.languages.css.fallback};}code[class*=language-html]{color:${e=>e.theme.text.code.prism.languages.html.fallback};}code[class*=language-js]{color:${e=>e.theme.text.code.prism.languages.js.fallback};}code[class*=language-json] .token.string{color:${e=>e.theme.text.code.prism.languages.json.tokens.string};}`;exports.CodeStyled=t;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=/*#__PURE__*/e(require("styled-components")).default.div.withConfig({displayName:"CodeStyled",componentId:"-1wz4f2v"})`pre{display:block;width:100%;max-width:100%;font-family:${e=>e.theme.text.font.mono};color:${e=>e.theme.text.code.block.text};font-size:${e=>e.theme.text.code.block.scale}%;line-height:${e=>e.theme.text.code.block.lineHeight};font-weight:400;padding:16px 24px;background-color:${e=>e.theme.text.code.block.bg};text-align:left;overflow:auto;direction:ltr;white-space:pre;word-spacing:normal;word-break:normal;letter-spacing:-0.5px;font-variant-ligatures:none;-webkit-font-smoothing:subpixel-antialiased;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:4px;-moz-tab-size:4;tab-size:4;}@media print{pre[class*="language-"],code[class*="language-"]{text-shadow:none;}}.token.tag{color:${e=>e.theme.text.code.prism.tokens.tag};}.token.atrule{color:${e=>e.theme.text.code.prism.tokens.atrule};}.token.attr-name{color:${e=>e.theme.text.code.prism.tokens.attrName};}.token.attr-value{color:${e=>e.theme.text.code.prism.tokens.attrValue};}.token.boolean{color:${e=>e.theme.text.code.prism.tokens.boolean};}.token.cdata{color:${e=>e.theme.text.code.prism.tokens.cdata};}.token.class-name{color:${e=>e.theme.text.code.prism.tokens.className};}.token.comment{color:${e=>e.theme.text.code.prism.tokens.comment};}.token.constant{color:${e=>e.theme.text.code.prism.tokens.constant}}.token.deleted{color:${e=>e.theme.text.code.prism.tokens.deleted};}.token.delimiter{color:${e=>e.theme.text.code.prism.tokens.delimiter};}.token.doctype{color:${e=>e.theme.text.code.prism.tokens.doctype};}.token.entity{color:${e=>e.theme.text.code.prism.tokens.entity}}.token.function{color:${e=>e.theme.text.code.prism.tokens.function};}.token.hexcode{color:${e=>e.theme.text.code.prism.tokens.hexcode};}.token.inserted{color:${e=>e.theme.text.code.prism.tokens.inserted}}.token.keyword{color:${e=>e.theme.text.code.prism.tokens.keyword};}.token.number{color:${e=>e.theme.text.code.prism.tokens.number}}.token.operator{color:${e=>e.theme.text.code.prism.tokens.operator};}.token.plain{color:${e=>e.theme.text.code.prism.tokens.plain}}.token.prolog{color:${e=>e.theme.text.code.prism.tokens.prolog};}.token.property{color:${e=>e.theme.text.code.prism.tokens.property};}.token.punctuation{color:${e=>e.theme.text.code.prism.tokens.punctuation};}.token.regex{color:${e=>e.theme.text.code.prism.tokens.regex}}.token.selector{color:${e=>e.theme.text.code.prism.tokens.selector};}.token.string{color:${e=>e.theme.text.code.prism.tokens.string};}.token.symbol{color:${e=>e.theme.text.code.prism.tokens.symbol}}.token.url{color:${e=>e.theme.text.code.prism.tokens.url}}.token.variable{color:${e=>e.theme.text.code.prism.tokens.variable};}.token.namespace{opacity:0.72;}.token.italic{font-style:italic;}pre::selection,code::selection,pre::-moz-selection,code::-moz-selection,pre[class*=language-]::selection,code[class*=language-]::selection,pre[class*=language-]::-moz-selection,code[class*=language-]::-moz-selection{text-shadow:none;color:${e=>e.theme.text.selection.text};background:${e=>e.theme.text.selection.bg} !important;}code[class*=language-css],code[class*=language-less],code[class*=language-sass]{color:${e=>e.theme.text.code.prism.languages.css.fallback};}code[class*=language-scss]{color:${e=>e.theme.text.code.prism.languages.css.fallback};}code[class*=language-html]{color:${e=>e.theme.text.code.prism.languages.html.fallback};}code[class*=language-js]{color:${e=>e.theme.text.code.prism.languages.js.fallback};}code[class*=language-json] .token.string{color:${e=>e.theme.text.code.prism.languages.json.tokens.string};}`;exports.CodeStyled=t;
 //# sourceMappingURL=Code.styled.js.map

package/dist/cjs/components/CodeBlock/Code.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.styled.js","sources":["../../../../src/components/CodeBlock/Code.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { CodeBlockProps } from \"./CodeBlock\";\n\n\nexport const CodeStyled = styled.div`\n    pre {\n        display                : block;\n        width                  : 100%;\n        max-width              : 100%;\n        font-family            : ${(props: CodeBlockProps) => props.theme.text.font.mono};\n        color                  : ${(props: CodeBlockProps) => props.theme.text.code.block.text};\n        font-size              : ${(props: CodeBlockProps) => props.theme.text.code.block.scale}%;\n        line-height            : ${(props: CodeBlockProps) => props.theme.text.code.block.lineHeight};\n        font-weight            : 400;\n        padding                : 16px 24px;\n        background-color       : ${(props: CodeBlockProps) => props.theme.text.code.block.bg};\n        text-align             : left;\n        overflow               : auto;\n        direction              : ltr;\n        white-space            : pre;\n        word-spacing           : normal;\n        word-break             : normal;\n        letter-spacing         : -0.5px;\n        font-variant-ligatures : none;\n        -webkit-font-smoothing : subpixel-antialiased;\n        -webkit-hyphens        : none;\n        -ms-hyphens            : none;\n        hyphens                : none;\n        border-radius          : 4px;\n        -moz-tab-size          : 4;\n        tab-size               : 4;\n    }\n\n    @media print {\n        pre[class*=\"language-\"],\n        code[class*=\"language-\"] {\n            text-shadow: none;\n        }\n    }\n    /*********************************************************\n    * Tokens\n    */\n    .token.tag         { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.tag}; }\n    .token.atrule      { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.atrule}; }\n    .token.attr-name   { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.attrName}; }\n    .token.attr-value  { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.attrValue}; }\n    .token.boolean     { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.boolean}; }\n    .token.cdata       { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.cdata}; }\n    .token.class-name  { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.className}; }\n    .token.comment     { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.comment}; }\n    .token.constant    { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.constant} }\n    .token.deleted     { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.deleted}; }\n    .token.delimiter   { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.delimiter}; }\n    .token.doctype     { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.doctype}; }\n    .token.entity      { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.entity} }\n    .token.function    { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.function}; }\n    .token.hexcode     { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.hexcode}; }\n    .token.inserted    { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.inserted} }\n    .token.keyword     { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.keyword}; }\n    .token.number      { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.number} }\n    .token.operator    { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.operator}; }\n    .token.plain       { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.plain} }\n    .token.prolog      { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.prolog}; }\n    .token.property    { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.property}; }\n    .token.punctuation { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.punctuation}; }\n    .token.regex       { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.regex} }\n    .token.selector    { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.selector}; }\n    .token.string      { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.string}; }\n    .token.symbol      { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.symbol} }\n    .token.url         { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.url} }\n    .token.variable    { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.variable}; }\n\n    .token.namespace { opacity : 0.72; }\n    .token.italic { font-style : italic; }\n\n    pre::selection,\n    code::selection,\n    pre::-moz-selection,\n    code::-moz-selection,\n    pre[class*=language-]::selection,\n    code[class*=language-]::selection,\n    pre[class*=language-]::-moz-selection,\n    code[class*=language-] ::-moz-selection {\n        text-shadow : none;\n        color       : ${(props: CodeBlockProps) => props.theme.text.selection.text};\n        background  : ${(props: CodeBlockProps) => props.theme.text.selection.bg} !important;\n    }\n\n    code[class*=language-css],\n    code[class*=language-less],\n    code[class*=language-sass] {\n        color : ${(props: CodeBlockProps) => props.theme.text.code.prism.languages.css.fallback};\n    }\n\n    code[class*=language-scss] { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.languages.css.fallback}; }\n\n    code[class*=language-html] { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.languages.html.fallback}; }\n\n    code[class*=language-js]   { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.languages.js.fallback}; }\n\n    code[class*=language-json] .token.string {\n        color : ${(props: CodeBlockProps) => props.theme.text.code.prism.languages.json.tokens.string};\n    }\n`;\n"],"names":["CodeStyled","div","props","theme","text","font","mono","code","block","scale","lineHeight","bg","prism","tokens","tag","atrule","attrName","attrValue","boolean","cdata","className","comment","constant","deleted","delimiter","doctype","entity","function","hexcode","inserted","keyword","number","operator","plain","prolog","property","punctuation","regex","selector","string","symbol","url","variable","selection","languages","css","fallback","html","js","json"],"mappings":"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"}
+{"version":3,"file":"Code.styled.js","sources":["../../../../src/components/CodeBlock/Code.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { CodeBlockProps } from \"./CodeBlock\";\n\n\nexport const CodeStyled = styled.div`\n    pre {\n        display                : block;\n        width                  : 100%;\n        max-width              : 100%;\n        font-family            : ${(props: CodeBlockProps) => props.theme.text.font.mono};\n        color                  : ${(props: CodeBlockProps) => props.theme.text.code.block.text};\n        font-size              : ${(props: CodeBlockProps) => props.theme.text.code.block.scale}%;\n        line-height            : ${(props: CodeBlockProps) => props.theme.text.code.block.lineHeight};\n        font-weight            : 400;\n        padding                : 16px 24px;\n        background-color       : ${(props: CodeBlockProps) => props.theme.text.code.block.bg};\n        text-align             : left;\n        overflow               : auto;\n        direction              : ltr;\n        white-space            : pre;\n        word-spacing           : normal;\n        word-break             : normal;\n        letter-spacing         : -0.5px;\n        font-variant-ligatures : none;\n        -webkit-font-smoothing : subpixel-antialiased;\n        -webkit-hyphens        : none;\n        -ms-hyphens            : none;\n        hyphens                : none;\n        border-radius          : 4px;\n        -moz-tab-size          : 4;\n        tab-size               : 4;\n    }\n\n    @media print {\n        pre[class*=\"language-\"],\n        code[class*=\"language-\"] {\n            text-shadow: none;\n        }\n    }\n    /*********************************************************\n    * Tokens\n    */\n    .token.tag         { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.tag}; }\n    .token.atrule      { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.atrule}; }\n    .token.attr-name   { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.attrName}; }\n    .token.attr-value  { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.attrValue}; }\n    .token.boolean     { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.boolean}; }\n    .token.cdata       { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.cdata}; }\n    .token.class-name  { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.className}; }\n    .token.comment     { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.comment}; }\n    .token.constant    { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.constant} }\n    .token.deleted     { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.deleted}; }\n    .token.delimiter   { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.delimiter}; }\n    .token.doctype     { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.doctype}; }\n    .token.entity      { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.entity} }\n    .token.function    { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.function}; }\n    .token.hexcode     { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.hexcode}; }\n    .token.inserted    { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.inserted} }\n    .token.keyword     { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.keyword}; }\n    .token.number      { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.number} }\n    .token.operator    { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.operator}; }\n    .token.plain       { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.plain} }\n    .token.prolog      { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.prolog}; }\n    .token.property    { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.property}; }\n    .token.punctuation { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.punctuation}; }\n    .token.regex       { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.regex} }\n    .token.selector    { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.selector}; }\n    .token.string      { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.string}; }\n    .token.symbol      { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.symbol} }\n    .token.url         { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.url} }\n    .token.variable    { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.tokens.variable}; }\n\n    .token.namespace { opacity : 0.72; }\n    .token.italic { font-style : italic; }\n\n    pre::selection,\n    code::selection,\n    pre::-moz-selection,\n    code::-moz-selection,\n    pre[class*=language-]::selection,\n    code[class*=language-]::selection,\n    pre[class*=language-]::-moz-selection,\n    code[class*=language-] ::-moz-selection {\n        text-shadow : none;\n        color       : ${(props: CodeBlockProps) => props.theme.text.selection.text};\n        background  : ${(props: CodeBlockProps) => props.theme.text.selection.bg} !important;\n    }\n\n    code[class*=language-css],\n    code[class*=language-less],\n    code[class*=language-sass] {\n        color : ${(props: CodeBlockProps) => props.theme.text.code.prism.languages.css.fallback};\n    }\n\n    code[class*=language-scss] { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.languages.css.fallback}; }\n\n    code[class*=language-html] { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.languages.html.fallback}; }\n\n    code[class*=language-js]   { color : ${(props: CodeBlockProps) => props.theme.text.code.prism.languages.js.fallback}; }\n\n    code[class*=language-json] .token.string {\n        color : ${(props: CodeBlockProps) => props.theme.text.code.prism.languages.json.tokens.string};\n    }\n`;\n"],"names":["CodeStyled","div","props","theme","text","font","mono","code","block","scale","lineHeight","bg","prism","tokens","tag","atrule","attrName","attrValue","boolean","cdata","className","comment","constant","deleted","delimiter","doctype","entity","function","hexcode","inserted","keyword","number","operator","plain","prolog","property","punctuation","regex","selector","string","symbol","url","variable","selection","languages","css","fallback","html","js","json"],"mappings":"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"}

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

@@ -1,9 +1,10 @@
 import React from "react";
+import { Language } from "prism-react-renderer";
 import { CommonAndHTMLProps } from "../Element/constants";
 export interface CodeBlockCustomProps {
     source?: object | string;
-    language?: string;
+    language?: Language;
 }
 export declare type CodeBlockElementType = HTMLPreElement;
-export declare type CodeBlockProps = CommonAndHTMLProps<CodeBlockElementType> & CodeBlockCustomProps;
-export declare const CodeBlock: React.ForwardRefExoticComponent<CommonAndHTMLProps<HTMLPreElement> & CodeBlockCustomProps & React.RefAttributes<HTMLPreElement>>;
+export declare type CodeBlockProps = Omit<CommonAndHTMLProps<CodeBlockElementType>, keyof CodeBlockCustomProps> & CodeBlockCustomProps;
+export declare const CodeBlock: React.ForwardRefExoticComponent<Omit<CommonAndHTMLProps<HTMLPreElement>, keyof CodeBlockCustomProps> & CodeBlockCustomProps & React.RefAttributes<HTMLPreElement>>;