@punkbit/cui 0.0.251-rc.16 → 0.2.0-rc.3

package/dist/cjs/components/CardSecondary/index.cjs

@@ -0,0 +1,119 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styledComponents = require('styled-components');
+const Icon = require('../Icon/index.cjs');
+const Title = require('../Title/index.cjs');
+const Badge = require('../Badge/index.cjs');
+const Text = require('../Text/index.cjs');
+
+const Header = styledComponents.styled.div.withConfig({
+  componentId: "sc-s50ux2-0"
+})(["display:flex;justify-content:space-between;align-items:center;"]);
+const HeaderLeft = styledComponents.styled.div.withConfig({
+  componentId: "sc-s50ux2-1"
+})(["display:flex;align-items:center;gap:", ";h3,svg{color:", ";}"], ({
+  theme
+}) => theme.click.card.secondary.space.gap, ({
+  $disabled,
+  theme
+}) => $disabled == true ? theme.click.global.color.text.muted : theme.click.global.color.text.default);
+const Content = styledComponents.styled.div.withConfig({
+  componentId: "sc-s50ux2-2"
+})(["display:flex;flex-direction:column;flex:1;"]);
+const CustomIcon = styledComponents.styled.img.withConfig({
+  componentId: "sc-s50ux2-3"
+})(["height:", ";width:", ";"], ({
+  theme
+}) => theme.click.image.lg.size.height, ({
+  theme
+}) => theme.click.image.lg.size.width);
+const InfoLink = styledComponents.styled.a.withConfig({
+  componentId: "sc-s50ux2-4"
+})(["display:flex;align-items:center;color:", ";gap:", ";text-decoration:none;"], ({
+  theme
+}) => theme.click.card.secondary.color.link.default, ({
+  theme
+}) => theme.click.card.secondary.space.link.gap);
+const LinkIconContainer = styledComponents.styled(Icon.Icon).withConfig({
+  componentId: "sc-s50ux2-5"
+})(["color:", ";height:", ";width:", ";"], ({
+  theme
+}) => theme.click.card.secondary.color.link.default, ({
+  theme
+}) => theme.click.image.md.size.height, ({
+  theme
+}) => theme.click.image.md.size.width);
+const LinkText = styledComponents.styled(Text.Text).withConfig({
+  componentId: "sc-s50ux2-6"
+})([""]);
+const LinkIcon = styledComponents.styled(LinkIconContainer).withConfig({
+  componentId: "sc-s50ux2-7"
+})([""]);
+const Wrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-s50ux2-8"
+})(["background-color:", ";border-radius:", ";border:", ";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,:focus{background-color:", ";cursor:pointer;", ",", "{color:", ";}}&[aria-disabled='true'],&[aria-disabled='true']:hover,&[aria-disabled='true']:focus,&[aria-disabled='true']:active{pointer-events:none;", "}"], ({
+  theme
+}) => theme.click.card.secondary.color.background.default, ({
+  theme
+}) => theme.click.card.secondary.radii.all, ({
+  theme
+}) => `1px solid ${theme.click.card.secondary.color.stroke.default}`, ({
+  theme
+}) => theme.click.card.secondary.space.all, ({
+  theme
+}) => theme.click.card.secondary.space.gap, ({
+  $hasShadow,
+  theme
+}) => $hasShadow ? theme.shadow[1] : "none", ({
+  theme
+}) => theme.click.card.secondary.color.background.hover, LinkText, LinkIcon, ({
+  theme
+}) => theme.click.card.secondary.color.link.hover, ({
+  theme
+}) => `
+      background-color: ${theme.click.card.secondary.color.background.disabled};
+      color: ${theme.click.card.secondary.color.title.disabled};
+      border: 1px solid ${theme.click.card.secondary.color.stroke.disabled};
+      cursor: not-allowed;
+
+      ${LinkText},
+      ${LinkIcon} {
+        color: ${theme.click.card.secondary.color.link.disabled};
+      }
+    `);
+const CardSecondary = ({
+  title,
+  icon,
+  iconUrl,
+  badgeState,
+  badgeText = "",
+  hasShadow = false,
+  disabled = false,
+  description,
+  infoUrl,
+  infoText,
+  infoIcon = "chevron-right",
+  infoAssetSize = "md",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { "aria-disabled": disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(HeaderLeft, { $disabled: disabled, children: [
+        iconUrl ? /* @__PURE__ */ jsxRuntime.jsx(CustomIcon, { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, "aria-hidden": true, size: "lg" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Title.Title, { type: "h3", children: title })
+      ] }),
+      badgeText && /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { text: badgeText, state: disabled == true ? "disabled" : badgeState })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "muted", children: description }) }),
+    (infoUrl || infoText) && /* @__PURE__ */ jsxRuntime.jsxs(InfoLink, { href: disabled ? void 0 : infoUrl, as: disabled || !infoUrl || infoUrl.length === 0 ? "div" : "a", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LinkText, { children: infoText }),
+      /* @__PURE__ */ jsxRuntime.jsx(LinkIcon, { size: infoAssetSize, name: infoIcon })
+    ] })
+  ] });
+};
+
+exports.CardSecondary = CardSecondary;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/CardSecondary/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/CardSecondary/CardSecondary.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { Badge } from '@/components/Badge';\nimport { Icon } from '@/components/Icon';\nimport { Title } from '@/components/Title';\nimport { Text } from '@/components/Text';\nimport { CardSecondaryProps } from './CardSecondary.types';\n\nconst Header = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n`;\n\nconst HeaderLeft = styled.div<{ $disabled?: boolean }>`\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.click.card.secondary.space.gap};\n\n  h3,\n  svg {\n    color: ${({ $disabled, theme }) =>\n      $disabled == true\n        ? theme.click.global.color.text.muted\n        : theme.click.global.color.text.default};\n  }\n`;\n\nconst Content = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n`;\n\nconst CustomIcon = styled.img`\n  height: ${({ theme }) => theme.click.image.lg.size.height};\n  width: ${({ theme }) => theme.click.image.lg.size.width};\n`;\n\nconst InfoLink = styled.a`\n  display: flex;\n  align-items: center;\n  color: ${({ theme }) => theme.click.card.secondary.color.link.default};\n  gap: ${({ theme }) => theme.click.card.secondary.space.link.gap};\n  text-decoration: none;\n`;\nconst LinkIconContainer = styled(Icon)`\n  color: ${({ theme }) => theme.click.card.secondary.color.link.default};\n  height: ${({ theme }) => theme.click.image.md.size.height};\n  width: ${({ theme }) => theme.click.image.md.size.width};\n`;\n\nconst LinkText = styled(Text)``;\nconst LinkIcon = styled(LinkIconContainer)``;\n\nconst Wrapper = styled.div<{\n  $hasShadow?: boolean;\n}>`\n  background-color: ${({ theme }) => theme.click.card.secondary.color.background.default};\n  border-radius: ${({ theme }) => theme.click.card.secondary.radii.all};\n  border: ${({ theme }) =>\n    `1px solid ${theme.click.card.secondary.color.stroke.default}`};\n  max-width: 420px;\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  padding: ${({ theme }) => theme.click.card.secondary.space.all};\n  gap: ${({ theme }) => theme.click.card.secondary.space.gap};\n  box-shadow: ${({ $hasShadow, theme }) => ($hasShadow ? theme.shadow[1] : 'none')};\n\n  &:hover,\n  :focus {\n    background-color: ${({ theme }) => theme.click.card.secondary.color.background.hover};\n    cursor: pointer;\n    ${LinkText},\n    ${LinkIcon} {\n      color: ${({ theme }) => theme.click.card.secondary.color.link.hover};\n    }\n  }\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']:hover,\n  &[aria-disabled='true']:focus,\n  &[aria-disabled='true']:active {\n    pointer-events: none;\n    ${({ theme }) => `\n      background-color: ${theme.click.card.secondary.color.background.disabled};\n      color: ${theme.click.card.secondary.color.title.disabled};\n      border: 1px solid ${theme.click.card.secondary.color.stroke.disabled};\n      cursor: not-allowed;\n\n      ${LinkText},\n      ${LinkIcon} {\n        color: ${theme.click.card.secondary.color.link.disabled};\n      }\n    `}\n  }\n`;\n\nexport const CardSecondary = ({\n  title,\n  icon,\n  iconUrl,\n  badgeState,\n  badgeText = '',\n  hasShadow = false,\n  disabled = false,\n  description,\n  infoUrl,\n  infoText,\n  infoIcon = 'chevron-right',\n  infoAssetSize = 'md',\n  ...props\n}: CardSecondaryProps) => {\n  return (\n    <Wrapper\n      aria-disabled={disabled}\n      tabIndex={0}\n      $hasShadow={hasShadow}\n      {...props}\n    >\n      <Header>\n        <HeaderLeft $disabled={disabled}>\n          {iconUrl ? (\n            <CustomIcon\n              src={iconUrl}\n              alt=\"card icon\"\n              aria-hidden\n            />\n          ) : (\n            icon && (\n              <Icon\n                name={icon}\n                aria-hidden\n                size=\"lg\"\n              />\n            )\n          )}\n          <Title type=\"h3\">{title}</Title>\n        </HeaderLeft>\n        {badgeText && (\n          <Badge\n            text={badgeText}\n            state={disabled == true ? 'disabled' : badgeState}\n          />\n        )}\n      </Header>\n\n      <Content>\n        <Text color=\"muted\">{description}</Text>\n      </Content>\n      {(infoUrl || infoText) && (\n        <InfoLink\n          href={disabled ? undefined : infoUrl}\n          as={disabled || !infoUrl || infoUrl.length === 0 ? 'div' : 'a'}\n        >\n          <LinkText>{infoText}</LinkText>\n          <LinkIcon\n            size={infoAssetSize}\n            name={infoIcon}\n          />\n        </InfoLink>\n      )}\n    </Wrapper>\n  );\n};\n"],"names":["Header","styled","div","withConfig","componentId","HeaderLeft","theme","click","card","secondary","space","gap","$disabled","global","color","text","muted","default","Content","CustomIcon","img","image","lg","size","height","width","InfoLink","a","link","LinkIconContainer","Icon","md","LinkText","Text","LinkIcon","Wrapper","background","radii","all","stroke","$hasShadow","shadow","hover","disabled","title","CardSecondary","icon","iconUrl","badgeState","badgeText","hasShadow","description","infoUrl","infoText","infoIcon","infoAssetSize","props","jsxs","jsx","Title","Badge","undefined","length"],"mappings":"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"}

package/dist/cjs/components/Checkbox/index.cjs

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const RadixCheckbox = require('@radix-ui/react-checkbox');
+const react = require('react');
+const styledComponents = require('styled-components');
+const Icon = require('../Icon/index.cjs');
+const GenericLabel = require('../GenericLabel/index.cjs');
+const FormRoot = require('../FormContainer/FormRoot.cjs');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const RadixCheckbox__namespace = /*#__PURE__*/_interopNamespace(RadixCheckbox);
+
+const Wrapper = styledComponents.styled(FormRoot.FormRoot).withConfig({
+  componentId: "sc-oxrbh1-0"
+})(["align-items:center;max-width:fit-content;"]);
+const Checkbox = ({
+  id,
+  label,
+  variant = "default",
+  disabled,
+  orientation = "horizontal",
+  dir = "end",
+  checked,
+  ...delegated
+}) => {
+  const defaultId = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $orientation: orientation, $dir: dir, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", variant, disabled, "aria-label": `${label}`, checked, ...delegated, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: checked === "indeterminate" ? "minus" : "check", size: "sm" }) }) }),
+    label && /* @__PURE__ */ jsxRuntime.jsx(GenericLabel.GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
+  ] });
+};
+const CheckInput = styledComponents.styled(RadixCheckbox__namespace.Root).withConfig({
+  componentId: "sc-oxrbh1-1"
+})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;", ";"], ({
+  theme,
+  variant
+}) => `
+    border-radius: ${theme.click.checkbox.radii.all};
+    width: ${theme.click.checkbox.size.all};
+    height: ${theme.click.checkbox.size.all};
+    background: ${theme.click.checkbox.color.variations[variant].background.default};
+    border: 1px solid ${theme.click.checkbox.color.variations[variant].stroke.default};
+    cursor: pointer;
+
+    &:hover {
+      background: ${theme.click.checkbox.color.variations[variant].background.hover};
+    }
+    &[data-state="checked"],
+    &[data-state="indeterminate"] {
+      border-color: ${theme.click.checkbox.color.variations[variant].stroke.active};
+      background: ${theme.click.checkbox.color.variations[variant].background.active};
+    }
+    &[data-disabled] {
+      background: ${theme.click.checkbox.color.background.disabled};
+      border-color: ${theme.click.checkbox.color.stroke.disabled};
+      cursor: not-allowed;
+      &[data-state="checked"],
+      &[data-state="indeterminate"] {
+        background: ${theme.click.checkbox.color.background.disabled};
+        border-color: ${theme.click.checkbox.color.stroke.disabled};
+      }
+    }
+  `);
+const CheckIconWrapper = styledComponents.styled(RadixCheckbox__namespace.Indicator).withConfig({
+  componentId: "sc-oxrbh1-2"
+})(["", ""], ({
+  theme
+}) => `
+    color: ${theme.click.checkbox.color.check.active};
+    &[data-disabled] {
+      color: ${theme.click.checkbox.color.check.disabled};
+    }
+  `);
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Checkbox/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { GenericLabel } from '@/components/GenericLabel';\nimport { Icon } from '@/components/Icon';\n\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { useId } from 'react';\nimport { styled } from 'styled-components';\nimport { FormRoot } from '@/components/FormContainer';\nimport { CheckboxProps, CheckboxVariants } from './Checkbox.types';\n\nconst Wrapper = styled(FormRoot)`\n  align-items: center;\n  max-width: fit-content;\n`;\n\nexport const Checkbox = ({\n  id,\n  label,\n  variant = 'default',\n  disabled,\n  orientation = 'horizontal',\n  dir = 'end',\n  checked,\n  ...delegated\n}: CheckboxProps) => {\n  const defaultId = useId();\n  return (\n    <Wrapper\n      $orientation={orientation}\n      $dir={dir}\n    >\n      <CheckInput\n        id={id ?? defaultId}\n        data-testid=\"checkbox\"\n        variant={variant}\n        disabled={disabled}\n        aria-label={`${label}`}\n        checked={checked}\n        {...delegated}\n      >\n        <CheckIconWrapper>\n          <Icon\n            name={checked === 'indeterminate' ? 'minus' : 'check'}\n            size=\"sm\"\n          />\n        </CheckIconWrapper>\n      </CheckInput>\n      {label && (\n        <GenericLabel\n          htmlFor={id ?? defaultId}\n          disabled={disabled}\n        >\n          {label}\n        </GenericLabel>\n      )}\n    </Wrapper>\n  );\n};\n\nconst CheckInput = styled(RadixCheckbox.Root)<{\n  variant: CheckboxVariants;\n}>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n\n  ${({ theme, variant }) => `\n    border-radius: ${theme.click.checkbox.radii.all};\n    width: ${theme.click.checkbox.size.all};\n    height: ${theme.click.checkbox.size.all};\n    background: ${theme.click.checkbox.color.variations[variant].background.default};\n    border: 1px solid ${theme.click.checkbox.color.variations[variant].stroke.default};\n    cursor: pointer;\n\n    &:hover {\n      background: ${theme.click.checkbox.color.variations[variant].background.hover};\n    }\n    &[data-state=\"checked\"],\n    &[data-state=\"indeterminate\"] {\n      border-color: ${theme.click.checkbox.color.variations[variant].stroke.active};\n      background: ${theme.click.checkbox.color.variations[variant].background.active};\n    }\n    &[data-disabled] {\n      background: ${theme.click.checkbox.color.background.disabled};\n      border-color: ${theme.click.checkbox.color.stroke.disabled};\n      cursor: not-allowed;\n      &[data-state=\"checked\"],\n      &[data-state=\"indeterminate\"] {\n        background: ${theme.click.checkbox.color.background.disabled};\n        border-color: ${theme.click.checkbox.color.stroke.disabled};\n      }\n    }\n  `};\n`;\n\nconst CheckIconWrapper = styled(RadixCheckbox.Indicator)`\n  ${({ theme }) => `\n    color: ${theme.click.checkbox.color.check.active};\n    &[data-disabled] {\n      color: ${theme.click.checkbox.color.check.disabled};\n    }\n  `}\n`;\n"],"names":["Wrapper","styled","FormRoot","withConfig","componentId","Checkbox","id","label","variant","disabled","orientation","dir","checked","delegated","defaultId","useId","jsxs","jsx","Icon","GenericLabel","CheckInput","RadixCheckbox","Root","theme","click","checkbox","radii","all","size","color","variations","background","default","stroke","hover","active","CheckIconWrapper","Indicator","check"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAMA,OAAAA,GAAUC,uBAAAA,CAAOC,iBAAQ,CAAA,CAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,2CAAA,CAAA,CAAA;AAKzB,MAAMC,WAAWA,CAAC;AAAA,EACvBC,EAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA,GAAU,SAAA;AAAA,EACVC,QAAAA;AAAAA,EACAC,WAAAA,GAAc,YAAA;AAAA,EACdC,GAAAA,GAAM,KAAA;AAAA,EACNC,OAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,KAAM;AACnB,EAAA,MAAMC,YAAYC,WAAAA,EAAM;AACxB,EAAA,uBACEC,eAAA,CAAC,OAAA,EAAA,EACC,YAAA,EAAcN,WAAAA,EACd,MAAMC,GAAAA,EAEN,QAAA,EAAA;AAAA,oBAAAM,cAAA,CAAC,UAAA,EAAA,EACC,EAAA,EAAIX,EAAAA,IAAMQ,SAAAA,EACV,aAAA,EAAY,UAAA,EACZ,OAAA,EACA,QAAA,EACA,YAAA,EAAY,CAAA,EAAGP,KAAK,CAAA,CAAA,EACpB,OAAA,EACA,GAAIM,SAAAA,EAEJ,QAAA,kBAAAI,cAAA,CAAC,gBAAA,EAAA,EACC,QAAA,kBAAAA,cAAA,CAACC,SAAA,EAAA,EACC,IAAA,EAAMN,OAAAA,KAAY,eAAA,GAAkB,OAAA,GAAU,OAAA,EAC9C,IAAA,EAAK,IAAA,EAAI,CAAA,EAEb,CAAA,EACF,CAAA;AAAA,IACCL,yBACCU,cAAA,CAACE,yBAAA,EAAA,EACC,SAASb,EAAAA,IAAMQ,SAAAA,EACf,UAECP,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEA,MAAMa,UAAAA,GAAanB,uBAAAA,CAAOoB,wBAAAA,CAAcC,IAAI,EAACnB,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uEAAA,EAAA,GAAA,GAQzC,CAAC;AAAA,EAAEmB,KAAAA;AAAAA,EAAOf;AAAQ,CAAA,KAAM;AAAA,mBAAA,EACPe,KAAAA,CAAMC,KAAAA,CAAMC,QAAAA,CAASC,KAAAA,CAAMC,GAAG,CAAA;AAAA,WAAA,EACtCJ,KAAAA,CAAMC,KAAAA,CAAMC,QAAAA,CAASG,IAAAA,CAAKD,GAAG,CAAA;AAAA,YAAA,EAC5BJ,KAAAA,CAAMC,KAAAA,CAAMC,QAAAA,CAASG,IAAAA,CAAKD,GAAG,CAAA;AAAA,gBAAA,EACzBJ,KAAAA,CAAMC,MAAMC,QAAAA,CAASI,KAAAA,CAAMC,WAAWtB,OAAO,CAAA,CAAEuB,WAAWC,OAAO,CAAA;AAAA,sBAAA,EAC3DT,KAAAA,CAAMC,MAAMC,QAAAA,CAASI,KAAAA,CAAMC,WAAWtB,OAAO,CAAA,CAAEyB,OAAOD,OAAO,CAAA;AAAA;;AAAA;AAAA,kBAAA,EAIjET,KAAAA,CAAMC,MAAMC,QAAAA,CAASI,KAAAA,CAAMC,WAAWtB,OAAO,CAAA,CAAEuB,WAAWG,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA,oBAAA,EAI7DX,KAAAA,CAAMC,MAAMC,QAAAA,CAASI,KAAAA,CAAMC,WAAWtB,OAAO,CAAA,CAAEyB,OAAOE,MAAM,CAAA;AAAA,kBAAA,EAC9DZ,KAAAA,CAAMC,MAAMC,QAAAA,CAASI,KAAAA,CAAMC,WAAWtB,OAAO,CAAA,CAAEuB,WAAWI,MAAM,CAAA;AAAA;AAAA;AAAA,kBAAA,EAGhEZ,KAAAA,CAAMC,KAAAA,CAAMC,QAAAA,CAASI,KAAAA,CAAME,WAAWtB,QAAQ,CAAA;AAAA,oBAAA,EAC5Cc,KAAAA,CAAMC,KAAAA,CAAMC,QAAAA,CAASI,KAAAA,CAAMI,OAAOxB,QAAQ,CAAA;AAAA;AAAA;AAAA;AAAA,oBAAA,EAI1Cc,KAAAA,CAAMC,KAAAA,CAAMC,QAAAA,CAASI,KAAAA,CAAME,WAAWtB,QAAQ,CAAA;AAAA,sBAAA,EAC5Cc,KAAAA,CAAMC,KAAAA,CAAMC,QAAAA,CAASI,KAAAA,CAAMI,OAAOxB,QAAQ,CAAA;AAAA;AAAA;AAAA,EAAA,CAG/D,CAAA;AAGH,MAAM2B,gBAAAA,GAAmBnC,uBAAAA,CAAOoB,wBAAAA,CAAcgB,SAAS,EAAClC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GACpD,CAAC;AAAA,EAAEmB;AAAM,CAAA,KAAM;AAAA,WAAA,EACNA,KAAAA,CAAMC,KAAAA,CAAMC,QAAAA,CAASI,KAAAA,CAAMS,MAAMH,MAAM,CAAA;AAAA;AAAA,aAAA,EAErCZ,KAAAA,CAAMC,KAAAA,CAAMC,QAAAA,CAASI,KAAAA,CAAMS,MAAM7B,QAAQ,CAAA;AAAA;AAAA,EAAA,CAErD,CAAA;;;;"}

package/dist/cjs/components/CheckboxMultiSelect/index.cjs

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const useUpdateEffect = require('../../hooks/internal/useUpdateEffect.cjs');
+const InternalSelect = require('../Select/common/InternalSelect.cjs');
+
+const CheckboxMultiSelect = ({
+  value: valueProp,
+  defaultValue,
+  onSelect: onSelectProp,
+  options,
+  children,
+  defaultOpen,
+  onOpenChange: onOpenChangeProp,
+  selectLabel,
+  ...props
+}) => {
+  const [selectedValues, setSelectedValues] = react.useState(valueProp ?? defaultValue ?? []);
+  const [open, setOpen] = react.useState(defaultOpen ?? false);
+  const onOpenChange = react.useCallback((open2) => {
+    setOpen(open2);
+    if (typeof onOpenChangeProp === "function") {
+      onOpenChangeProp(open2);
+    }
+  }, [onOpenChangeProp]);
+  useUpdateEffect.useUpdateEffect(() => {
+    setSelectedValues(valueProp ?? []);
+  }, [valueProp]);
+  const onChange = react.useCallback((values, type) => {
+    setSelectedValues(values);
+    if (typeof onSelectProp === "function") {
+      onSelectProp(values, type);
+    }
+  }, [onSelectProp]);
+  const onSelect = react.useCallback((value, type) => {
+    let newValues = [];
+    if (selectedValues.includes(value)) {
+      newValues = selectedValues.filter((currentValue) => currentValue !== value);
+    } else {
+      newValues = [...selectedValues, value];
+    }
+    onChange(newValues, type);
+  }, [onChange, selectedValues]);
+  const conditionalProps = {};
+  if (options) {
+    conditionalProps.options = options;
+  } else {
+    conditionalProps.children = children;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(InternalSelect.InternalSelect, { onChange, value: selectedValues, open, onOpenChange, onSelect, checkbox: true, selectLabel, ...conditionalProps, ...props });
+};
+CheckboxMultiSelect.Group = InternalSelect.SelectGroup;
+CheckboxMultiSelect.Item = InternalSelect.MultiSelectCheckboxItem;
+CheckboxMultiSelect.ItemDescription = InternalSelect.SelectItemDescription;
+
+exports.CheckboxMultiSelect = CheckboxMultiSelect;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/CheckboxMultiSelect/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/CheckboxMultiSelect/CheckboxMultiSelect.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { useUpdateEffect } from '@/hooks/internal';\nimport {\n  SelectGroup,\n  InternalSelect,\n  MultiSelectCheckboxItem,\n  SelectItemDescription,\n} from '@/components/Select/common/InternalSelect';\n\nimport type { SelectOptionProp, SelectionType } from '@/components/Select/common/types';\nimport type { CheckboxMultiSelectProps } from './CheckboxMultiSelect.types';\n\nexport const CheckboxMultiSelect = ({\n  value: valueProp,\n  defaultValue,\n  onSelect: onSelectProp,\n  options,\n  children,\n  defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  selectLabel,\n  ...props\n}: CheckboxMultiSelectProps) => {\n  const [selectedValues, setSelectedValues] = useState<string[]>(\n    valueProp ?? defaultValue ?? []\n  );\n  const [open, setOpen] = useState(defaultOpen ?? false);\n\n  const onOpenChange = useCallback(\n    (open: boolean) => {\n      setOpen(open);\n      if (typeof onOpenChangeProp === 'function') {\n        onOpenChangeProp(open);\n      }\n    },\n    [onOpenChangeProp]\n  );\n\n  useUpdateEffect(() => {\n    setSelectedValues(valueProp ?? []);\n  }, [valueProp]);\n\n  const onChange = useCallback(\n    (values: string[], type?: SelectionType) => {\n      setSelectedValues(values);\n      if (typeof onSelectProp === 'function') {\n        onSelectProp(values, type);\n      }\n    },\n    [onSelectProp]\n  );\n\n  const onSelect = useCallback(\n    (value: string, type?: SelectionType) => {\n      let newValues = [];\n      if (selectedValues.includes(value)) {\n        newValues = selectedValues.filter(currentValue => currentValue !== value);\n      } else {\n        newValues = [...selectedValues, value];\n      }\n\n      onChange(newValues, type);\n    },\n    [onChange, selectedValues]\n  );\n\n  const conditionalProps: Partial<SelectOptionProp> = {};\n  if (options) {\n    conditionalProps.options = options;\n  } else {\n    conditionalProps.children = children;\n  }\n\n  return (\n    <InternalSelect\n      onChange={onChange}\n      value={selectedValues}\n      open={open}\n      onOpenChange={onOpenChange}\n      onSelect={onSelect}\n      checkbox={true}\n      selectLabel={selectLabel}\n      {...conditionalProps}\n      {...props}\n    />\n  );\n};\n\nCheckboxMultiSelect.Group = SelectGroup;\nCheckboxMultiSelect.Item = MultiSelectCheckboxItem;\nCheckboxMultiSelect.ItemDescription = SelectItemDescription;\n"],"names":["CheckboxMultiSelect","value","valueProp","defaultValue","onSelect","onSelectProp","options","children","defaultOpen","onOpenChange","onOpenChangeProp","selectLabel","props","selectedValues","setSelectedValues","useState","open","setOpen","useCallback","useUpdateEffect","onChange","values","type","newValues","includes","filter","currentValue","conditionalProps","jsx","InternalSelect","Group","SelectGroup","Item","MultiSelectCheckboxItem","ItemDescription","SelectItemDescription"],"mappings":";;;;;;;;;AAYO,MAAMA,sBAAsBA,CAAC;AAAA,EAClCC,KAAAA,EAAOC,SAAAA;AAAAA,EACPC,YAAAA;AAAAA,EACAC,QAAAA,EAAUC,YAAAA;AAAAA,EACVC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,YAAAA,EAAcC,gBAAAA;AAAAA,EACdC,WAAAA;AAAAA,EACA,GAAGC;AACqB,CAAA,KAAM;AAC9B,EAAA,MAAM,CAACC,gBAAgBC,iBAAiB,CAAA,GAAIC,eAC1Cb,SAAAA,IAAaC,YAAAA,IAAgB,EAC/B,CAAA;AACA,EAAA,MAAM,CAACa,IAAAA,EAAMC,OAAO,CAAA,GAAIF,cAAAA,CAASP,eAAe,KAAK,CAAA;AAErD,EAAA,MAAMC,YAAAA,GAAeS,iBAAAA,CACnB,CAACF,KAAAA,KAAkB;AACjBC,IAAAA,OAAAA,CAAQD,KAAI,CAAA;AACZ,IAAA,IAAI,OAAON,qBAAqB,UAAA,EAAY;AAC1CA,MAAAA,gBAAAA,CAAiBM,KAAI,CAAA;AAAA,IACvB;AAAA,EACF,CAAA,EACA,CAACN,gBAAgB,CACnB,CAAA;AAEAS,EAAAA,+BAAAA,CAAgB,MAAM;AACpBL,IAAAA,iBAAAA,CAAkBZ,SAAAA,IAAa,EAAE,CAAA;AAAA,EACnC,CAAA,EAAG,CAACA,SAAS,CAAC,CAAA;AAEd,EAAA,MAAMkB,QAAAA,GAAWF,iBAAAA,CACf,CAACG,MAAAA,EAAkBC,IAAAA,KAAyB;AAC1CR,IAAAA,iBAAAA,CAAkBO,MAAM,CAAA;AACxB,IAAA,IAAI,OAAOhB,iBAAiB,UAAA,EAAY;AACtCA,MAAAA,YAAAA,CAAagB,QAAQC,IAAI,CAAA;AAAA,IAC3B;AAAA,EACF,CAAA,EACA,CAACjB,YAAY,CACf,CAAA;AAEA,EAAA,MAAMD,QAAAA,GAAWc,iBAAAA,CACf,CAACjB,KAAAA,EAAeqB,IAAAA,KAAyB;AACvC,IAAA,IAAIC,YAAY,EAAA;AAChB,IAAA,IAAIV,cAAAA,CAAeW,QAAAA,CAASvB,KAAK,CAAA,EAAG;AAClCsB,MAAAA,SAAAA,GAAYV,cAAAA,CAAeY,MAAAA,CAAOC,CAAAA,YAAAA,KAAgBA,YAAAA,KAAiBzB,KAAK,CAAA;AAAA,IAC1E,CAAA,MAAO;AACLsB,MAAAA,SAAAA,GAAY,CAAC,GAAGV,cAAAA,EAAgBZ,KAAK,CAAA;AAAA,IACvC;AAEAmB,IAAAA,QAAAA,CAASG,WAAWD,IAAI,CAAA;AAAA,EAC1B,CAAA,EACA,CAACF,QAAAA,EAAUP,cAAc,CAC3B,CAAA;AAEA,EAAA,MAAMc,mBAA8C,EAAC;AACrD,EAAA,IAAIrB,OAAAA,EAAS;AACXqB,IAAAA,gBAAAA,CAAiBrB,OAAAA,GAAUA,OAAAA;AAAAA,EAC7B,CAAA,MAAO;AACLqB,IAAAA,gBAAAA,CAAiBpB,QAAAA,GAAWA,QAAAA;AAAAA,EAC9B;AAEA,EAAA,uBACEqB,cAAA,CAACC,6BAAA,EAAA,EACC,QAAA,EACA,KAAA,EAAOhB,gBACP,IAAA,EACA,YAAA,EACA,QAAA,EACA,QAAA,EAAU,IAAA,EACV,WAAA,EACA,GAAIc,gBAAAA,EACJ,GAAIf,KAAAA,EAAM,CAAA;AAGhB;AAEAZ,mBAAAA,CAAoB8B,KAAAA,GAAQC,0BAAAA;AAC5B/B,mBAAAA,CAAoBgC,IAAAA,GAAOC,sCAAAA;AAC3BjC,mBAAAA,CAAoBkC,eAAAA,GAAkBC,oCAAAA;;;;"}

package/dist/cjs/components/CodeBlock/InlineCodeBlock.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styledComponents = require('styled-components');
+
+const InlineContainer = styledComponents.styled.span.withConfig({
+  componentId: "sc-9vgsnh-0"
+})(["", ""], ({
+  theme
+}) => `
+    background: ${theme.click.codeInline.color.background.default};
+    color: ${theme.click.codeInline.color.text.default};
+    border: 1px solid ${theme.click.codeInline.color.stroke.default};
+    font: ${theme.click.codeInline.typography.text.default};
+    border-radius: ${theme.click.codeInline.radii.all};
+    padding: 0 ${theme.click.codeInline.space.x};
+  `);
+const InlineCodeBlock = (props) => /* @__PURE__ */ jsxRuntime.jsx(InlineContainer, { ...props });
+
+exports.InlineCodeBlock = InlineCodeBlock;
+//# sourceMappingURL=InlineCodeBlock.cjs.map

package/dist/cjs/components/CodeBlock/InlineCodeBlock.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineCodeBlock.cjs","sources":["../../../../src/components/CodeBlock/InlineCodeBlock.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { styled } from 'styled-components';\n\nconst InlineContainer = styled.span`\n  ${({ theme }) => `\n    background: ${theme.click.codeInline.color.background.default};\n    color: ${theme.click.codeInline.color.text.default};\n    border: 1px solid ${theme.click.codeInline.color.stroke.default};\n    font: ${theme.click.codeInline.typography.text.default};\n    border-radius: ${theme.click.codeInline.radii.all};\n    padding: 0 ${theme.click.codeInline.space.x};\n  `}\n`;\nexport const InlineCodeBlock = (props: HTMLAttributes<HTMLSpanElement>) => (\n  <InlineContainer {...props} />\n);\n"],"names":["InlineContainer","styled","span","withConfig","componentId","theme","click","codeInline","color","background","default","text","stroke","typography","radii","all","space","x","InlineCodeBlock","props","jsx"],"mappings":";;;;;;;AAGA,MAAMA,eAAAA,GAAkBC,uBAAAA,CAAOC,IAAAA,CAAIC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAC/B,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,gBAAA,EACDA,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWC,KAAAA,CAAMC,WAAWC,OAAO,CAAA;AAAA,WAAA,EACpDL,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWC,KAAAA,CAAMG,KAAKD,OAAO,CAAA;AAAA,sBAAA,EAC9BL,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWC,KAAAA,CAAMI,OAAOF,OAAO,CAAA;AAAA,UAAA,EACvDL,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWM,UAAAA,CAAWF,KAAKD,OAAO,CAAA;AAAA,mBAAA,EACrCL,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWO,KAAAA,CAAMC,GAAG,CAAA;AAAA,eAAA,EACpCV,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWS,KAAAA,CAAMC,CAAC,CAAA;AAAA,EAAA,CAC5C,CAAA;AAEI,MAAMC,kBAAkBA,CAACC,KAAAA,qBAC9BC,cAAA,CAAC,eAAA,EAAA,EAAgB,GAAID,KAAAA,EAAM;;;;"}

package/dist/cjs/components/CodeBlock/index.cjs

@@ -0,0 +1,146 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactSyntaxHighlighter = require('react-syntax-highlighter');
+const EmptyButton = require('../EmptyButton/index.cjs');
+const styledComponents = require('styled-components');
+const useColorStyle = require('./useColorStyle.cjs');
+const sql = require('react-syntax-highlighter/dist/cjs/languages/hljs/sql.js');
+const bash = require('react-syntax-highlighter/dist/cjs/languages/hljs/bash.js');
+const json = require('react-syntax-highlighter/dist/cjs/languages/hljs/json.js');
+const tsx = require('react-syntax-highlighter/dist/cjs/languages/hljs/typescript.js');
+const plaintext = require('react-syntax-highlighter/dist/cjs/languages/hljs/plaintext.js');
+const IconButton = require('../IconButton/index.cjs');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const sql__default = /*#__PURE__*/_interopDefault(sql);
+const bash__default = /*#__PURE__*/_interopDefault(bash);
+const json__default = /*#__PURE__*/_interopDefault(json);
+const tsx__default = /*#__PURE__*/_interopDefault(tsx);
+const plaintext__default = /*#__PURE__*/_interopDefault(plaintext);
+
+reactSyntaxHighlighter.Light.registerLanguage("sql", sql__default.default.default || sql__default.default);
+reactSyntaxHighlighter.Light.registerLanguage("bash", bash__default.default.default || bash__default.default);
+reactSyntaxHighlighter.Light.registerLanguage("json", json__default.default.default || json__default.default);
+reactSyntaxHighlighter.Light.registerLanguage("tsx", tsx__default.default.default || tsx__default.default);
+reactSyntaxHighlighter.Light.registerLanguage("plaintext", plaintext__default.default.default || plaintext__default.default);
+const CodeBlockContainer = styledComponents.styled.div.withConfig({
+  componentId: "sc-frrurd-0"
+})(["width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;position:relative;", ""], ({
+  theme,
+  $theme
+}) => {
+  const themeName = theme.name;
+  const codeTheme = theme.click.codeblock[`${!$theme ? themeName : $theme}Mode`].color;
+  return `
+    color: ${codeTheme.numbers.default};
+    .linenumber {
+      color: ${codeTheme.numbers.default}
+    }
+  `;
+});
+const CodeButton = styledComponents.styled(EmptyButton.EmptyButton).withConfig({
+  componentId: "sc-frrurd-1"
+})(["", ""], ({
+  $copied,
+  $error,
+  theme
+}) => `
+    color: ${$copied ? theme.click.alert.color.text.success : $error ? theme.click.alert.color.text.danger : "inherit"};
+    padding: 0;
+    border: 0;
+  `);
+const Highlighter = styledComponents.styled(reactSyntaxHighlighter.Light).withConfig({
+  componentId: "sc-frrurd-2"
+})(["background:transparent;padding:0;margin:0;"]);
+const CodeContent = styledComponents.styled.code.withConfig({
+  componentId: "sc-frrurd-3"
+})(["font-family:inherit;color:inherit;"]);
+const ButtonContainer = styledComponents.styled.div.withConfig({
+  componentId: "sc-frrurd-4"
+})(["position:absolute;display:flex;", ""], ({
+  theme
+}) => `
+    gap:  0.625rem;
+    top: ${theme.click.codeblock.space.y};
+    right: ${theme.click.codeblock.space.x};
+  `);
+const CodeBlock = ({
+  children,
+  language,
+  theme,
+  showLineNumbers,
+  showWrapButton = false,
+  wrapLines = false,
+  onCopy,
+  onCopyError,
+  ...props
+}) => {
+  const [copied, setCopied] = react.useState(false);
+  const [errorCopy, setErrorCopy] = react.useState(false);
+  const [wrap, setWrap] = react.useState(wrapLines);
+  const customStyle = useColorStyle.default(theme);
+  const copyCodeToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(children);
+      if (typeof onCopy == "function") {
+        onCopy(children);
+      }
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (error) {
+      let message = "Unable to copy code";
+      if (error instanceof Error) {
+        message = error.message;
+      }
+      setErrorCopy(true);
+      if (typeof onCopyError === "function") {
+        onCopyError(message);
+      }
+      setTimeout(() => setErrorCopy(false), 2e3);
+    }
+  };
+  const wrapElement = () => {
+    setWrap((wrap2) => !wrap2);
+  };
+  const CodeWithRef = (props2) => /* @__PURE__ */ jsxRuntime.jsx(CodeContent, { ...props2 });
+  return /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockContainer, { $theme: theme, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ButtonContainer, { children: [
+      showWrapButton && /* @__PURE__ */ jsxRuntime.jsx(CodeButton, { as: IconButton.IconButton, $copied: false, $error: false, icon: "document", onClick: wrapElement }),
+      /* @__PURE__ */ jsxRuntime.jsx(CodeButton, { as: IconButton.IconButton, $copied: copied, $error: errorCopy, icon: copied ? "check" : errorCopy ? "warning" : "copy", onClick: copyCodeToClipboard })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Highlighter, { language, style: customStyle, CodeTag: CodeWithRef, renderer: ({
+      rows,
+      stylesheet,
+      useInlineStyles
+    }) => {
+      return rows.map((row, index) => {
+        const children2 = row.children;
+        const lineNumberElement = children2?.shift();
+        if (lineNumberElement) {
+          row.children = [lineNumberElement, {
+            children: children2,
+            properties: {
+              className: []
+            },
+            tagName: "span",
+            type: "element"
+          }];
+        }
+        return reactSyntaxHighlighter.createElement({
+          node: row,
+          stylesheet,
+          useInlineStyles,
+          key: index
+        });
+      });
+    }, showLineNumbers, wrapLines: wrap || wrapLines, wrapLongLines: wrap || wrapLines, children })
+  ] });
+};
+
+exports.CodeBlock = CodeBlock;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/CodeBlock/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState } from 'react';\nimport { Light as SyntaxHighlighter, createElement } from 'react-syntax-highlighter';\n\nimport { EmptyButton } from '@/components/EmptyButton';\nimport { IconButton } from '@/components/IconButton';\n\nimport { styled } from 'styled-components';\nimport useColorStyle from './useColorStyle';\nimport { CodeBlockProps, CodeThemeType } from './CodeBlock.types';\n\n/* eslint-disable import/extensions */\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport tsx from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport plaintext from 'react-syntax-highlighter/dist/cjs/languages/hljs/plaintext.js';\n/* eslint-enable import/extensions */\n\nSyntaxHighlighter.registerLanguage('sql', sql.default || sql);\nSyntaxHighlighter.registerLanguage('bash', bash.default || bash);\nSyntaxHighlighter.registerLanguage('json', json.default || json);\nSyntaxHighlighter.registerLanguage('tsx', tsx.default || tsx);\nSyntaxHighlighter.registerLanguage('plaintext', plaintext.default || plaintext);\n\ninterface RendererNodeType {\n  type: 'element' | 'text';\n  value?: string | number | undefined;\n  tagName?: keyof React.JSX.IntrinsicElements | React.ComponentType | undefined;\n  properties?: { className: unknown[]; [key: string]: unknown };\n  children?: RendererNodeType[];\n}\ninterface CustomRendererProps {\n  rows: RendererNodeType[];\n  stylesheet: { [key: string]: React.CSSProperties };\n  useInlineStyles: boolean;\n}\n\nconst CodeBlockContainer = styled.div<{ $theme?: CodeThemeType }>`\n  width: 100%;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  position: relative;\n  ${({ theme, $theme }) => {\n    const themeName = theme.name as CodeThemeType;\n\n    const codeTheme = theme.click.codeblock[`${!$theme ? themeName : $theme}Mode`].color;\n    return `\n    color: ${codeTheme.numbers.default};\n    .linenumber {\n      color: ${codeTheme.numbers.default}\n    }\n  `;\n  }}\n`;\n\nconst CodeButton = styled(EmptyButton)<{ $copied: boolean; $error: boolean }>`\n  ${({ $copied, $error, theme }) => `\n    color: ${\n      $copied\n        ? theme.click.alert.color.text.success\n        : $error\n          ? theme.click.alert.color.text.danger\n          : 'inherit'\n    };\n    padding: 0;\n    border: 0;\n  `}\n`;\n\nconst Highlighter = styled(SyntaxHighlighter)`\n  background: transparent;\n  padding: 0;\n  margin: 0;\n`;\n\nconst CodeContent = styled.code`\n  font-family: inherit;\n  color: inherit;\n`;\n\nconst ButtonContainer = styled.div`\n  position: absolute;\n  display: flex;\n  ${({ theme }) => `\n    gap:  0.625rem;\n    top: ${theme.click.codeblock.space.y};\n    right: ${theme.click.codeblock.space.x};\n  `}\n`;\n\nexport const CodeBlock = ({\n  children,\n  language,\n  theme,\n  showLineNumbers,\n  showWrapButton = false,\n  wrapLines = false,\n  onCopy,\n  onCopyError,\n  ...props\n}: CodeBlockProps) => {\n  const [copied, setCopied] = useState(false);\n  const [errorCopy, setErrorCopy] = useState(false);\n  const [wrap, setWrap] = useState(wrapLines);\n  const customStyle = useColorStyle(theme);\n\n  const copyCodeToClipboard = async () => {\n    try {\n      await navigator.clipboard.writeText(children);\n      if (typeof onCopy == 'function') {\n        onCopy(children);\n      }\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (error) {\n      let message = 'Unable to copy code';\n      if (error instanceof Error) {\n        message = error.message;\n      }\n      setErrorCopy(true);\n      if (typeof onCopyError === 'function') {\n        onCopyError(message);\n      }\n      setTimeout(() => setErrorCopy(false), 2000);\n    }\n  };\n  const wrapElement = () => {\n    setWrap(wrap => !wrap);\n  };\n\n  const CodeWithRef = (props: HTMLAttributes<HTMLElement>) => <CodeContent {...props} />;\n  return (\n    <CodeBlockContainer\n      $theme={theme}\n      {...props}\n    >\n      <ButtonContainer>\n        {showWrapButton && (\n          <CodeButton\n            as={IconButton}\n            $copied={false}\n            $error={false}\n            icon=\"document\"\n            onClick={wrapElement}\n          />\n        )}\n        <CodeButton\n          as={IconButton}\n          $copied={copied}\n          $error={errorCopy}\n          icon={copied ? 'check' : errorCopy ? 'warning' : 'copy'}\n          onClick={copyCodeToClipboard}\n        />\n      </ButtonContainer>\n      <Highlighter\n        language={language}\n        style={customStyle}\n        CodeTag={CodeWithRef}\n        renderer={({ rows, stylesheet, useInlineStyles }: CustomRendererProps) => {\n          return rows.map((row, index) => {\n            const children = row.children;\n            const lineNumberElement = children?.shift();\n\n            /**\n             * We will take current structure of the rows and rebuild it\n             * according to the suggestion here https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/376#issuecomment-1246115899\n             */\n            if (lineNumberElement) {\n              row.children = [\n                lineNumberElement,\n                {\n                  children,\n                  properties: {\n                    className: [],\n                  },\n                  tagName: 'span',\n                  type: 'element',\n                },\n              ];\n            }\n\n            return createElement({\n              node: row,\n              stylesheet,\n              useInlineStyles,\n              key: index,\n            });\n          });\n        }}\n        showLineNumbers={showLineNumbers}\n        wrapLines={wrap || wrapLines}\n        wrapLongLines={wrap || wrapLines}\n      >\n        {children}\n      </Highlighter>\n    </CodeBlockContainer>\n  );\n};\n"],"names":["SyntaxHighlighter","registerLanguage","sql","default","bash","json","tsx","plaintext","CodeBlockContainer","styled","div","withConfig","componentId","theme","$theme","themeName","name","codeTheme","click","codeblock","color","numbers","CodeButton","EmptyButton","$copied","$error","alert","text","success","danger","Highlighter","CodeContent","code","ButtonContainer","space","y","x","CodeBlock","children","language","showLineNumbers","showWrapButton","wrapLines","onCopy","onCopyError","props","copied","setCopied","useState","errorCopy","setErrorCopy","wrap","setWrap","customStyle","useColorStyle","copyCodeToClipboard","navigator","clipboard","writeText","setTimeout","error","message","Error","wrapElement","CodeWithRef","jsx","jsxs","IconButton","rows","stylesheet","useInlineStyles","map","row","index","lineNumberElement","shift","properties","className","tagName","type","createElement","node","key"],"mappings":"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"}