@bikdotai/bik-component-library 0.0.852 → 0.0.853

package/dist/esm/components/zeroState/ZeroState.js

@@ -1,11 +1,11 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
 import d from "styled-components";
-import { TitleRegular as f, BodyCaption as u, TitleSmall as y } from "../TypographyStyle.js";
+import { TitleRegular as u, BodyCaption as y, TitleSmall as x } from "../TypographyStyle.js";
 import { COLORS as e } from "../../constants/Theme.js";
-import x from "../../assets/icons/alert.svg.js";
-import { Spinner as h } from "../spinner/Spinner.js";
-import { Button as g } from "../button/Button.js";
-const b = d.div`
+import h from "../../assets/icons/alert.svg.js";
+import { Spinner as g } from "../spinner/Spinner.js";
+import { Button as b } from "../button/Button.js";
+const S = d.div`
 	background: ${e.surface.standard};
 	display: flex;
 	flex-direction: column;
@@ -13,7 +13,7 @@ const b = d.div`
 	justify-content: center;
 	flex: 1;
 	gap: 6px;
-`, S = d.div`
+`, j = d.div`
 	background: ${e.background.base};
 	width: 48px;
 	height: 48px;
@@ -22,25 +22,26 @@ const b = d.div`
 	align-items: center;
 	justify-content: center;
 	border-radius: 24px;
-`, T = ({
+`, W = ({
   subTitle: i,
   title: a,
   IconHolderStyle: s,
   style: m,
   isLoading: n,
   containerWidth: l,
+  subTitleMaxWidth: p = 184,
   ...o
 }) => {
-  let c = f;
+  let c = u;
   const r = l ? parseFloat(l) : 0;
-  return r && !isNaN(r) && r <= 150 && (c = y), /* @__PURE__ */ p(b, { style: m ?? {}, children: [
-    n ? /* @__PURE__ */ t(h, { size: "large", color: e.stroke.brand }) : /* @__PURE__ */ t(
-      S,
+  return r && !isNaN(r) && r <= 150 && (c = x), /* @__PURE__ */ f(S, { style: m ?? {}, children: [
+    n ? /* @__PURE__ */ t(g, { size: "large", color: e.stroke.brand }) : /* @__PURE__ */ t(
+      j,
       {
         "data-test": "zero-state-icon-holder",
         style: s ?? {},
         children: o?.Icon || /* @__PURE__ */ t(
-          x,
+          h,
           {
             color: e.content.placeholder,
             height: 24,
@@ -59,12 +60,12 @@ const b = d.div`
       }
     ),
     !!i && !n && /* @__PURE__ */ t(
-      u,
+      y,
       {
         style: {
           color: e.content.secondary,
           textAlign: "center",
-          maxWidth: 184
+          maxWidth: p
         },
         children: i
       }
@@ -73,12 +74,12 @@ const b = d.div`
       "div",
       {
         style: o?.buttonWidth ? { width: o?.buttonWidth, display: "flex" } : {},
-        children: /* @__PURE__ */ t(g, { ...o?.actionButton })
+        children: /* @__PURE__ */ t(b, { ...o?.actionButton })
       }
     )
   ] });
 };
 export {
-  T as ZeroState
+  W as ZeroState
 };
 //# sourceMappingURL=ZeroState.js.map

package/dist/esm/components/zeroState/ZeroState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZeroState.js","sources":["../../../../src/components/zeroState/ZeroState.tsx"],"sourcesContent":["// import SearchIcon from '@bik-icons/search.svg';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { Spinner } from '@src/components/spinner';\nimport {\n\tBodyCaption,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport AlertIcon from '../../assets/icons/alert.svg';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 1;\n\tgap: 6px;\n`;\n\nconst IconHolder = styled.div`\n\tbackground: ${COLORS.background.base};\n\twidth: 48px;\n\theight: 48px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 24px;\n`;\n\nexport const ZeroState: React.FC<{\n\tisLoading?: boolean;\n\ttitle: string;\n\tsubTitle?: string;\n\tIconHolderStyle?: React.CSSProperties;\n\tstyle?: React.CSSProperties /** now this component is extendable through styled-component */;\n\tactionButton?: ButtonProps;\n\tbuttonWidth?: number;\n\tIcon?: React.ReactNode;\n\tcontainerWidth?: string;\n}> = ({\n\tsubTitle,\n\ttitle,\n\tIconHolderStyle,\n\tstyle,\n\tisLoading,\n\tcontainerWidth,\n\t...otherProps\n}) => {\n\tlet TitleTypography = TitleRegular;\n\tconst numericWidth = containerWidth ? parseFloat(containerWidth) : 0;\n\n\tif (numericWidth && !isNaN(numericWidth) && numericWidth <= 150) {\n\t\tTitleTypography = TitleSmall;\n\t}\n\treturn (\n\t\t<Container style={style ?? {}}>\n\t\t\t{isLoading ? (\n\t\t\t\t<Spinner size={'large'} color={COLORS.stroke.brand} />\n\t\t\t) : (\n\t\t\t\t<IconHolder\n\t\t\t\t\tdata-test=\"zero-state-icon-holder\"\n\t\t\t\t\tstyle={IconHolderStyle ?? {}}\n\t\t\t\t>\n\t\t\t\t\t{otherProps?.Icon || (\n\t\t\t\t\t\t<AlertIcon\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</IconHolder>\n\t\t\t)}\n\n\t\t\t<TitleTypography\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{isLoading ? 'Loading...' : title || 'No results found'}\n\t\t\t</TitleTypography>\n\t\t\t{!!subTitle && !isLoading && (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\tmaxWidth: 184,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{subTitle}\n\t\t\t\t</BodyCaption>\n\t\t\t)}\n\t\t\t{!!otherProps?.actionButton && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={\n\t\t\t\t\t\totherProps?.buttonWidth\n\t\t\t\t\t\t\t? { width: otherProps?.buttonWidth, display: 'flex' }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Button {...otherProps?.actionButton} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n"],"names":["Container","styled","COLORS","IconHolder","ZeroState","subTitle","title","IconHolderStyle","style","isLoading","containerWidth","otherProps","TitleTypography","TitleRegular","numericWidth","TitleSmall","jsxs","jsx","Spinner","AlertIcon","BodyCaption","Button"],"mappings":";;;;;;;AAcA,MAAMA,IAAYC,EAAO;AAAA,eACVC,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShCC,IAAaF,EAAO;AAAA,eACXC,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUxBE,IAUR,CAAC;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,MAAIC,IAAkBC;AACtB,QAAMC,IAAeJ,IAAiB,WAAWA,CAAc,IAAI;AAEnE,SAAII,KAAgB,CAAC,MAAMA,CAAY,KAAKA,KAAgB,QAC3DF,IAAkBG,IAGlB,gBAAAC,EAAChB,GAAA,EAAU,OAAOQ,KAAS,CAAA,GACzB,UAAA;AAAA,IAAAC,IACA,gBAAAQ,EAACC,KAAQ,MAAM,SAAS,OAAOhB,EAAO,OAAO,OAAO,IAEpD,gBAAAe;AAAA,MAACd;AAAA,MAAA;AAAA,QACA,aAAU;AAAA,QACV,OAAOI,KAAmB,CAAA;AAAA,QAEzB,aAAY,QACZ,gBAAAU;AAAA,UAACE;AAAAA,UAAA;AAAA,YACA,OAAOjB,EAAO,QAAQ;AAAA,YACtB,QAAQ;AAAA,YACR,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,IAKH,gBAAAe;AAAA,MAACL;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,OAAOV,EAAO,QAAQ;AAAA,QAAA;AAAA,QAGtB,UAAAO,IAAY,eAAeH,KAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAErC,CAAC,CAACD,KAAY,CAACI,KACf,gBAAAQ;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,OAAOlB,EAAO,QAAQ;AAAA,UACtB,WAAW;AAAA,UACX,UAAU;AAAA,QAAA;AAAA,QAGV,UAAAG;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF,CAAC,CAACM,GAAY,gBACd,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,OACCN,GAAY,cACT,EAAE,OAAOA,GAAY,aAAa,SAAS,OAAA,IAC3C,CAAA;AAAA,QAGJ,UAAA,gBAAAM,EAACI,GAAA,EAAQ,GAAGV,GAAY,aAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,GAEF;AAEF;"}
+{"version":3,"file":"ZeroState.js","sources":["../../../../src/components/zeroState/ZeroState.tsx"],"sourcesContent":["// import SearchIcon from '@bik-icons/search.svg';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { Spinner } from '@src/components/spinner';\nimport {\n\tBodyCaption,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport AlertIcon from '../../assets/icons/alert.svg';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 1;\n\tgap: 6px;\n`;\n\nconst IconHolder = styled.div`\n\tbackground: ${COLORS.background.base};\n\twidth: 48px;\n\theight: 48px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 24px;\n`;\n\nexport const ZeroState: React.FC<{\n\tisLoading?: boolean;\n\ttitle: string;\n\tsubTitle?: string;\n\tIconHolderStyle?: React.CSSProperties;\n\tstyle?: React.CSSProperties /** now this component is extendable through styled-component */;\n\tactionButton?: ButtonProps;\n\tbuttonWidth?: number;\n\tIcon?: React.ReactNode;\n\tcontainerWidth?: string;\n\t/** Caps the subtitle width (px). Defaults to 184; widen for longer copy. */\n\tsubTitleMaxWidth?: number;\n}> = ({\n\tsubTitle,\n\ttitle,\n\tIconHolderStyle,\n\tstyle,\n\tisLoading,\n\tcontainerWidth,\n\tsubTitleMaxWidth = 184,\n\t...otherProps\n}) => {\n\tlet TitleTypography = TitleRegular;\n\tconst numericWidth = containerWidth ? parseFloat(containerWidth) : 0;\n\n\tif (numericWidth && !isNaN(numericWidth) && numericWidth <= 150) {\n\t\tTitleTypography = TitleSmall;\n\t}\n\treturn (\n\t\t<Container style={style ?? {}}>\n\t\t\t{isLoading ? (\n\t\t\t\t<Spinner size={'large'} color={COLORS.stroke.brand} />\n\t\t\t) : (\n\t\t\t\t<IconHolder\n\t\t\t\t\tdata-test=\"zero-state-icon-holder\"\n\t\t\t\t\tstyle={IconHolderStyle ?? {}}\n\t\t\t\t>\n\t\t\t\t\t{otherProps?.Icon || (\n\t\t\t\t\t\t<AlertIcon\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</IconHolder>\n\t\t\t)}\n\n\t\t\t<TitleTypography\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{isLoading ? 'Loading...' : title || 'No results found'}\n\t\t\t</TitleTypography>\n\t\t\t{!!subTitle && !isLoading && (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\tmaxWidth: subTitleMaxWidth,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{subTitle}\n\t\t\t\t</BodyCaption>\n\t\t\t)}\n\t\t\t{!!otherProps?.actionButton && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={\n\t\t\t\t\t\totherProps?.buttonWidth\n\t\t\t\t\t\t\t? { width: otherProps?.buttonWidth, display: 'flex' }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Button {...otherProps?.actionButton} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n"],"names":["Container","styled","COLORS","IconHolder","ZeroState","subTitle","title","IconHolderStyle","style","isLoading","containerWidth","subTitleMaxWidth","otherProps","TitleTypography","TitleRegular","numericWidth","TitleSmall","jsxs","jsx","Spinner","AlertIcon","BodyCaption","Button"],"mappings":";;;;;;;AAcA,MAAMA,IAAYC,EAAO;AAAA,eACVC,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShCC,IAAaF,EAAO;AAAA,eACXC,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUxBE,IAYR,CAAC;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,GAAGC;AACJ,MAAM;AACL,MAAIC,IAAkBC;AACtB,QAAMC,IAAeL,IAAiB,WAAWA,CAAc,IAAI;AAEnE,SAAIK,KAAgB,CAAC,MAAMA,CAAY,KAAKA,KAAgB,QAC3DF,IAAkBG,IAGlB,gBAAAC,EAACjB,GAAA,EAAU,OAAOQ,KAAS,CAAA,GACzB,UAAA;AAAA,IAAAC,IACA,gBAAAS,EAACC,KAAQ,MAAM,SAAS,OAAOjB,EAAO,OAAO,OAAO,IAEpD,gBAAAgB;AAAA,MAACf;AAAA,MAAA;AAAA,QACA,aAAU;AAAA,QACV,OAAOI,KAAmB,CAAA;AAAA,QAEzB,aAAY,QACZ,gBAAAW;AAAA,UAACE;AAAAA,UAAA;AAAA,YACA,OAAOlB,EAAO,QAAQ;AAAA,YACtB,QAAQ;AAAA,YACR,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,IAKH,gBAAAgB;AAAA,MAACL;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,OAAOX,EAAO,QAAQ;AAAA,QAAA;AAAA,QAGtB,UAAAO,IAAY,eAAeH,KAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAErC,CAAC,CAACD,KAAY,CAACI,KACf,gBAAAS;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,OAAOnB,EAAO,QAAQ;AAAA,UACtB,WAAW;AAAA,UACX,UAAUS;AAAA,QAAA;AAAA,QAGV,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF,CAAC,CAACO,GAAY,gBACd,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,OACCN,GAAY,cACT,EAAE,OAAOA,GAAY,aAAa,SAAS,OAAA,IAC3C,CAAA;AAAA,QAGJ,UAAA,gBAAAM,EAACI,GAAA,EAAQ,GAAGV,GAAY,aAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,GAEF;AAEF;"}