fictoan-react 0.37.0 → 0.38.1

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+### 0.38.0
+- Add opinionated defaults for `mark` element
+
+### 0.38.0
+- Add `Badge` component
+
+### 0.37.1
+- Rename `Toast` to `ToastItem` for better consistency
+
 ### 0.37.0
 - Add `Toast` component
 
@@ -117,7 +126,7 @@
 
 ### 0.33.12
 - Remove `Element` props being passed to all HTML elements as attributes
-- Fix Button `is-loading` colours
+- Fix Badge `is-loading` colours
 
 ### 0.33.11
 - Fix transition for `SidebarHeader`
@@ -136,7 +145,7 @@ Breaking changes
   - `BreadcrumbWrapper` renamed to `BreadcrumbsWrapper`
   - The `separator` is now configurable in the theme file
 
-- Button
+- Badge
   - `isLoading` class now works for `custom` kind buttons also
   - Fix padding inconsistencies
   - `with-loader` and `with-delete` classes renamed to `is-loading` and `has-delete`
@@ -155,7 +164,7 @@ Breaking changes
 
 - ProgressBar
   - `isThin` prop is deprecated in favour of a far more flexible `height` prop
-  - `shape` prop is now available just like the `Button`
+  - `shape` prop is now available just like the `Badge`
 
 - The theme object is now called `FictoanTheme`
 
@@ -229,7 +238,7 @@ Breaking changes
 - Tweak colour and font family for other input elements
 
 ### 0.31.17
-- Change `fontFamily` to `font` for `Button` component
+- Change `fontFamily` to `font` for `Badge` component
 - Fix font fallback styling inconsistency for labels, tables, and links
 
 ### 0.31.16
@@ -254,7 +263,7 @@ Breaking changes
 - Switch to useState & useEffect for merging theme
 
 ### 0.31.7
-- Fix Toast theme issue for setting `borderRadius`
+- Fix ToastItem theme issue for setting `borderRadius`
 
 ### 0.31.6
 - Fix broken builds (0.31.2 - 0.31.5)

package/README.md

@@ -28,13 +28,13 @@ npm install fictoan-react
 
 And start using!
 ```jsx
-import { Toast } from "fictoan-react";
+import { ToastItem } from "fictoan-react";
 
 const MyComponent = props => {
     return (
-        <Toast shape="rounded" bgColour="white" borderColour="slate-20" shadow="soft">
-            My Awesome Toast
-        </Toast>
+        <ToastItem shape="rounded" bgColour="white" borderColour="slate-20" shadow="soft">
+            My Awesome ToastItem
+        </ToastItem>
     );
 }
 ```

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { CommonAndHTMLProps } from "../Element/constants";
+export interface BadgeCustomProps {
+    size?: "tiny" | "small" | "medium" | "large" | "huge";
+    shape?: "rounded" | "curved";
+}
+export declare type BadgeElementType = HTMLDivElement;
+export declare type BadgeProps = Omit<CommonAndHTMLProps<BadgeElementType>, keyof BadgeCustomProps> & BadgeCustomProps;
+export declare const Badge: React.ForwardRefExoticComponent<Omit<CommonAndHTMLProps<HTMLDivElement>, keyof BadgeCustomProps> & BadgeCustomProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/Badge/Badge.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\n\nimport { BadgeStyled } from \"./Badge.styled\";\n\n// prettier-ignore\nexport interface BadgeCustomProps {\n    size      ? : \"tiny\" | \"small\" | \"medium\" | \"large\" | \"huge\";\n    shape     ? : \"rounded\" | \"curved\";\n}\n\nexport type BadgeElementType = HTMLDivElement;\nexport type BadgeProps = Omit<CommonAndHTMLProps<BadgeElementType>, keyof BadgeCustomProps> & BadgeCustomProps;\n\nexport const Badge = React.forwardRef(\n    ({ size = \"tiny\", shape, kind, ...props }: BadgeProps, ref: React.Ref<BadgeElementType>) => {\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        return <Element<BadgeElementType> as={BadgeStyled} ref={ref} classNames={classNames} {...props} />;\n    }\n);\n"],"names":["Badge","React","forwardRef","_a","ref","size","shape","kind","props","classNames","push","Element","as","BadgeStyled"],"mappings":"oSAgBaA,EAAQC,UAAMC,YACvB,CAACC,EAAsDC,SAAtDC,KAAEA,EAAO,OAATC,MAAiBA,EAAjBC,KAAwBA,KAASC,aAAjC,6BACOC,EAAa,UAEbF,GACAE,EAAWC,KAAKH,GAGhBF,GACAI,EAAWC,aAAaL,KAGxBC,GACAG,EAAWC,cAAcJ,KAGtBL,wBAACU,yBAA0BC,GAAIC,cAAaT,IAAKA,EAAKK,WAAYA,GAAgBD"}

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

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

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

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

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

@@ -0,0 +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.mark.withConfig({displayName:"BadgeStyled",componentId:"-1973ngk"})`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;padding:2px 4px;> *{all:unset;}&.shape-rounded{border-radius:4px;}&.shape-curved{border-radius:5000px}&[class*="border-"]{border-width:${e=>e.theme.globals.borderWidth};}&.border-none{border-width:0 !important;}&.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-medium{padding:12px 24px;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;}`;exports.BadgeStyled=t;
+//# sourceMappingURL=Badge.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.styled.js","sources":["../../../../src/components/Badge/Badge.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { BadgeProps } from \"./Badge\";\n\nexport const BadgeStyled = styled.mark`\n    position            : relative;\n    cursor              : pointer;\n    font-family         : ${(props : BadgeProps) => 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    padding             : 2px 4px;\n\n    // To make sure a button’s children\n    // don’t style themselves like a douchebag\n    > * {\n        all : unset;\n    }\n\n    &.shape-rounded {\n        border-radius : 4px;\n    }\n\n    &.shape-curved {\n        border-radius : 5000px\n    }\n\n    &[class*=\"border-\"] {\n        border-width : ${(props : BadgeProps) => props.theme.globals.borderWidth};\n    }\n\n    &.border-none {\n        border-width : 0 !important;\n    }\n\n    //  DIFFERENT SIZES  //////////////////////////////////////////////////////\n    &.size-tiny {\n        padding   : 4px 8px;\n        font-size : ${(props : BadgeProps) => 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 : BadgeProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, -1)}em;\n    }\n\n    &.size-medium {\n        padding   : 12px 24px;\n        font-size : ${(props : BadgeProps) => 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 : BadgeProps) => 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 : BadgeProps) => props.theme.text.paras.size * Math.pow(props.theme.text.headings.multiplier, 4)}em;\n    }\n`;\n"],"names":["BadgeStyled","mark","props","theme","button","font","globals","borderWidth","text","paras","size","Math","pow","headings","multiplier"],"mappings":"kJAIaA,uDAAqBC,mHAGLC,GAAuBA,EAAMC,MAAMC,OAAOC,+SA0B7CH,GAAuBA,EAAMC,MAAMG,QAAQC,+FAU9CL,GAAuBA,EAAMC,MAAMK,KAAKC,MAAMC,KAAOC,KAAKC,IAAIV,EAAMC,MAAMK,KAAKK,SAASC,YAAa,iDAKrGZ,GAAuBA,EAAMC,MAAMK,KAAKC,MAAMC,KAAOC,KAAKC,IAAIV,EAAMC,MAAMK,KAAKK,SAASC,YAAa,mDAKrGZ,GAAuBA,EAAMC,MAAMK,KAAKC,MAAMC,KAAOC,KAAKC,IAAIV,EAAMC,MAAMK,KAAKK,SAASC,WAAY,kDAKpGZ,GAAuBA,EAAMC,MAAMK,KAAKC,MAAMC,KAAOC,KAAKC,IAAIV,EAAMC,MAAMK,KAAKK,SAASC,WAAY,iDAKpGZ,GAAuBA,EAAMC,MAAMK,KAAKC,MAAMC,KAAOC,KAAKC,IAAIV,EAAMC,MAAMK,KAAKK,SAASC,WAAY"}

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

@@ -1,2 +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;
+"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 l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../external/rgba.js"),require("../../external/DefaultColours.js"),require("styled-components");var n=/*#__PURE__*/l(r);const u=n.default.forwardRef(((r,l)=>{var{kind:u,children:o}=r,s=e.__rest(r,["kind","children"]);return n.default.createElement(e.Element,Object.assign({as:a.CalloutStyled,ref:l,className:u},s),n.default.createElement(t.Text,{marginBottom:"none",marginTop:"none"},o))}));exports.Callout=u;
 //# sourceMappingURL=Callout.js.map

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

@@ -1 +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"}
+{"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":"uZAeaA,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.styled.js

@@ -1,2 +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;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../external/rgba.js"),e=require("../../external/DefaultColours.js");function o(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var t=/*#__PURE__*/o(require("styled-components")),a={exports:{}};!function(e,o){o.__esModule=!0,o.default=void 0;var t=/*#__PURE__*/d(r._curry.exports),a=/*#__PURE__*/d(r._guard.exports),l=/*#__PURE__*/d(r.rgba.exports),u=/*#__PURE__*/d(r.parseToRgb.exports);function d(r){return r&&r.__esModule?r:{default:r}}function s(){return(s=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(r[t]=o[t])}return r}).apply(this,arguments)}function n(r,e){if("transparent"===e)return e;var o=(0,u.default)(e),t="number"==typeof o.alpha?o.alpha:1,d=s({},o,{alpha:(0,a.default)(0,1,+(100*t-100*parseFloat(r)).toFixed(2)/100)});return(0,l.default)(d)}var f=/*#__PURE__*/(0,t.default)(n);o.default=f,e.exports=o.default}(a,a.exports);var l=/*@__PURE__*/r.getDefaultExportFromCjs(a.exports);const u=t.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:${l(.8,e.defaultColours.blue)};border-color:${e.defaultColours.blue};}&.success{background-color:${l(.8,e.defaultColours.green)};border-color:${e.defaultColours.green};}&.warning{background-color:${l(.8,e.defaultColours.amber)};border-color:${e.defaultColours.amber};}&.error{background-color:${l(.8,e.defaultColours.red)};border-color:${e.defaultColours.red};}`;exports.CalloutStyled=u;
 //# sourceMappingURL=Callout.styled.js.map

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

@@ -1 +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"],"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"}
+{"version":3,"file":"Callout.styled.js","sources":["../../../../node_modules/polished/lib/color/transparentize.js","../../../../src/components/Callout/Callout.styled.tsx"],"sourcesContent":["\"use strict\";\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\n\nvar _curry = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require(\"../internalHelpers/_curry\"));\n\nvar _guard = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require(\"../internalHelpers/_guard\"));\n\nvar _rgba = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require(\"./rgba\"));\n\nvar _parseToRgb = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require(\"./parseToRgb\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\n/**\n * Decreases the opacity of a color. Its range for the amount is between 0 to 1.\n *\n *\n * @example\n * // Styles as object usage\n * const styles = {\n *   background: transparentize(0.1, '#fff');\n *   background: transparentize(0.2, 'hsl(0, 0%, 100%)'),\n *   background: transparentize('0.5', 'rgba(255, 0, 0, 0.8)'),\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n *   background: ${transparentize(0.1, '#fff')};\n *   background: ${transparentize(0.2, 'hsl(0, 0%, 100%)')},\n *   background: ${transparentize('0.5', 'rgba(255, 0, 0, 0.8)')},\n * `\n *\n * // CSS in JS Output\n *\n * element {\n *   background: \"rgba(255,255,255,0.9)\";\n *   background: \"rgba(255,255,255,0.8)\";\n *   background: \"rgba(255,0,0,0.3)\";\n * }\n */\nfunction transparentize(amount, color) {\n  if (color === 'transparent') return color;\n  var parsedColor = (0, _parseToRgb[\"default\"])(color);\n  var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;\n\n  var colorWithAlpha = _extends({}, parsedColor, {\n    alpha: (0, _guard[\"default\"])(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)\n  });\n\n  return (0, _rgba[\"default\"])(colorWithAlpha);\n} // prettier-ignore\n\n\nvar curriedTransparentize = /*#__PURE__*/(0, _curry[\"default\"]\n/* ::<number | string, string, string> */\n)(transparentize);\nvar _default = curriedTransparentize;\nexports[\"default\"] = _default;\nmodule.exports = exports.default;","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"],"names":["exports","_curry","_interopRequireDefault","require$$0","_guard","require$$1","_rgba","require$$2","_parseToRgb","require$$3","obj","__esModule","_extends","Object","assign","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","this","transparentize","amount","color","parsedColor","alpha","colorWithAlpha","parseFloat","toFixed","_default","module","default","CalloutStyled","styled","div","defaultColours","blue","green","amber","red"],"mappings":"mTAEAA,cAAqB,EACrBA,EAAO,aAAc,MAEjBC,eAAsBC,EAAqCC,kBAE3DC,eAAsBF,EAAqCG,kBAE3DC,eAAqBJ,EAAqCK,gBAE1DC,eAA2BN,EAAqCO,+BAE3DP,EAAuBQ,UAAcA,GAAOA,EAAIC,WAAaD,EAAM,SAAaA,YAEhFE,WAAaA,EAAWC,OAAOC,QAAU,SAAUC,OAAe,IAAIC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,KAAMG,EAASF,UAAUD,OAAS,IAAII,KAAOD,EAAcN,OAAOQ,UAAUC,eAAeC,KAAKJ,EAAQC,KAAQL,EAAOK,GAAOD,EAAOC,WAAmBL,IAA2BS,MAAMC,KAAMR,oBA6BvSS,EAAeC,EAAQC,MAChB,gBAAVA,EAAyB,OAAOA,MAChCC,GAAc,EAAIrB,EAAW,SAAaoB,GAC1CE,EAAqC,iBAAtBD,EAAYC,MAAqBD,EAAYC,MAAQ,EAEpEC,EAAiBnB,EAAS,GAAIiB,EAAa,CAC7CC,OAAO,EAAI1B,EAAM,SAAa,EAAG,IAAa,IAAR0B,EAAmC,IAArBE,WAAWL,IAAeM,QAAQ,GAAK,cAGtF,EAAI3B,EAAK,SAAayB,OAO3BG,gBAHqC,EAAIjC,EAAM,SAEjDyB,GAEF1B,EAAO,QAAckC,EACrBC,UAAiBnC,EAAQoC,oFC1DZC,EAAgBC,UAAOC,2MASPb,EAAe,GAAMc,iBAAeC,sBACpCD,iBAAeC,oCAIff,EAAe,GAAMc,iBAAeE,uBACpCF,iBAAeE,qCAIfhB,EAAe,GAAMc,iBAAeG,uBACpCH,iBAAeG,mCAIfjB,EAAe,GAAMc,iBAAeI,qBACpCJ,iBAAeI"}

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("../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;
+"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"),u=require("./FormGenerator.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../Typography/Text.js"),require("../../Callout/Callout.styled.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__*/s(r);const l=i.default.forwardRef(((r,s)=>{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=[u.generateFormThroughConfig(a,n,l),d]),i.default.createElement(e.Element,Object.assign({as:o.FormWrapperStyled,ref:s,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/FormWrapper/FormWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormWrapper.js","sources":["../../../../../src/components/Form/FormWrapper/FormWrapper.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../../Element/Element\";\nimport { CommonAndHTMLProps, SpacingTypes } from \"../../Element/constants\";\nimport { Callout } from \"../../Callout/Callout\";\n\nimport { FormWrapperStyled } from \"./FormWrapper.styled\";\nimport { FormFieldsConfig, generateFormThroughConfig } from \"./FormGenerator\";\n\n// prettier-ignore\nexport interface FormWrapperCustomProps {\n    spacing        ? : SpacingTypes;\n    fields         ? : FormFieldsConfig[];\n    onFieldsChange ? : React.FormEventHandler;\n    errorText      ? : string;\n}\n\nexport type FormWrapperElementType = HTMLFormElement;\nexport type FormWrapperProps = Omit<CommonAndHTMLProps<FormWrapperElementType>, keyof FormWrapperCustomProps> &\n    FormWrapperCustomProps;\n\nexport const FormWrapper = React.forwardRef(\n    ({ spacing = \"small\", fields, onFieldsChange, children, errorText, ...props }: FormWrapperProps, ref: React.Ref<FormWrapperElementType>) => {\n        let classNames = [];\n\n        if (spacing) {\n            classNames.push(`spacing-${spacing}`);\n        }\n\n        if (fields && fields.length > 0) {\n            children = [generateFormThroughConfig(fields, onFieldsChange, spacing), children];\n        }\n\n        return (\n            <Element<FormWrapperElementType>\n                as={FormWrapperStyled}\n                ref={ref}\n                classNames={classNames}\n                {...props}\n            >\n                {children}\n\n                {errorText && <Callout kind=\"error\">{errorText}</Callout>}\n            </Element>\n        );\n    }\n);\n"],"names":["FormWrapper","React","forwardRef","_a","ref","spacing","fields","onFieldsChange","children","errorText","props","classNames","push","length","generateFormThroughConfig","Element","as","FormWrapperStyled","Callout","kind"],"mappings":"+6CAqBaA,EAAcC,UAAMC,YAC7B,CAACC,EAAgGC,SAAhGC,QAAEA,EAAU,QAAZC,OAAqBA,EAArBC,eAA6BA,EAA7BC,SAA6CA,EAA7CC,UAAuDA,KAAcC,aAArE,kEACOC,EAAa,UAEbN,GACAM,EAAWC,gBAAgBP,KAG3BC,GAAUA,EAAOO,OAAS,IAC1BL,EAAW,CAACM,4BAA0BR,EAAQC,EAAgBF,GAAUG,IAIxEP,wBAACc,yBACGC,GAAIC,oBACJb,IAAKA,EACLO,WAAYA,GACRD,GAEHF,EAEAC,GAAaR,wBAACiB,WAAQC,KAAK,SAASV"}
+{"version":3,"file":"FormWrapper.js","sources":["../../../../../src/components/Form/FormWrapper/FormWrapper.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Element } from \"../../Element/Element\";\nimport { CommonAndHTMLProps, SpacingTypes } from \"../../Element/constants\";\nimport { Callout } from \"../../Callout/Callout\";\n\nimport { FormWrapperStyled } from \"./FormWrapper.styled\";\nimport { FormFieldsConfig, generateFormThroughConfig } from \"./FormGenerator\";\n\n// prettier-ignore\nexport interface FormWrapperCustomProps {\n    spacing        ? : SpacingTypes;\n    fields         ? : FormFieldsConfig[];\n    onFieldsChange ? : React.FormEventHandler;\n    errorText      ? : string;\n}\n\nexport type FormWrapperElementType = HTMLFormElement;\nexport type FormWrapperProps = Omit<CommonAndHTMLProps<FormWrapperElementType>, keyof FormWrapperCustomProps> &\n    FormWrapperCustomProps;\n\nexport const FormWrapper = React.forwardRef(\n    ({ spacing = \"small\", fields, onFieldsChange, children, errorText, ...props }: FormWrapperProps, ref: React.Ref<FormWrapperElementType>) => {\n        let classNames = [];\n\n        if (spacing) {\n            classNames.push(`spacing-${spacing}`);\n        }\n\n        if (fields && fields.length > 0) {\n            children = [generateFormThroughConfig(fields, onFieldsChange, spacing), children];\n        }\n\n        return (\n            <Element<FormWrapperElementType>\n                as={FormWrapperStyled}\n                ref={ref}\n                classNames={classNames}\n                {...props}\n            >\n                {children}\n\n                {errorText && <Callout kind=\"error\">{errorText}</Callout>}\n            </Element>\n        );\n    }\n);\n"],"names":["FormWrapper","React","forwardRef","_a","ref","spacing","fields","onFieldsChange","children","errorText","props","classNames","push","length","generateFormThroughConfig","Element","as","FormWrapperStyled","Callout","kind"],"mappings":"g4CAqBaA,EAAcC,UAAMC,YAC7B,CAACC,EAAgGC,SAAhGC,QAAEA,EAAU,QAAZC,OAAqBA,EAArBC,eAA6BA,EAA7BC,SAA6CA,EAA7CC,UAAuDA,KAAcC,aAArE,kEACOC,EAAa,UAEbN,GACAM,EAAWC,gBAAgBP,KAG3BC,GAAUA,EAAOO,OAAS,IAC1BL,EAAW,CAACM,4BAA0BR,EAAQC,EAAgBF,GAAUG,IAIxEP,wBAACc,yBACGC,GAAIC,oBACJb,IAAKA,EACLO,WAAYA,GACRD,GAEHF,EAEAC,GAAaR,wBAACiB,WAAQC,KAAK,SAASV"}

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 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;
+"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:${e=>e.theme.sidebar.header.logoWidth};height:${e=>e.theme.sidebar.header.iconWidth};}}${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=l;
 //# 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\";\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"}
+{"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   : ${(props : SidebarWrapperProps) => props.theme.sidebar.header.logoWidth};\n                height  : ${(props : SidebarWrapperProps) => props.theme.sidebar.header.iconWidth};\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","header","logoWidth","iconWidth","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,qFAKmBT,GAAgCA,EAAMC,MAAMC,QAAQQ,OAAOC,oBAC3DX,GAAgCA,EAAMC,MAAMC,QAAQQ,OAAOE,eAI9EC,2DAKAC,6BAA2BC,6BAA2BF,sIAO9Bb,GAA+BA,EAAMC,MAAMC,QAAQM,YAAYQ,MAAMZ,YACrEJ,GAA+BA,EAAMC,MAAMC,QAAQM,YAAYQ,MAAMC,sEAK7FC,8DAKSlB,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMC,QAAQW,6BAGrDjB,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMC,QAAQW,yBAErEjB,GAAgCA,EAAMC,MAAMC,QAAQG,MAAMc,QAAQF,mEAK/DjB,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMe,WAAWhB,0KAYtDJ,GAA+BA,EAAMC,MAAMC,QAAQG,MAAMe,WAAWC,gDAKlFrB,GAAgCA,EAAMC,MAAMC,QAAQoB,MAAMC,QAAQC,SAASC,6CAKjFzB,GAAgCA,EAAMC,MAAMC,QAAQoB,MAAMI,OAAOF,SAASpB,eAG3EJ,GAAgCA,EAAMC,MAAMC,QAAQG,MAAMe,WAAWH"}

package/dist/cjs/components/Toast/ToastItem/ToastItem.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { CommonAndHTMLProps } from "../../Element/constants";
+export interface ToastItemCustomProps {
+    show?: boolean;
+    timeout?: number;
+    onCloseCallback: () => void;
+}
+export declare type ToastItemElementType = HTMLDivElement;
+export declare type ToastItemProps = Omit<CommonAndHTMLProps<ToastItemElementType>, keyof ToastItemCustomProps> & ToastItemCustomProps;
+export declare const ToastItem: React.ForwardRefExoticComponent<Omit<CommonAndHTMLProps<HTMLDivElement>, keyof ToastItemCustomProps> & ToastItemCustomProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/Toast/ToastItem/ToastItem.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../external/Element.js"),r=require("react"),t=require("./ToastItem.styled.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("styled-components"),require("../ToastsWrapper/ToastsWrapper.styled.js"),require("../../Sidebar/SidebarWrapper/SidebarWrapper.styled.js"),require("../../Sidebar/SidebarHeader/SidebarHeader.styled.js"),require("../../Sidebar/SidebarItem/SidebarItem.styled.js"),require("../../Sidebar/SidebarItemText/SidebarItemText.styled.js"),require("../../Sidebar/SidebarItemIcon/SidebarItemIcon.styled.js"),require("../../Sidebar/SidebarFooter/SidebarFooter.styled.js"),require("../../ContentWrapper/ContentWrapper.styled.js");var s=/*#__PURE__*/a(r);const i=s.default.forwardRef(((a,i)=>{var{show:d,children:o,timeout:n,onCloseCallback:l}=a,u=e.__rest(a,["show","children","timeout","onCloseCallback"]);const[b,c]=r.useState(d);r.useEffect((()=>{d&&c(!0);const e=d?setTimeout((()=>{l()}),null!=n?n:4e3):void 0;return()=>{clearTimeout(e)}}),[d]);return b&&s.default.createElement(e.Element,Object.assign({as:t.ToastItemStyled,classNames:[d?"visible":""],onTransitionEnd:()=>{d||c(!1)},padding:"nano"},u),o)}));exports.ToastItem=i;
+//# sourceMappingURL=ToastItem.js.map

package/dist/cjs/components/Toast/ToastItem/ToastItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastItem.js","sources":["../../../../../src/components/Toast/ToastItem/ToastItem.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\n\nimport { Element } from \"../../Element/Element\";\nimport { CommonAndHTMLProps } from \"../../Element/constants\";\n\nimport { ToastItemStyled } from \"./ToastItem.styled\";\n\n// prettier-ignore\nexport interface ToastItemCustomProps {\n    show            ? : boolean;\n    timeout         ? : number;\n    onCloseCallback   : () => void;\n}\n\nexport type ToastItemElementType = HTMLDivElement;\nexport type ToastItemProps = Omit<CommonAndHTMLProps<ToastItemElementType>, keyof ToastItemCustomProps> & ToastItemCustomProps;\n\nexport const ToastItem = React.forwardRef(\n    (\n        { show, children, timeout, onCloseCallback, ...props }: ToastItemProps,\n        ref: React.Ref<ToastItemElementType>\n    ) => {\n        let classNames: string[] = [];\n        const [isVisible, setIsVisible] = useState<boolean>(show);\n\n        useEffect(() => {\n            if (show) { setIsVisible(true); }\n\n            const timer = show\n                ? setTimeout(() => {\n                    onCloseCallback();\n                }, timeout ?? 4000)\n                : undefined;\n\n            return () => {\n                clearTimeout(timer);\n            };\n        }, [show]);\n\n        const onTransitionEnd = () => {\n            if (!show) setIsVisible(false);\n        };\n\n        return (\n            isVisible && (\n                <Element<ToastItemElementType>\n                    as={ToastItemStyled}\n                    classNames={[...classNames, show ? \"visible\" : \"\"]}\n                    onTransitionEnd={onTransitionEnd}\n                    padding=\"nano\"\n                    {...props}\n                >\n                    {children}\n                </Element>\n            )\n        );\n    }\n);\n"],"names":["ToastItem","React","forwardRef","_a","ref","show","children","timeout","onCloseCallback","props","isVisible","setIsVisible","useState","useEffect","timer","setTimeout","undefined","clearTimeout","Element","as","ToastItemStyled","classNames","onTransitionEnd","padding"],"mappings":"wxBAiBaA,EAAYC,UAAMC,YAC3B,CACIC,EACAC,SADAC,KAAEA,EAAFC,SAAQA,EAARC,QAAkBA,EAAlBC,gBAA2BA,KAAoBC,aAA/C,uDAIOC,EAAWC,GAAgBC,WAAkBP,GAEpDQ,aAAU,KACFR,GAAQM,GAAa,SAEnBG,EAAQT,EACRU,YAAW,KACTP,MACDD,MAAAA,EAAAA,EAAW,UACZS,QAEC,KACHC,aAAaH,MAElB,CAACT,WAOAK,GACIT,wBAACiB,yBACGC,GAAIC,kBACJC,WAAY,CAAgBhB,EAAO,UAAY,IAC/CiB,gBATY,KACfjB,GAAMM,GAAa,IAShBY,QAAQ,QACJd,GAEHH"}

package/dist/cjs/components/Toast/ToastItem/ToastItem.stories.d.ts

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

package/dist/cjs/components/Toast/ToastItem/ToastItem.styled.d.ts

@@ -0,0 +1 @@
+export declare const ToastItemStyled: import("styled-components").StyledComponent<"div", any, Omit<import("../../Element/constants").CommonAndHTMLProps<HTMLDivElement>, keyof import("./ToastItem").ToastItemCustomProps> & import("./ToastItem").ToastItemCustomProps, never>;

package/dist/cjs/components/Toast/ToastItem/{Toast.styled.js → ToastItem.styled.js}

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../ToastsWrapper/ToastsWrapper.styled.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../Sidebar/SidebarWrapper/SidebarWrapper.styled.js"),require("../../Sidebar/SidebarHeader/SidebarHeader.styled.js"),require("../../Sidebar/SidebarItem/SidebarItem.styled.js"),require("../../Sidebar/SidebarItemText/SidebarItemText.styled.js"),require("../../Sidebar/SidebarItemIcon/SidebarItemIcon.styled.js"),require("../../Sidebar/SidebarFooter/SidebarFooter.styled.js"),require("../../ContentWrapper/ContentWrapper.styled.js");const a=/*#__PURE__*/r(e).default.div.withConfig({displayName:"ToastStyled",componentId:"-cbblp7"})`position:relative;display:flex;width:fit-content;height:fit-content;border-radius:${e=>e.theme.inputField.default.borderRadius};background-color:${e=>e.theme.toast.bg};transition:all 0.4s;padding:8px 16px;p{color:${e=>e.theme.toast.text};}${t.ToastsWrapperStyled}.top &{transform:translateY(-8vh);}${t.ToastsWrapperStyled}.top &.visible{transform:translateY(8vh);}${t.ToastsWrapperStyled}.bottom &{transform:translateY(8vh);}${t.ToastsWrapperStyled}.bottom &.visible{transform:translateY(-8vh);}`;exports.ToastStyled=a;
-//# sourceMappingURL=Toast.styled.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../ToastsWrapper/ToastsWrapper.styled.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../Sidebar/SidebarWrapper/SidebarWrapper.styled.js"),require("../../Sidebar/SidebarHeader/SidebarHeader.styled.js"),require("../../Sidebar/SidebarItem/SidebarItem.styled.js"),require("../../Sidebar/SidebarItemText/SidebarItemText.styled.js"),require("../../Sidebar/SidebarItemIcon/SidebarItemIcon.styled.js"),require("../../Sidebar/SidebarFooter/SidebarFooter.styled.js"),require("../../ContentWrapper/ContentWrapper.styled.js");const a=/*#__PURE__*/r(e).default.div.withConfig({displayName:"ToastItemStyled",componentId:"-13j8mod"})`position:relative;display:flex;width:fit-content;height:fit-content;border-radius:${e=>e.theme.inputField.default.borderRadius};background-color:${e=>e.theme.toast.bg};transition:all 0.4s;padding:8px 16px;p{color:${e=>e.theme.toast.text};}${t.ToastsWrapperStyled}.top &{transform:translateY(-8vh);}${t.ToastsWrapperStyled}.top &.visible{transform:translateY(8vh);}${t.ToastsWrapperStyled}.bottom &{transform:translateY(8vh);}${t.ToastsWrapperStyled}.bottom &.visible{transform:translateY(-8vh);}`;exports.ToastItemStyled=a;
+//# sourceMappingURL=ToastItem.styled.js.map

package/dist/cjs/components/Toast/ToastItem/ToastItem.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastItem.styled.js","sources":["../../../../../src/components/Toast/ToastItem/ToastItem.styled.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { ToastItemProps } from \"./ToastItem\";\nimport { ToastsWrapperStyled } from \"../ToastsWrapper/ToastsWrapper.styled\";\n\n\nexport const ToastItemStyled = styled.div`\n    position         : relative;\n    display          : flex;\n    width            : fit-content;\n    height           : fit-content;\n    border-radius    : ${(props : ToastItemProps) => props.theme.inputField.default.borderRadius};\n    background-color : ${(props : ToastItemProps) => props.theme.toast.bg};\n    transition       : all 0.4s;\n    padding          : 8px 16px;\n\n    p {\n        color : ${(props : ToastItemProps) => props.theme.toast.text};\n    }\n\n    //  TOP TOAST  ////////////////////////////////////////////////////////////\n    ${ToastsWrapperStyled}.top & {\n        transform : translateY(-8vh);\n    }\n\n    ${ToastsWrapperStyled}.top &.visible {\n        transform : translateY(8vh);\n    }\n\n    //  BOTTOM TOAST  /////////////////////////////////////////////////////////\n    ${ToastsWrapperStyled}.bottom & {\n        transform : translateY(8vh);\n    }\n\n    ${ToastsWrapperStyled}.bottom &.visible {\n        transform : translateY(-8vh);\n    }\n`;\n"],"names":["ToastItemStyled","div","props","theme","inputField","default","borderRadius","toast","bg","text","ToastsWrapperStyled"],"mappings":"oqBAMaA,4BAAyBC,2JAKZC,GAA2BA,EAAMC,MAAMC,WAAWC,QAAQC,iCAC1DJ,GAA2BA,EAAMC,MAAMI,MAAMC,mDAKpDN,GAA2BA,EAAMC,MAAMI,MAAME,SAI1DC,2DAIAA,kEAKAA,6DAIAA"}