@bikdotai/bik-component-library 0.0.836-beta.1 → 0.0.836-beta.2

package/dist/cjs/components/checkBox/CheckBox.styled.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("../../constants/Theme.js"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=s(i),c=o.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),s=require("../../utils/rgba.js"),t=require("../../constants/Theme.js"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=c(i),d=o.default.div`
 	display: inline-flex;
 	gap: 8px;
 	align-items: center;
@@ -8,7 +8,7 @@
 				background: ${t.COLORS.surface.subdued};
 			}
 		`}
-`,d=o.default.div`
+`,r=o.default.div`
 	width: ${e=>e.size==="XS"?12:e.size==="SMALL"?16:18}px;
 	height: ${e=>e.size==="XS"?12:e.size==="SMALL"?16:18}px;
 	border-radius: 4px;
@@ -32,8 +32,8 @@
 		`}
 	${e=>e.clicked&&!e.isDisabled&&i.css`
 			outline: 3px solid
-				${e.checked?e.activeColor??t.COLORS.stroke.positive.lightAlt:t.COLORS.surface.hovered};
+				${e.checked?e.activeColor?s.rgba(e.activeColor,.24):t.COLORS.stroke.positive.lightAlt:t.COLORS.surface.hovered};
 			outline-offset: 2px;
 		`}
-`;exports.CheckboxContainer=c;exports.CheckboxIcon=d;
+`;exports.CheckboxContainer=d;exports.CheckboxIcon=r;
 //# sourceMappingURL=CheckBox.styled.js.map

package/dist/cjs/components/checkBox/CheckBox.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' | 'DEFAULT' | 'XS';\n\tborderColor?: string;\n\tactiveColor?: string;\n}>`\n\twidth: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\theight: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t  `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t  `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? props.activeColor ?? COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon"],"mappings":"0NAGaA,EAAoBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,WAO5BC,GAAWA,EAAM,WAAa,UAAY,SAAU;AAAA,GAC5DA,GACFA,EAAM,aACNC,EAAAA;AAAAA;AAAAA,kBAEgBC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,EAGUC,EAAeJ,EAAAA,QAAO;AAAA,UASxBC,GACTA,EAAM,OAAS,KAAO,GAAKA,EAAM,OAAS,QAAU,GAAK,EAAE;AAAA,WACjDA,GACVA,EAAM,OAAS,KAAO,GAAKA,EAAM,OAAS,QAAU,GAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOzDA,GACFA,EAAM,WACHC,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCE,EAAAA,OAAO,QAAQ,QAAQ;AAAA,OAE1BD,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCA,EAAM,aAAe,OAAO;AAAA,MAC9B;AAAA,GACFA,GACFA,EAAM,SACNC,EAAAA;AAAAA;AAAAA,GAEC;AAAA,GACCD,GACFA,EAAM,SACNC,EAAAA;AAAAA,wBACsBC,EAAAA,OAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACCF,GACFA,EAAM,SACN,CAACA,EAAM,YACPC,EAAAA;AAAAA;AAAAA,MAEID,EAAM,QACLA,EAAM,aAAeE,EAAAA,OAAO,OAAO,SAAS,SAC5CA,SAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA"}
+{"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from '@src/utils/rgba';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' | 'DEFAULT' | 'XS';\n\tborderColor?: string;\n\tactiveColor?: string;\n}>`\n\twidth: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\theight: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t  `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t  `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? props.activeColor\n\t\t\t\t\t\t? rgba(props.activeColor, 0.24)\n\t\t\t\t\t\t: COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon","rgba"],"mappings":"2PAIaA,EAAoBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,WAO5BC,GAAWA,EAAM,WAAa,UAAY,SAAU;AAAA,GAC5DA,GACFA,EAAM,aACNC,EAAAA;AAAAA;AAAAA,kBAEgBC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,EAGUC,EAAeJ,EAAAA,QAAO;AAAA,UASxBC,GACTA,EAAM,OAAS,KAAO,GAAKA,EAAM,OAAS,QAAU,GAAK,EAAE;AAAA,WACjDA,GACVA,EAAM,OAAS,KAAO,GAAKA,EAAM,OAAS,QAAU,GAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOzDA,GACFA,EAAM,WACHC,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCE,EAAAA,OAAO,QAAQ,QAAQ;AAAA,OAE1BD,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCA,EAAM,aAAe,OAAO;AAAA,MAC9B;AAAA,GACFA,GACFA,EAAM,SACNC,EAAAA;AAAAA;AAAAA,GAEC;AAAA,GACCD,GACFA,EAAM,SACNC,EAAAA;AAAAA,wBACsBC,EAAAA,OAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACCF,GACFA,EAAM,SACN,CAACA,EAAM,YACPC,EAAAA;AAAAA;AAAAA,MAEID,EAAM,QACLA,EAAM,YACLI,EAAAA,KAAKJ,EAAM,YAAa,GAAI,EAC5BE,EAAAA,OAAO,OAAO,SAAS,SACxBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA"}

package/dist/cjs/utils/rgba.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=(s,e=1)=>{let r=s.replace("#","");r.length===3&&(r=`${r[0]}${r[0]}${r[1]}${r[1]}${r[2]}${r[2]}`);const t=parseInt(r.substring(0,2),16),n=parseInt(r.substring(2,4),16),g=parseInt(r.substring(4,6),16);return e>1&&e<=100&&(e=e/100),`rgba(${t}, ${n}, ${g}, ${e})`};exports.rgba=$;
+//# sourceMappingURL=rgba.js.map

package/dist/cjs/utils/rgba.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rgba.js","sources":["../../../src/utils/rgba.ts"],"sourcesContent":["/**\n * Convert hex string to RGBA color.\n *\n * @see https://gist.github.com/danieliser/b4b24c9f772066bcf0a6\n * @example\n * rgba('#000', 0.5) // rgba(0, 0, 0, 0.5)\n */\nexport const rgba = (hexCode: string, opacity = 1) => {\n\tlet hex = hexCode.replace('#', '');\n\n\tif (hex.length === 3) {\n\t\thex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;\n\t}\n\n\tconst r = parseInt(hex.substring(0, 2), 16);\n\tconst g = parseInt(hex.substring(2, 4), 16);\n\tconst b = parseInt(hex.substring(4, 6), 16);\n\n\t/* Backward compatibility for whole number based opacity values. */\n\tif (opacity > 1 && opacity <= 100) {\n\t\topacity = opacity / 100;\n\t}\n\n\treturn `rgba(${r}, ${g}, ${b}, ${opacity})`;\n};\n"],"names":["rgba","hexCode","opacity","hex","r","g","b"],"mappings":"gFAOO,MAAMA,EAAO,CAACC,EAAiBC,EAAU,IAAM,CACrD,IAAIC,EAAMF,EAAQ,QAAQ,IAAK,EAAE,EAE7BE,EAAI,SAAW,IAClBA,EAAM,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,IAG7D,MAAMC,EAAI,SAASD,EAAI,UAAU,EAAG,CAAC,EAAG,EAAE,EACpCE,EAAI,SAASF,EAAI,UAAU,EAAG,CAAC,EAAG,EAAE,EACpCG,EAAI,SAASH,EAAI,UAAU,EAAG,CAAC,EAAG,EAAE,EAG1C,OAAID,EAAU,GAAKA,GAAW,MAC7BA,EAAUA,EAAU,KAGd,QAAQE,CAAC,KAAKC,CAAC,KAAKC,CAAC,KAAKJ,CAAO,GACzC"}

package/dist/esm/components/checkBox/CheckBox.styled.js

@@ -1,6 +1,7 @@
-import d, { css as i } from "styled-components";
+import r, { css as i } from "styled-components";
+import { rgba as t } from "../../utils/rgba.js";
 import { COLORS as o } from "../../constants/Theme.js";
-const s = d.div`
+const c = r.div`
 	display: inline-flex;
 	gap: 8px;
 	align-items: center;
@@ -10,7 +11,7 @@ const s = d.div`
 				background: ${o.surface.subdued};
 			}
 		`}
-`, l = d.div`
+`, n = r.div`
 	width: ${(e) => e.size === "XS" ? 12 : e.size === "SMALL" ? 16 : 18}px;
 	height: ${(e) => e.size === "XS" ? 12 : e.size === "SMALL" ? 16 : 18}px;
 	border-radius: 4px;
@@ -34,12 +35,12 @@ const s = d.div`
 		`}
 	${(e) => e.clicked && !e.isDisabled && i`
 			outline: 3px solid
-				${e.checked ? e.activeColor ?? o.stroke.positive.lightAlt : o.surface.hovered};
+				${e.checked ? e.activeColor ? t(e.activeColor, 0.24) : o.stroke.positive.lightAlt : o.surface.hovered};
 			outline-offset: 2px;
 		`}
 `;
 export {
-  s as CheckboxContainer,
-  l as CheckboxIcon
+  c as CheckboxContainer,
+  n as CheckboxIcon
 };
 //# sourceMappingURL=CheckBox.styled.js.map

package/dist/esm/components/checkBox/CheckBox.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' | 'DEFAULT' | 'XS';\n\tborderColor?: string;\n\tactiveColor?: string;\n}>`\n\twidth: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\theight: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t  `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t  `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? props.activeColor ?? COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon"],"mappings":";;AAGO,MAAMA,IAAoBC,EAAO;AAAA;AAAA;AAAA;AAAA,WAO7B,CAACC,MAAWA,EAAM,aAAa,YAAY,SAAU;AAAA,GAC7D,CAACA,MACFA,EAAM,eACNC;AAAA;AAAA,kBAEgBC,EAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,GAGUC,IAAeJ,EAAO;AAAA,UASzB,CAACC,MACTA,EAAM,SAAS,OAAO,KAAKA,EAAM,SAAS,UAAU,KAAK,EAAE;AAAA,WAClD,CAACA,MACVA,EAAM,SAAS,OAAO,KAAKA,EAAM,SAAS,UAAU,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAO1D,CAACA,MACFA,EAAM,aACHC;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCE,EAAO,QAAQ,QAAQ;AAAA,SAE1BD;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCA,EAAM,eAAe,OAAO;AAAA,MAC9B;AAAA,GACH,CAACA,MACFA,EAAM,WACNC;AAAA;AAAA,GAEC;AAAA,GACA,CAACD,MACFA,EAAM,WACNC;AAAA,wBACsBC,EAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACA,CAACF,MACFA,EAAM,WACN,CAACA,EAAM,cACPC;AAAA;AAAA,MAEID,EAAM,UACLA,EAAM,eAAeE,EAAO,OAAO,SAAS,WAC5CA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA;"}
+{"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from '@src/utils/rgba';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' | 'DEFAULT' | 'XS';\n\tborderColor?: string;\n\tactiveColor?: string;\n}>`\n\twidth: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\theight: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t  `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t  `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? props.activeColor\n\t\t\t\t\t\t? rgba(props.activeColor, 0.24)\n\t\t\t\t\t\t: COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon","rgba"],"mappings":";;;AAIO,MAAMA,IAAoBC,EAAO;AAAA;AAAA;AAAA;AAAA,WAO7B,CAACC,MAAWA,EAAM,aAAa,YAAY,SAAU;AAAA,GAC7D,CAACA,MACFA,EAAM,eACNC;AAAA;AAAA,kBAEgBC,EAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,GAGUC,IAAeJ,EAAO;AAAA,UASzB,CAACC,MACTA,EAAM,SAAS,OAAO,KAAKA,EAAM,SAAS,UAAU,KAAK,EAAE;AAAA,WAClD,CAACA,MACVA,EAAM,SAAS,OAAO,KAAKA,EAAM,SAAS,UAAU,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAO1D,CAACA,MACFA,EAAM,aACHC;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCE,EAAO,QAAQ,QAAQ;AAAA,SAE1BD;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCA,EAAM,eAAe,OAAO;AAAA,MAC9B;AAAA,GACH,CAACA,MACFA,EAAM,WACNC;AAAA;AAAA,GAEC;AAAA,GACA,CAACD,MACFA,EAAM,WACNC;AAAA,wBACsBC,EAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACA,CAACF,MACFA,EAAM,WACN,CAACA,EAAM,cACPC;AAAA;AAAA,MAEID,EAAM,UACLA,EAAM,cACLI,EAAKJ,EAAM,aAAa,IAAI,IAC5BE,EAAO,OAAO,SAAS,WACxBA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA;"}

package/dist/esm/utils/rgba.js

@@ -0,0 +1,10 @@
+const g = (n, s = 1) => {
+  let r = n.replace("#", "");
+  r.length === 3 && (r = `${r[0]}${r[0]}${r[1]}${r[1]}${r[2]}${r[2]}`);
+  const e = parseInt(r.substring(0, 2), 16), t = parseInt(r.substring(2, 4), 16), $ = parseInt(r.substring(4, 6), 16);
+  return s > 1 && s <= 100 && (s = s / 100), `rgba(${e}, ${t}, ${$}, ${s})`;
+};
+export {
+  g as rgba
+};
+//# sourceMappingURL=rgba.js.map

package/dist/esm/utils/rgba.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rgba.js","sources":["../../../src/utils/rgba.ts"],"sourcesContent":["/**\n * Convert hex string to RGBA color.\n *\n * @see https://gist.github.com/danieliser/b4b24c9f772066bcf0a6\n * @example\n * rgba('#000', 0.5) // rgba(0, 0, 0, 0.5)\n */\nexport const rgba = (hexCode: string, opacity = 1) => {\n\tlet hex = hexCode.replace('#', '');\n\n\tif (hex.length === 3) {\n\t\thex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;\n\t}\n\n\tconst r = parseInt(hex.substring(0, 2), 16);\n\tconst g = parseInt(hex.substring(2, 4), 16);\n\tconst b = parseInt(hex.substring(4, 6), 16);\n\n\t/* Backward compatibility for whole number based opacity values. */\n\tif (opacity > 1 && opacity <= 100) {\n\t\topacity = opacity / 100;\n\t}\n\n\treturn `rgba(${r}, ${g}, ${b}, ${opacity})`;\n};\n"],"names":["rgba","hexCode","opacity","hex","r","g","b"],"mappings":"AAOO,MAAMA,IAAO,CAACC,GAAiBC,IAAU,MAAM;AACrD,MAAIC,IAAMF,EAAQ,QAAQ,KAAK,EAAE;AAEjC,EAAIE,EAAI,WAAW,MAClBA,IAAM,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC;AAG7D,QAAMC,IAAI,SAASD,EAAI,UAAU,GAAG,CAAC,GAAG,EAAE,GACpCE,IAAI,SAASF,EAAI,UAAU,GAAG,CAAC,GAAG,EAAE,GACpCG,IAAI,SAASH,EAAI,UAAU,GAAG,CAAC,GAAG,EAAE;AAG1C,SAAID,IAAU,KAAKA,KAAW,QAC7BA,IAAUA,IAAU,MAGd,QAAQE,CAAC,KAAKC,CAAC,KAAKC,CAAC,KAAKJ,CAAO;AACzC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.836-beta.1",
+	"version": "0.0.836-beta.2",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",