@televet/kibble-ui 4.0.0-beta.18 → 4.0.0-beta.2

package/README.md

@@ -35,43 +35,3 @@ $ npm run build
 ```
 
 After the build finishes, look for the file named `stats.html` and open it in the browser of your choice.
-
-## Theme Token Autocompletion
-
-To enable theme token autocompletion in your application, you have two options:
-
-### Option 1: Automatic Generation (Recommended)
-
-Add the following to your package.json:
-
-```json
-{
-  "scripts": {
-    "postinstall": "kibble-postinstall"
-  }
-}
-```
-
-This will automatically generate theme types whenever you install or update `@televet/kibble-ui`.
-
-If you need to skip the automatic generation (e.g., in CI environments), you can set the `SKIP_KIBBLE_POSTINSTALL` environment variable:
-
-```bash
-SKIP_KIBBLE_POSTINSTALL=1 npm install
-```
-
-### Option 2: Manual Generation
-
-Run the following command after installing or updating `@televet/kibble-ui`:
-
-```bash
-npx kibble-generate-theme
-```
-
-Both options will enable autocompletion for all Kibble UI theme tokens in your components:
-
-```tsx
-// You'll get autocompletion for theme tokens like this:
-<Swatch bgColor="background.primary" />
-<Text fontSize="sm" />
-```

package/dist/chunks/alert.types-CjjKcGZP.js

@@ -0,0 +1,172 @@
+import { x as t } from "./vendor-D56wCYP8.js";
+import g from "react";
+import { W as h } from "./heading.component-Pr_wFtuy.js";
+import { I as j } from "./icon.component-ADHJf_mk.js";
+import { W as b } from "./text.component-Dz-V2uze.js";
+import { B as f } from "./button.component-SfKkS7VY.js";
+import { B as A, F as _, ax as B, ay as k, az as R, aA as w, aB as N } from "./chakra-LFfg7ED-.js";
+const v = {
+  error: "warningSign",
+  warning: "warningSign",
+  success: "checkmark",
+  info: "infoCircle",
+  default: "infoCircle"
+}, y = {
+  default: "default",
+  error: "danger",
+  info: "info",
+  success: "success",
+  warning: "warning"
+}, o = ({
+  buttonPosition: e,
+  buttonText: i,
+  status: n,
+  ...r
+}) => /* @__PURE__ */ t.jsx(
+  A,
+  {
+    className: "Alert__Button",
+    "data-testid": "kibble-alert-button",
+    ...e === "bottomLeft" && { pt: 2, pb: 1 },
+    children: /* @__PURE__ */ t.jsx(
+      f,
+      {
+        size: "xs",
+        variant: n === "default" ? "primary" : "secondary",
+        w: "max-content",
+        ...r,
+        children: i
+      }
+    )
+  }
+), D = ({
+  buttonProps: e,
+  description: i,
+  descriptionProps: n,
+  hideCloseButton: r = !1,
+  hideIcon: c = !1,
+  iconProps: d,
+  onClose: x,
+  onContrast: a = !1,
+  status: s = "success",
+  title: l,
+  titleProps: p,
+  ...u
+}) => {
+  const m = e?.buttonPosition === "topRight" ? _ : g.Fragment;
+  return /* @__PURE__ */ t.jsxs(
+    B,
+    {
+      className: "Alert",
+      "data-testid": "kibble-alert",
+      ...u,
+      variant: s,
+      hideIcon: c,
+      onContrast: a,
+      children: [
+        !c && /* @__PURE__ */ t.jsx(
+          k,
+          {
+            className: "Alert__Icon",
+            "data-testid": "kibble-alert-icon",
+            children: /* @__PURE__ */ t.jsx(
+              j,
+              {
+                variant: a ? "onContrast" : y[s],
+                name: d?.name || v[s],
+                size: "lg",
+                ...d
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsxs(
+          R,
+          {
+            className: "Alert__Content",
+            "data-testid": "kibble-alert-content",
+            children: [
+              l && /* @__PURE__ */ t.jsxs(m, { justifyContent: "space-between", children: [
+                /* @__PURE__ */ t.jsx(
+                  w,
+                  {
+                    className: "Alert__Title",
+                    "data-testid": "kibble-alert-title",
+                    children: /* @__PURE__ */ t.jsx(
+                      h,
+                      {
+                        size: "sm",
+                        variant: a ? "onContrast" : "default",
+                        ...p,
+                        children: l
+                      }
+                    )
+                  }
+                ),
+                e?.buttonPosition === "topRight" && /* @__PURE__ */ t.jsx(
+                  o,
+                  {
+                    status: s,
+                    onContrast: a,
+                    ...e
+                  }
+                )
+              ] }),
+              i && /* @__PURE__ */ t.jsxs(m, { justifyContent: "space-between", children: [
+                /* @__PURE__ */ t.jsx(
+                  N,
+                  {
+                    className: "Alert__Description",
+                    "data-testid": "kibble-alert-description",
+                    children: typeof i == "string" ? /* @__PURE__ */ t.jsx(
+                      b,
+                      {
+                        size: "md",
+                        variant: a ? "onContrast" : "default",
+                        ...n,
+                        children: i
+                      }
+                    ) : i
+                  }
+                ),
+                e?.buttonPosition === "topRight" && !l && /* @__PURE__ */ t.jsx(
+                  o,
+                  {
+                    status: s,
+                    onContrast: a,
+                    ...e
+                  }
+                )
+              ] }),
+              e?.buttonPosition === "bottomLeft" && /* @__PURE__ */ t.jsx(
+                o,
+                {
+                  status: s,
+                  onContrast: a,
+                  ...e
+                }
+              )
+            ]
+          }
+        ),
+        !r && /* @__PURE__ */ t.jsx(
+          f,
+          {
+            iconName: "close",
+            size: "xs",
+            variant: "ghostNeutral",
+            onContrast: a,
+            onClick: x
+          }
+        )
+      ]
+    }
+  );
+}, E = ["topRight", "bottomLeft"];
+export {
+  D as A,
+  v as a,
+  y as b,
+  E as c
+};
+//# sourceMappingURL=alert.types-CjjKcGZP.js.map

package/dist/chunks/alert.types-CjjKcGZP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.types-CjjKcGZP.js","sources":["../../src/components/Alert/alert.records.ts","../../src/components/Alert/components/AlertButton/alertButton.component.tsx","../../src/components/Alert/alert.component.tsx","../../src/components/Alert/alert.types.ts"],"sourcesContent":["import { IconName } from \"components/Icon/icon.types\";\nimport { TypographyVariant } from \"shared/types\";\nimport { Status } from \"shared/types/status\";\n\nexport const AlertStatusIcon: Record<Status, IconName> = {\n  error: \"warningSign\",\n  warning: \"warningSign\",\n  success: \"checkmark\",\n  info: \"infoCircle\",\n  default: \"infoCircle\",\n};\n\nexport const AlertStatusToIconVariant: Record<Status, TypographyVariant> = {\n  default: \"default\",\n  error: \"danger\",\n  info: \"info\",\n  success: \"success\",\n  warning: \"warning\",\n};\n","import React from \"react\";\nimport { AlertButtonPosition } from \"components/Alert/alert.types\";\nimport { Button, ButtonProps } from \"components/Button/button.component\";\nimport { Status } from \"shared/types/status\";\nimport { Box } from \"@chakra-ui/react/box\";\n\nexport interface AlertButtonProps extends Omit<ButtonProps, \"children\"> {\n  buttonPosition?: AlertButtonPosition;\n  buttonText: string;\n}\n\ninterface InternalAlertButtonProps extends AlertButtonProps {\n  status: Status;\n}\n\nexport const AlertButton = ({\n  buttonPosition,\n  buttonText,\n  status,\n  ...rest\n}: InternalAlertButtonProps): React.JSX.Element => {\n  return (\n    <Box\n      className=\"Alert__Button\"\n      data-testid=\"kibble-alert-button\"\n      {...(buttonPosition === \"bottomLeft\" && { pt: 2, pb: 1 })}\n    >\n      <Button\n        size=\"xs\"\n        variant={status === \"default\" ? \"primary\" : \"secondary\"}\n        w=\"max-content\"\n        {...rest}\n      >\n        {buttonText}\n      </Button>\n    </Box>\n  );\n};\n","import React from \"react\";\nimport { Alert as CAlert } from \"@chakra-ui/react/alert\";\nimport { Heading, HeadingProps } from \"components/Heading/heading.component\";\nimport { Icon, IconProps } from \"components/Icon/icon.component\";\nimport { Text, TextProps } from \"components/Text/text.component\";\nimport { Status } from \"shared/types/status\";\nimport { Button } from \"components/Button/button.component\";\nimport { AlertStatusIcon, AlertStatusToIconVariant } from \"./alert.records\";\nimport { Flex } from \"@chakra-ui/react/flex\";\nimport {\n  AlertButton,\n  AlertButtonProps,\n} from \"./components/AlertButton/alertButton.component\";\n\ninterface AlertBaseProps\n  extends Omit<\n    CAlert.RootProps,\n    \"title\" | \"status\" | \"children\" | \"variant\" | \"size\"\n  > {\n  buttonProps?: AlertButtonProps;\n  description?: string | React.ReactNode;\n  descriptionProps?: TextProps;\n  hideIcon?: boolean;\n  iconProps?: IconProps;\n  onContrast?: boolean;\n  status?: Status;\n  title?: string | React.ReactNode;\n  titleProps?: HeadingProps;\n}\n\ninterface DefaultAlertProps extends AlertBaseProps {\n  hideCloseButton?: true;\n  onClose?: never;\n}\n\ninterface ClosableAlertProps extends AlertBaseProps {\n  hideCloseButton: false;\n  onClose: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type AlertProps = DefaultAlertProps | ClosableAlertProps;\n\nexport const Alert = ({\n  buttonProps,\n  description,\n  descriptionProps,\n  hideCloseButton = false,\n  hideIcon = false,\n  iconProps,\n  onClose,\n  onContrast = false,\n  status = \"success\",\n  title,\n  titleProps,\n  ...rest\n}: AlertProps): React.JSX.Element => {\n  const isTopRightButton = buttonProps?.buttonPosition === \"topRight\";\n  const WithButtonWrapper = isTopRightButton ? Flex : React.Fragment;\n\n  return (\n    <CAlert.Root\n      className=\"Alert\"\n      data-testid=\"kibble-alert\"\n      {...rest}\n      variant={status}\n      hideIcon={hideIcon}\n      onContrast={onContrast}\n    >\n      {!hideIcon && (\n        <CAlert.Indicator\n          className=\"Alert__Icon\"\n          data-testid=\"kibble-alert-icon\"\n        >\n          <Icon\n            variant={\n              onContrast ? \"onContrast\" : AlertStatusToIconVariant[status]\n            }\n            name={iconProps?.name || AlertStatusIcon[status]}\n            size=\"lg\"\n            {...iconProps}\n          />\n        </CAlert.Indicator>\n      )}\n      <CAlert.Content\n        className=\"Alert__Content\"\n        data-testid=\"kibble-alert-content\"\n      >\n        {title && (\n          <WithButtonWrapper justifyContent=\"space-between\">\n            <CAlert.Title\n              className=\"Alert__Title\"\n              data-testid=\"kibble-alert-title\"\n            >\n              <Heading\n                size=\"sm\"\n                variant={onContrast ? \"onContrast\" : \"default\"}\n                {...titleProps}\n              >\n                {title}\n              </Heading>\n            </CAlert.Title>\n            {buttonProps?.buttonPosition === \"topRight\" && (\n              <AlertButton\n                status={status}\n                onContrast={onContrast}\n                {...buttonProps}\n              />\n            )}\n          </WithButtonWrapper>\n        )}\n        {description && (\n          <WithButtonWrapper justifyContent=\"space-between\">\n            <CAlert.Description\n              className=\"Alert__Description\"\n              data-testid=\"kibble-alert-description\"\n            >\n              {typeof description === \"string\" ? (\n                <Text\n                  size=\"md\"\n                  variant={onContrast ? \"onContrast\" : \"default\"}\n                  {...descriptionProps}\n                >\n                  {description}\n                </Text>\n              ) : (\n                description\n              )}\n            </CAlert.Description>\n            {buttonProps?.buttonPosition === \"topRight\" && !title && (\n              <AlertButton\n                status={status}\n                onContrast={onContrast}\n                {...buttonProps}\n              />\n            )}\n          </WithButtonWrapper>\n        )}\n        {buttonProps?.buttonPosition === \"bottomLeft\" && (\n          <AlertButton\n            status={status}\n            onContrast={onContrast}\n            {...buttonProps}\n          />\n        )}\n      </CAlert.Content>\n      {!hideCloseButton && (\n        <Button\n          iconName=\"close\"\n          size=\"xs\"\n          variant=\"ghostNeutral\"\n          onContrast={onContrast}\n          onClick={onClose}\n        />\n      )}\n    </CAlert.Root>\n  );\n};\n","export const alertButtonPositions = [\"topRight\", \"bottomLeft\"] as const;\nexport type AlertButtonPosition = (typeof alertButtonPositions)[number];\n"],"names":["AlertStatusIcon","AlertStatusToIconVariant","AlertButton","buttonPosition","buttonText","status","rest","jsx","Box","Button","Alert","buttonProps","description","descriptionProps","hideCloseButton","hideIcon","iconProps","onClose","onContrast","title","titleProps","WithButtonWrapper","Flex","React","jsxs","CAlert.Root","CAlert.Indicator","Icon","CAlert.Content","CAlert.Title","Heading","CAlert.Description","Text","alertButtonPositions"],"mappings":"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"}

package/dist/chunks/alert.types-CrmgH4dp.js

@@ -0,0 +1,2 @@
+"use strict";const t=require("./vendor-CsrlYH7V.js"),g=require("react"),b=require("./heading.component-Bj-4SV0z.js"),A=require("./icon.component-DIxGH95k.js"),E=require("./text.component-B_DmbhFY.js"),d=require("./button.component-BwdIs2R9.js"),s=require("./chakra-CQVPsvk3.js"),j={error:"warningSign",warning:"warningSign",success:"checkmark",info:"infoCircle",default:"infoCircle"},p={default:"default",error:"danger",info:"info",success:"success",warning:"warning"},c=({buttonPosition:e,buttonText:i,status:o,...a})=>t.jsxRuntimeExports.jsx(s.Box,{className:"Alert__Button","data-testid":"kibble-alert-button",...e==="bottomLeft"&&{pt:2,pb:1},children:t.jsxRuntimeExports.jsx(d.Button,{size:"xs",variant:o==="default"?"primary":"secondary",w:"max-content",...a,children:i})}),_=({buttonProps:e,description:i,descriptionProps:o,hideCloseButton:a=!1,hideIcon:x=!1,iconProps:u,onClose:R,onContrast:n=!1,status:r="success",title:l,titleProps:h,...f})=>{const m=e?.buttonPosition==="topRight"?s.Flex:g.Fragment;return t.jsxRuntimeExports.jsxs(s.AlertRoot,{className:"Alert","data-testid":"kibble-alert",...f,variant:r,hideIcon:x,onContrast:n,children:[!x&&t.jsxRuntimeExports.jsx(s.AlertIndicator,{className:"Alert__Icon","data-testid":"kibble-alert-icon",children:t.jsxRuntimeExports.jsx(A.Icon,{variant:n?"onContrast":p[r],name:u?.name||j[r],size:"lg",...u})}),t.jsxRuntimeExports.jsxs(s.AlertContent,{className:"Alert__Content","data-testid":"kibble-alert-content",children:[l&&t.jsxRuntimeExports.jsxs(m,{justifyContent:"space-between",children:[t.jsxRuntimeExports.jsx(s.AlertTitle,{className:"Alert__Title","data-testid":"kibble-alert-title",children:t.jsxRuntimeExports.jsx(b.WrappedHeading,{size:"sm",variant:n?"onContrast":"default",...h,children:l})}),e?.buttonPosition==="topRight"&&t.jsxRuntimeExports.jsx(c,{status:r,onContrast:n,...e})]}),i&&t.jsxRuntimeExports.jsxs(m,{justifyContent:"space-between",children:[t.jsxRuntimeExports.jsx(s.AlertDescription,{className:"Alert__Description","data-testid":"kibble-alert-description",children:typeof i=="string"?t.jsxRuntimeExports.jsx(E.WrappedText,{size:"md",variant:n?"onContrast":"default",...o,children:i}):i}),e?.buttonPosition==="topRight"&&!l&&t.jsxRuntimeExports.jsx(c,{status:r,onContrast:n,...e})]}),e?.buttonPosition==="bottomLeft"&&t.jsxRuntimeExports.jsx(c,{status:r,onContrast:n,...e})]}),!a&&t.jsxRuntimeExports.jsx(d.Button,{iconName:"close",size:"xs",variant:"ghostNeutral",onContrast:n,onClick:R})]})},k=["topRight","bottomLeft"];exports.Alert=_;exports.AlertStatusIcon=j;exports.AlertStatusToIconVariant=p;exports.alertButtonPositions=k;
+//# sourceMappingURL=alert.types-CrmgH4dp.js.map

package/dist/chunks/alert.types-CrmgH4dp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.types-CrmgH4dp.js","sources":["../../src/components/Alert/alert.records.ts","../../src/components/Alert/components/AlertButton/alertButton.component.tsx","../../src/components/Alert/alert.component.tsx","../../src/components/Alert/alert.types.ts"],"sourcesContent":["import { IconName } from \"components/Icon/icon.types\";\nimport { TypographyVariant } from \"shared/types\";\nimport { Status } from \"shared/types/status\";\n\nexport const AlertStatusIcon: Record<Status, IconName> = {\n  error: \"warningSign\",\n  warning: \"warningSign\",\n  success: \"checkmark\",\n  info: \"infoCircle\",\n  default: \"infoCircle\",\n};\n\nexport const AlertStatusToIconVariant: Record<Status, TypographyVariant> = {\n  default: \"default\",\n  error: \"danger\",\n  info: \"info\",\n  success: \"success\",\n  warning: \"warning\",\n};\n","import React from \"react\";\nimport { AlertButtonPosition } from \"components/Alert/alert.types\";\nimport { Button, ButtonProps } from \"components/Button/button.component\";\nimport { Status } from \"shared/types/status\";\nimport { Box } from \"@chakra-ui/react/box\";\n\nexport interface AlertButtonProps extends Omit<ButtonProps, \"children\"> {\n  buttonPosition?: AlertButtonPosition;\n  buttonText: string;\n}\n\ninterface InternalAlertButtonProps extends AlertButtonProps {\n  status: Status;\n}\n\nexport const AlertButton = ({\n  buttonPosition,\n  buttonText,\n  status,\n  ...rest\n}: InternalAlertButtonProps): React.JSX.Element => {\n  return (\n    <Box\n      className=\"Alert__Button\"\n      data-testid=\"kibble-alert-button\"\n      {...(buttonPosition === \"bottomLeft\" && { pt: 2, pb: 1 })}\n    >\n      <Button\n        size=\"xs\"\n        variant={status === \"default\" ? \"primary\" : \"secondary\"}\n        w=\"max-content\"\n        {...rest}\n      >\n        {buttonText}\n      </Button>\n    </Box>\n  );\n};\n","import React from \"react\";\nimport { Alert as CAlert } from \"@chakra-ui/react/alert\";\nimport { Heading, HeadingProps } from \"components/Heading/heading.component\";\nimport { Icon, IconProps } from \"components/Icon/icon.component\";\nimport { Text, TextProps } from \"components/Text/text.component\";\nimport { Status } from \"shared/types/status\";\nimport { Button } from \"components/Button/button.component\";\nimport { AlertStatusIcon, AlertStatusToIconVariant } from \"./alert.records\";\nimport { Flex } from \"@chakra-ui/react/flex\";\nimport {\n  AlertButton,\n  AlertButtonProps,\n} from \"./components/AlertButton/alertButton.component\";\n\ninterface AlertBaseProps\n  extends Omit<\n    CAlert.RootProps,\n    \"title\" | \"status\" | \"children\" | \"variant\" | \"size\"\n  > {\n  buttonProps?: AlertButtonProps;\n  description?: string | React.ReactNode;\n  descriptionProps?: TextProps;\n  hideIcon?: boolean;\n  iconProps?: IconProps;\n  onContrast?: boolean;\n  status?: Status;\n  title?: string | React.ReactNode;\n  titleProps?: HeadingProps;\n}\n\ninterface DefaultAlertProps extends AlertBaseProps {\n  hideCloseButton?: true;\n  onClose?: never;\n}\n\ninterface ClosableAlertProps extends AlertBaseProps {\n  hideCloseButton: false;\n  onClose: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type AlertProps = DefaultAlertProps | ClosableAlertProps;\n\nexport const Alert = ({\n  buttonProps,\n  description,\n  descriptionProps,\n  hideCloseButton = false,\n  hideIcon = false,\n  iconProps,\n  onClose,\n  onContrast = false,\n  status = \"success\",\n  title,\n  titleProps,\n  ...rest\n}: AlertProps): React.JSX.Element => {\n  const isTopRightButton = buttonProps?.buttonPosition === \"topRight\";\n  const WithButtonWrapper = isTopRightButton ? Flex : React.Fragment;\n\n  return (\n    <CAlert.Root\n      className=\"Alert\"\n      data-testid=\"kibble-alert\"\n      {...rest}\n      variant={status}\n      hideIcon={hideIcon}\n      onContrast={onContrast}\n    >\n      {!hideIcon && (\n        <CAlert.Indicator\n          className=\"Alert__Icon\"\n          data-testid=\"kibble-alert-icon\"\n        >\n          <Icon\n            variant={\n              onContrast ? \"onContrast\" : AlertStatusToIconVariant[status]\n            }\n            name={iconProps?.name || AlertStatusIcon[status]}\n            size=\"lg\"\n            {...iconProps}\n          />\n        </CAlert.Indicator>\n      )}\n      <CAlert.Content\n        className=\"Alert__Content\"\n        data-testid=\"kibble-alert-content\"\n      >\n        {title && (\n          <WithButtonWrapper justifyContent=\"space-between\">\n            <CAlert.Title\n              className=\"Alert__Title\"\n              data-testid=\"kibble-alert-title\"\n            >\n              <Heading\n                size=\"sm\"\n                variant={onContrast ? \"onContrast\" : \"default\"}\n                {...titleProps}\n              >\n                {title}\n              </Heading>\n            </CAlert.Title>\n            {buttonProps?.buttonPosition === \"topRight\" && (\n              <AlertButton\n                status={status}\n                onContrast={onContrast}\n                {...buttonProps}\n              />\n            )}\n          </WithButtonWrapper>\n        )}\n        {description && (\n          <WithButtonWrapper justifyContent=\"space-between\">\n            <CAlert.Description\n              className=\"Alert__Description\"\n              data-testid=\"kibble-alert-description\"\n            >\n              {typeof description === \"string\" ? (\n                <Text\n                  size=\"md\"\n                  variant={onContrast ? \"onContrast\" : \"default\"}\n                  {...descriptionProps}\n                >\n                  {description}\n                </Text>\n              ) : (\n                description\n              )}\n            </CAlert.Description>\n            {buttonProps?.buttonPosition === \"topRight\" && !title && (\n              <AlertButton\n                status={status}\n                onContrast={onContrast}\n                {...buttonProps}\n              />\n            )}\n          </WithButtonWrapper>\n        )}\n        {buttonProps?.buttonPosition === \"bottomLeft\" && (\n          <AlertButton\n            status={status}\n            onContrast={onContrast}\n            {...buttonProps}\n          />\n        )}\n      </CAlert.Content>\n      {!hideCloseButton && (\n        <Button\n          iconName=\"close\"\n          size=\"xs\"\n          variant=\"ghostNeutral\"\n          onContrast={onContrast}\n          onClick={onClose}\n        />\n      )}\n    </CAlert.Root>\n  );\n};\n","export const alertButtonPositions = [\"topRight\", \"bottomLeft\"] as const;\nexport type AlertButtonPosition = (typeof alertButtonPositions)[number];\n"],"names":["AlertStatusIcon","AlertStatusToIconVariant","AlertButton","buttonPosition","buttonText","status","rest","jsx","Box","Button","Alert","buttonProps","description","descriptionProps","hideCloseButton","hideIcon","iconProps","onClose","onContrast","title","titleProps","WithButtonWrapper","Flex","React","jsxs","CAlert.Root","CAlert.Indicator","Icon","CAlert.Content","CAlert.Title","Heading","CAlert.Description","Text","alertButtonPositions"],"mappings":"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"}

package/dist/chunks/avatar.component-B9AMlLkB.js

@@ -0,0 +1,275 @@
+import { x as e } from "./vendor-D56wCYP8.js";
+import C, { useCallback as I, useMemo as p, useState as w } from "react";
+import { T as S } from "./tooltip.component-BWCxPfIL.js";
+import { I as b } from "./icon.component-ADHJf_mk.js";
+import "../components/Icon/generated/index.es.js";
+import { aN as m, c as A, u as R, F as z, B as _, aO as y, aP as F, aQ as M } from "./chakra-LFfg7ED-.js";
+import { g as W } from "./internal-utils-DreEpeAu.js";
+const H = ({
+  avatarSize: t,
+  onRemove: a,
+  isBeingHovered: r,
+  setIsBeingHovered: s
+}) => {
+  const o = I(
+    (l) => {
+      l.stopPropagation(), a && a(l);
+    },
+    [a]
+  );
+  return /* @__PURE__ */ e.jsx(
+    m,
+    {
+      className: "Avatar__RemoveButton",
+      "data-testid": "kibble-avatar-remove-button",
+      backgroundColor: "background",
+      borderRadius: "full",
+      cursor: "pointer",
+      display: "none",
+      h: 4,
+      onClick: o,
+      onMouseEnter: () => s(!0),
+      onMouseLeave: () => s(!1),
+      w: 4,
+      zIndex: "tooltip",
+      offset: t === "xl" ? 2 : 0.5,
+      _groupHover: {
+        display: "flex"
+      },
+      children: /* @__PURE__ */ e.jsx(
+        b,
+        {
+          variant: "default",
+          name: "closeCircleSolid",
+          size: r ? "sm" : "xs"
+        }
+      )
+    }
+  );
+}, O = {
+  info: {
+    bgColor: "background.info"
+  },
+  default: {
+    bgColor: "background.subtle.less"
+  },
+  error: {
+    bgColor: "background.danger"
+  },
+  success: {
+    bgColor: "background.success"
+  },
+  warning: {
+    bgColor: "background.warning"
+  }
+}, E = {
+  xs: {
+    boxSize: "10px"
+  },
+  sm: {
+    boxSize: "18px"
+  },
+  md: {
+    boxSize: "18px"
+  },
+  lg: {
+    boxSize: "18px"
+  },
+  xl: {
+    borderWidth: "2px",
+    boxSize: "24px"
+  }
+}, T = A({
+  base: {
+    alignItems: "center",
+    borderColor: "border.strong.contrast",
+    borderRadius: "full",
+    borderWidth: "1px",
+    justifyContent: "center"
+  },
+  variants: {
+    size: E,
+    status: O,
+    withIcon: {
+      true: {},
+      false: {}
+    }
+  },
+  defaultVariants: {
+    status: "info"
+  },
+  compoundVariants: [
+    {
+      withIcon: !1,
+      status: "info",
+      css: {
+        bgColor: "background.secondary"
+      }
+    },
+    {
+      withIcon: !1,
+      status: "default",
+      css: {
+        bgColor: "background.contrast"
+      }
+    },
+    {
+      withIcon: !1,
+      status: "error",
+      css: {
+        bgColor: "background.destructive"
+      }
+    },
+    {
+      withIcon: !1,
+      status: "success",
+      css: {
+        bgColor: "background.success.contrast"
+      }
+    },
+    {
+      withIcon: !1,
+      status: "warning",
+      css: {
+        bgColor: "background.warning.contrast"
+      }
+    },
+    {
+      withIcon: !1,
+      size: ["sm", "md", "lg"],
+      css: {
+        boxSize: "12px"
+      }
+    },
+    {
+      withIcon: !1,
+      size: "xl",
+      css: {
+        borderWidth: "2px",
+        boxSize: "16px"
+      }
+    }
+  ]
+}), V = {
+  xs: 0.5,
+  sm: 0.5,
+  md: 0.5,
+  lg: 0.5,
+  xl: 2
+}, L = {
+  xs: 0.5,
+  sm: 0.5,
+  md: 1,
+  lg: 1,
+  xl: 2
+}, N = ({
+  avatarSize: t,
+  iconName: a,
+  position: r = "bottom-end",
+  status: s = "info",
+  ...o
+}) => {
+  const d = R({ recipe: T })({ status: s, size: t, withIcon: !!a }), c = p(
+    () => t === "xs" || !a,
+    [a, t]
+  ), u = p(
+    () => c ? L : V,
+    [c]
+  );
+  return /* @__PURE__ */ e.jsx(
+    m,
+    {
+      className: "Avatar__BadgeWrapper",
+      "data-testid": "kibble-avatar-badge-wrapper",
+      offset: u[t],
+      placement: r,
+      children: /* @__PURE__ */ e.jsx(
+        z,
+        {
+          className: "Avatar__Badge",
+          "data-testid": "kibble-avatar-badge",
+          css: d,
+          ...o,
+          children: !c && a && /* @__PURE__ */ e.jsx(
+            b,
+            {
+              name: a,
+              variant: s !== "error" ? s : "danger",
+              size: t === "xl" ? "sm" : "xs"
+            }
+          )
+        }
+      )
+    }
+  );
+}, X = ({
+  badgeProps: t,
+  hideBorder: a,
+  iconName: r,
+  name: s = "",
+  onClick: o,
+  onRemove: l,
+  showBadge: d,
+  showRemoveButton: c,
+  showTooltip: u = !0,
+  size: n = "md",
+  src: g,
+  tooltipProps: i,
+  variant: v = "default",
+  webpSrc: x,
+  ...h
+}) => {
+  const [f, k] = w(!1), j = u && !f ? ({ children: B }) => /* @__PURE__ */ e.jsx(
+    S,
+    {
+      "data-testid": "kibble-avatar-tooltip",
+      ...i,
+      label: i?.label || s,
+      disabled: !s && !i?.label,
+      placement: i?.placement || "bottom",
+      children: /* @__PURE__ */ e.jsx(_, { children: B })
+    }
+  ) : C.Fragment;
+  return /* @__PURE__ */ e.jsx(j, { children: /* @__PURE__ */ e.jsxs(
+    y,
+    {
+      className: "Avatar group",
+      "data-testid": "kibble-avatar",
+      variant: v,
+      size: n,
+      interactive: !!o,
+      hideBorder: a,
+      onClick: o,
+      ...h,
+      children: [
+        /* @__PURE__ */ e.jsx(F, { name: s, children: r && /* @__PURE__ */ e.jsx(
+          b,
+          {
+            name: r,
+            pt: "-1px",
+            size: n === "lg" ? "lg" : W({
+              currentSize: n,
+              larger: !0,
+              delta: 1
+            })
+          }
+        ) }),
+        d && /* @__PURE__ */ e.jsx(N, { avatarSize: n, ...t }),
+        (x || g) && /* @__PURE__ */ e.jsx(M, { src: g, srcSet: x }),
+        c && n !== "xs" && /* @__PURE__ */ e.jsx(
+          H,
+          {
+            avatarSize: n,
+            onRemove: l,
+            isBeingHovered: f,
+            setIsBeingHovered: k
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  X as A
+};
+//# sourceMappingURL=avatar.component-B9AMlLkB.js.map

package/dist/chunks/avatar.component-B9AMlLkB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.component-B9AMlLkB.js","sources":["../../src/components/Avatar/components/AvatarRemoveButton/avatarRemoveButton.component.tsx","../../src/components/Avatar/components/AvatarBadge/avatarBadge.recipe.ts","../../src/components/Avatar/components/AvatarBadge/avatarBadge.records.ts","../../src/components/Avatar/components/AvatarBadge/avatarBadge.component.tsx","../../src/components/Avatar/avatar.component.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  MouseEvent,\n  Dispatch,\n  SetStateAction,\n} from \"react\";\nimport { Float } from \"@chakra-ui/react/float\";\nimport { Icon } from \"components/Icon/icon.component\";\n\ninterface AvatarRemoveButtonProps {\n  onRemove?: React.MouseEventHandler<HTMLDivElement>;\n  isBeingHovered: boolean;\n  setIsBeingHovered: Dispatch<SetStateAction<boolean>>;\n}\n\ninterface InternalAvatarRemoveButtonProps extends AvatarRemoveButtonProps {\n  avatarSize: string;\n}\n\nconst AvatarRemoveButton = ({\n  avatarSize,\n  onRemove,\n  isBeingHovered,\n  setIsBeingHovered,\n}: InternalAvatarRemoveButtonProps): React.JSX.Element => {\n  const onRemoveButtonClick = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      e.stopPropagation();\n\n      if (onRemove) {\n        onRemove(e);\n      }\n    },\n    [onRemove],\n  );\n\n  return (\n    <Float\n      className=\"Avatar__RemoveButton\"\n      data-testid=\"kibble-avatar-remove-button\"\n      backgroundColor=\"background\"\n      borderRadius=\"full\"\n      cursor=\"pointer\"\n      display=\"none\"\n      h={4}\n      onClick={onRemoveButtonClick}\n      onMouseEnter={(): void => setIsBeingHovered(true)}\n      onMouseLeave={(): void => setIsBeingHovered(false)}\n      w={4}\n      zIndex=\"tooltip\"\n      offset={avatarSize === \"xl\" ? 2 : 0.5}\n      _groupHover={{\n        display: \"flex\",\n      }}\n    >\n      <Icon\n        variant=\"default\"\n        name=\"closeCircleSolid\"\n        size={isBeingHovered ? \"sm\" : \"xs\"}\n      />\n    </Float>\n  );\n};\n\nexport default AvatarRemoveButton;\n","import {\n  defineRecipe,\n  SystemStyleObject,\n} from \"@chakra-ui/react/styled-system\";\nimport { AvatarSize } from \"components/Avatar/avatar.types\";\nimport { Status } from \"shared/types/status\";\n\nconst avatarBadgeStatusStyles: Record<Status, SystemStyleObject> = {\n  info: {\n    bgColor: \"background.info\",\n  },\n  default: {\n    bgColor: \"background.subtle.less\",\n  },\n  error: {\n    bgColor: \"background.danger\",\n  },\n  success: {\n    bgColor: \"background.success\",\n  },\n  warning: {\n    bgColor: \"background.warning\",\n  },\n};\n\nconst avatarBadgeSizeStyles: Record<AvatarSize, SystemStyleObject> = {\n  xs: {\n    boxSize: \"10px\",\n  },\n  sm: {\n    boxSize: \"18px\",\n  },\n  md: {\n    boxSize: \"18px\",\n  },\n  lg: {\n    boxSize: \"18px\",\n  },\n  xl: {\n    borderWidth: \"2px\",\n    boxSize: \"24px\",\n  },\n};\n\nexport const avatarBadgeRecipe = defineRecipe({\n  base: {\n    alignItems: \"center\",\n    borderColor: \"border.strong.contrast\",\n    borderRadius: \"full\",\n    borderWidth: \"1px\",\n    justifyContent: \"center\",\n  },\n  variants: {\n    size: avatarBadgeSizeStyles,\n    status: avatarBadgeStatusStyles,\n    withIcon: {\n      true: {},\n      false: {},\n    },\n  },\n  defaultVariants: {\n    status: \"info\",\n  },\n  compoundVariants: [\n    {\n      withIcon: false,\n      status: \"info\",\n      css: {\n        bgColor: \"background.secondary\",\n      },\n    },\n    {\n      withIcon: false,\n      status: \"default\",\n      css: {\n        bgColor: \"background.contrast\",\n      },\n    },\n    {\n      withIcon: false,\n      status: \"error\",\n      css: {\n        bgColor: \"background.destructive\",\n      },\n    },\n    {\n      withIcon: false,\n      status: \"success\",\n      css: {\n        bgColor: \"background.success.contrast\",\n      },\n    },\n    {\n      withIcon: false,\n      status: \"warning\",\n      css: {\n        bgColor: \"background.warning.contrast\",\n      },\n    },\n    {\n      withIcon: false,\n      size: [\"sm\", \"md\", \"lg\"],\n      css: {\n        boxSize: \"12px\",\n      },\n    },\n    {\n      withIcon: false,\n      size: \"xl\",\n      css: {\n        borderWidth: \"2px\",\n        boxSize: \"16px\",\n      },\n    },\n  ],\n});\n","import { AvatarSize } from \"components/Avatar/avatar.types\";\n\nexport const iconBadgeOffsetMap: Record<AvatarSize, number> = {\n  xs: 0.5,\n  sm: 0.5,\n  md: 0.5,\n  lg: 0.5,\n  xl: 2,\n};\n\nexport const badgeOffsetMap: Record<AvatarSize, number> = {\n  xs: 0.5,\n  sm: 0.5,\n  md: 1,\n  lg: 1,\n  xl: 2,\n};\n","import React, { useMemo } from \"react\";\nimport { Float } from \"@chakra-ui/react/float\";\nimport { Icon, IconName } from \"components/Icon\";\nimport { TypographyVariant } from \"shared/types/typography\";\nimport { AvatarSize } from \"components/Avatar/avatar.types\";\nimport { ConditionalValue, useRecipe } from \"@chakra-ui/react/styled-system\";\nimport { AvatarBadgePosition } from \"./avatarBadge.types\";\nimport { Flex, FlexProps } from \"@chakra-ui/react/flex\";\nimport { avatarBadgeRecipe } from \"./avatarBadge.recipe\";\nimport { Status } from \"shared/types/status\";\nimport { badgeOffsetMap, iconBadgeOffsetMap } from \"./avatarBadge.records\";\n\nexport interface AvatarBadgeProps extends FlexProps {\n  iconName?: IconName;\n  position?: ConditionalValue<AvatarBadgePosition>;\n  status?: Status;\n}\n\ninterface InternalAvatarBadgeProps extends AvatarBadgeProps {\n  avatarSize: AvatarSize;\n}\n\nexport const AvatarBadge = ({\n  avatarSize,\n  iconName,\n  position = \"bottom-end\",\n  status = \"info\",\n  ...rest\n}: InternalAvatarBadgeProps): React.JSX.Element => {\n  const recipe = useRecipe({ recipe: avatarBadgeRecipe });\n  const styles = recipe({ status, size: avatarSize, withIcon: !!iconName });\n  const useSmallBadge = useMemo(\n    () => avatarSize === \"xs\" || !iconName,\n    [iconName, avatarSize],\n  );\n  const offsetRecord = useMemo(\n    () => (useSmallBadge ? badgeOffsetMap : iconBadgeOffsetMap),\n    [useSmallBadge],\n  );\n\n  return (\n    <Float\n      className=\"Avatar__BadgeWrapper\"\n      data-testid=\"kibble-avatar-badge-wrapper\"\n      offset={offsetRecord[avatarSize]}\n      placement={position}\n    >\n      <Flex\n        className=\"Avatar__Badge\"\n        data-testid=\"kibble-avatar-badge\"\n        css={styles}\n        {...rest}\n      >\n        {!useSmallBadge && iconName && (\n          <Icon\n            name={iconName}\n            variant={\n              status !== \"error\" ? (status as TypographyVariant) : \"danger\"\n            }\n            size={avatarSize === \"xl\" ? \"sm\" : \"xs\"}\n          />\n        )}\n      </Flex>\n    </Float>\n  );\n};\n","import React, { useState } from \"react\";\nimport { Avatar as CAvatar } from \"@chakra-ui/react/avatar\";\nimport { Tooltip, TooltipProps } from \"components/Tooltip/tooltip.component\";\nimport { Icon, IconName } from \"components/Icon\";\nimport AvatarRemoveButton from \"./components/AvatarRemoveButton/avatarRemoveButton.component\";\nimport { AvatarSize, AvatarVariant } from \"./avatar.types\";\nimport { getNextIconSize } from \"shared/utils/sizes\";\nimport { Box } from \"@chakra-ui/react/box\";\nimport {\n  AvatarBadge,\n  AvatarBadgeProps,\n} from \"./components/AvatarBadge/avatarBadge.component\";\n\nexport interface AvatarProps extends CAvatar.RootProps {\n  badgeProps?: AvatarBadgeProps;\n  hideBorder?: boolean;\n  iconName?: IconName;\n  name?: string;\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onRemove?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  showBadge?: boolean;\n  showRemoveButton?: boolean;\n  showTooltip?: boolean;\n  size?: AvatarSize;\n  src?: string;\n  tooltipProps?: TooltipProps;\n  variant?: AvatarVariant;\n  webpSrc?: string;\n}\n\nexport const Avatar = ({\n  badgeProps,\n  hideBorder,\n  iconName,\n  name = \"\",\n  onClick,\n  onRemove,\n  showBadge,\n  showRemoveButton,\n  showTooltip = true,\n  size = \"md\",\n  src,\n  tooltipProps,\n  variant = \"default\",\n  webpSrc,\n  ...rest\n}: AvatarProps): React.JSX.Element => {\n  const [isHoveringRemoveButton, setIsHoveringRemoveButton] = useState(false);\n  const AvatarWrapper: React.FC<AvatarProps> =\n    showTooltip && !isHoveringRemoveButton\n      ? ({ children }): React.JSX.Element => {\n          return (\n            <Tooltip\n              data-testid=\"kibble-avatar-tooltip\"\n              {...tooltipProps}\n              label={tooltipProps?.label || name}\n              disabled={!name && !tooltipProps?.label}\n              placement={tooltipProps?.placement || \"bottom\"}\n            >\n              <Box>{children}</Box>\n            </Tooltip>\n          );\n        }\n      : React.Fragment;\n\n  return (\n    <AvatarWrapper>\n      <CAvatar.Root\n        className=\"Avatar group\"\n        data-testid=\"kibble-avatar\"\n        variant={variant}\n        size={size}\n        interactive={!!onClick}\n        hideBorder={hideBorder}\n        onClick={onClick}\n        {...rest}\n      >\n        <CAvatar.Fallback name={name}>\n          {iconName && (\n            <Icon\n              name={iconName}\n              pt=\"-1px\"\n              size={\n                size === \"lg\"\n                  ? \"lg\"\n                  : getNextIconSize({\n                      currentSize: size,\n                      larger: true,\n                      delta: 1,\n                    })\n              }\n            />\n          )}\n        </CAvatar.Fallback>\n        {showBadge && <AvatarBadge avatarSize={size} {...badgeProps} />}\n        {(webpSrc || src) && <CAvatar.Image src={src} srcSet={webpSrc} />}\n        {showRemoveButton && size !== \"xs\" && (\n          <AvatarRemoveButton\n            avatarSize={size}\n            onRemove={onRemove}\n            isBeingHovered={isHoveringRemoveButton}\n            setIsBeingHovered={setIsHoveringRemoveButton}\n          />\n        )}\n      </CAvatar.Root>\n    </AvatarWrapper>\n  );\n};\n"],"names":["AvatarRemoveButton","avatarSize","onRemove","isBeingHovered","setIsBeingHovered","onRemoveButtonClick","useCallback","e","jsx","Float","Icon","avatarBadgeStatusStyles","avatarBadgeSizeStyles","avatarBadgeRecipe","defineRecipe","iconBadgeOffsetMap","badgeOffsetMap","AvatarBadge","iconName","position","status","rest","styles","useRecipe","useSmallBadge","useMemo","offsetRecord","Flex","Avatar","badgeProps","hideBorder","name","onClick","showBadge","showRemoveButton","showTooltip","size","src","tooltipProps","variant","webpSrc","isHoveringRemoveButton","setIsHoveringRemoveButton","useState","AvatarWrapper","children","Tooltip","Box","React","jsxs","CAvatar.Root","CAvatar.Fallback","getNextIconSize","CAvatar.Image"],"mappings":"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"}

package/dist/chunks/avatar.component-CAP2ZsZn.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("./vendor-CsrlYH7V.js"),u=require("react"),I=require("./tooltip.component-Cp8vLMVq.js"),g=require("./icon.component-DIxGH95k.js");require("../components/Icon/generated/index.cjs.js");const a=require("./chakra-CQVPsvk3.js"),C=require("./internal-utils-C8S2e6y9.js"),B=({avatarSize:r,onRemove:t,isBeingHovered:o,setIsBeingHovered:s})=>{const n=u.useCallback(c=>{c.stopPropagation(),t&&t(c)},[t]);return e.jsxRuntimeExports.jsx(a.Float,{className:"Avatar__RemoveButton","data-testid":"kibble-avatar-remove-button",backgroundColor:"background",borderRadius:"full",cursor:"pointer",display:"none",h:4,onClick:n,onMouseEnter:()=>s(!0),onMouseLeave:()=>s(!1),w:4,zIndex:"tooltip",offset:r==="xl"?2:.5,_groupHover:{display:"flex"},children:e.jsxRuntimeExports.jsx(g.Icon,{variant:"default",name:"closeCircleSolid",size:o?"sm":"xs"})})},E={info:{bgColor:"background.info"},default:{bgColor:"background.subtle.less"},error:{bgColor:"background.danger"},success:{bgColor:"background.success"},warning:{bgColor:"background.warning"}},w={xs:{boxSize:"10px"},sm:{boxSize:"18px"},md:{boxSize:"18px"},lg:{boxSize:"18px"},xl:{borderWidth:"2px",boxSize:"24px"}},S=a.defineRecipe({base:{alignItems:"center",borderColor:"border.strong.contrast",borderRadius:"full",borderWidth:"1px",justifyContent:"center"},variants:{size:w,status:E,withIcon:{true:{},false:{}}},defaultVariants:{status:"info"},compoundVariants:[{withIcon:!1,status:"info",css:{bgColor:"background.secondary"}},{withIcon:!1,status:"default",css:{bgColor:"background.contrast"}},{withIcon:!1,status:"error",css:{bgColor:"background.destructive"}},{withIcon:!1,status:"success",css:{bgColor:"background.success.contrast"}},{withIcon:!1,status:"warning",css:{bgColor:"background.warning.contrast"}},{withIcon:!1,size:["sm","md","lg"],css:{boxSize:"12px"}},{withIcon:!1,size:"xl",css:{borderWidth:"2px",boxSize:"16px"}}]}),A={xs:.5,sm:.5,md:.5,lg:.5,xl:2},z={xs:.5,sm:.5,md:1,lg:1,xl:2},_=({avatarSize:r,iconName:t,position:o="bottom-end",status:s="info",...n})=>{const x=a.useRecipe({recipe:S})({status:s,size:r,withIcon:!!t}),l=u.useMemo(()=>r==="xs"||!t,[t,r]),b=u.useMemo(()=>l?z:A,[l]);return e.jsxRuntimeExports.jsx(a.Float,{className:"Avatar__BadgeWrapper","data-testid":"kibble-avatar-badge-wrapper",offset:b[r],placement:o,children:e.jsxRuntimeExports.jsx(a.Flex,{className:"Avatar__Badge","data-testid":"kibble-avatar-badge",css:x,...n,children:!l&&t&&e.jsxRuntimeExports.jsx(g.Icon,{name:t,variant:s!=="error"?s:"danger",size:r==="xl"?"sm":"xs"})})})},q=({badgeProps:r,hideBorder:t,iconName:o,name:s="",onClick:n,onRemove:c,showBadge:x,showRemoveButton:l,showTooltip:b=!0,size:i="md",src:p,tooltipProps:d,variant:v="default",webpSrc:m,...j})=>{const[f,R]=u.useState(!1),h=b&&!f?({children:k})=>e.jsxRuntimeExports.jsx(I.Tooltip,{"data-testid":"kibble-avatar-tooltip",...d,label:d?.label||s,disabled:!s&&!d?.label,placement:d?.placement||"bottom",children:e.jsxRuntimeExports.jsx(a.Box,{children:k})}):u.Fragment;return e.jsxRuntimeExports.jsx(h,{children:e.jsxRuntimeExports.jsxs(a.AvatarRoot,{className:"Avatar group","data-testid":"kibble-avatar",variant:v,size:i,interactive:!!n,hideBorder:t,onClick:n,...j,children:[e.jsxRuntimeExports.jsx(a.AvatarFallback,{name:s,children:o&&e.jsxRuntimeExports.jsx(g.Icon,{name:o,pt:"-1px",size:i==="lg"?"lg":C.getNextIconSize({currentSize:i,larger:!0,delta:1})})}),x&&e.jsxRuntimeExports.jsx(_,{avatarSize:i,...r}),(m||p)&&e.jsxRuntimeExports.jsx(a.AvatarImage,{src:p,srcSet:m}),l&&i!=="xs"&&e.jsxRuntimeExports.jsx(B,{avatarSize:i,onRemove:c,isBeingHovered:f,setIsBeingHovered:R})]})})};exports.Avatar=q;
+//# sourceMappingURL=avatar.component-CAP2ZsZn.js.map

package/dist/chunks/avatar.component-CAP2ZsZn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.component-CAP2ZsZn.js","sources":["../../src/components/Avatar/components/AvatarRemoveButton/avatarRemoveButton.component.tsx","../../src/components/Avatar/components/AvatarBadge/avatarBadge.recipe.ts","../../src/components/Avatar/components/AvatarBadge/avatarBadge.records.ts","../../src/components/Avatar/components/AvatarBadge/avatarBadge.component.tsx","../../src/components/Avatar/avatar.component.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  MouseEvent,\n  Dispatch,\n  SetStateAction,\n} from \"react\";\nimport { Float } from \"@chakra-ui/react/float\";\nimport { Icon } from \"components/Icon/icon.component\";\n\ninterface AvatarRemoveButtonProps {\n  onRemove?: React.MouseEventHandler<HTMLDivElement>;\n  isBeingHovered: boolean;\n  setIsBeingHovered: Dispatch<SetStateAction<boolean>>;\n}\n\ninterface InternalAvatarRemoveButtonProps extends AvatarRemoveButtonProps {\n  avatarSize: string;\n}\n\nconst AvatarRemoveButton = ({\n  avatarSize,\n  onRemove,\n  isBeingHovered,\n  setIsBeingHovered,\n}: InternalAvatarRemoveButtonProps): React.JSX.Element => {\n  const onRemoveButtonClick = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      e.stopPropagation();\n\n      if (onRemove) {\n        onRemove(e);\n      }\n    },\n    [onRemove],\n  );\n\n  return (\n    <Float\n      className=\"Avatar__RemoveButton\"\n      data-testid=\"kibble-avatar-remove-button\"\n      backgroundColor=\"background\"\n      borderRadius=\"full\"\n      cursor=\"pointer\"\n      display=\"none\"\n      h={4}\n      onClick={onRemoveButtonClick}\n      onMouseEnter={(): void => setIsBeingHovered(true)}\n      onMouseLeave={(): void => setIsBeingHovered(false)}\n      w={4}\n      zIndex=\"tooltip\"\n      offset={avatarSize === \"xl\" ? 2 : 0.5}\n      _groupHover={{\n        display: \"flex\",\n      }}\n    >\n      <Icon\n        variant=\"default\"\n        name=\"closeCircleSolid\"\n        size={isBeingHovered ? \"sm\" : \"xs\"}\n      />\n    </Float>\n  );\n};\n\nexport default AvatarRemoveButton;\n","import {\n  defineRecipe,\n  SystemStyleObject,\n} from \"@chakra-ui/react/styled-system\";\nimport { AvatarSize } from \"components/Avatar/avatar.types\";\nimport { Status } from \"shared/types/status\";\n\nconst avatarBadgeStatusStyles: Record<Status, SystemStyleObject> = {\n  info: {\n    bgColor: \"background.info\",\n  },\n  default: {\n    bgColor: \"background.subtle.less\",\n  },\n  error: {\n    bgColor: \"background.danger\",\n  },\n  success: {\n    bgColor: \"background.success\",\n  },\n  warning: {\n    bgColor: \"background.warning\",\n  },\n};\n\nconst avatarBadgeSizeStyles: Record<AvatarSize, SystemStyleObject> = {\n  xs: {\n    boxSize: \"10px\",\n  },\n  sm: {\n    boxSize: \"18px\",\n  },\n  md: {\n    boxSize: \"18px\",\n  },\n  lg: {\n    boxSize: \"18px\",\n  },\n  xl: {\n    borderWidth: \"2px\",\n    boxSize: \"24px\",\n  },\n};\n\nexport const avatarBadgeRecipe = defineRecipe({\n  base: {\n    alignItems: \"center\",\n    borderColor: \"border.strong.contrast\",\n    borderRadius: \"full\",\n    borderWidth: \"1px\",\n    justifyContent: \"center\",\n  },\n  variants: {\n    size: avatarBadgeSizeStyles,\n    status: avatarBadgeStatusStyles,\n    withIcon: {\n      true: {},\n      false: {},\n    },\n  },\n  defaultVariants: {\n    status: \"info\",\n  },\n  compoundVariants: [\n    {\n      withIcon: false,\n      status: \"info\",\n      css: {\n        bgColor: \"background.secondary\",\n      },\n    },\n    {\n      withIcon: false,\n      status: \"default\",\n      css: {\n        bgColor: \"background.contrast\",\n      },\n    },\n    {\n      withIcon: false,\n      status: \"error\",\n      css: {\n        bgColor: \"background.destructive\",\n      },\n    },\n    {\n      withIcon: false,\n      status: \"success\",\n      css: {\n        bgColor: \"background.success.contrast\",\n      },\n    },\n    {\n      withIcon: false,\n      status: \"warning\",\n      css: {\n        bgColor: \"background.warning.contrast\",\n      },\n    },\n    {\n      withIcon: false,\n      size: [\"sm\", \"md\", \"lg\"],\n      css: {\n        boxSize: \"12px\",\n      },\n    },\n    {\n      withIcon: false,\n      size: \"xl\",\n      css: {\n        borderWidth: \"2px\",\n        boxSize: \"16px\",\n      },\n    },\n  ],\n});\n","import { AvatarSize } from \"components/Avatar/avatar.types\";\n\nexport const iconBadgeOffsetMap: Record<AvatarSize, number> = {\n  xs: 0.5,\n  sm: 0.5,\n  md: 0.5,\n  lg: 0.5,\n  xl: 2,\n};\n\nexport const badgeOffsetMap: Record<AvatarSize, number> = {\n  xs: 0.5,\n  sm: 0.5,\n  md: 1,\n  lg: 1,\n  xl: 2,\n};\n","import React, { useMemo } from \"react\";\nimport { Float } from \"@chakra-ui/react/float\";\nimport { Icon, IconName } from \"components/Icon\";\nimport { TypographyVariant } from \"shared/types/typography\";\nimport { AvatarSize } from \"components/Avatar/avatar.types\";\nimport { ConditionalValue, useRecipe } from \"@chakra-ui/react/styled-system\";\nimport { AvatarBadgePosition } from \"./avatarBadge.types\";\nimport { Flex, FlexProps } from \"@chakra-ui/react/flex\";\nimport { avatarBadgeRecipe } from \"./avatarBadge.recipe\";\nimport { Status } from \"shared/types/status\";\nimport { badgeOffsetMap, iconBadgeOffsetMap } from \"./avatarBadge.records\";\n\nexport interface AvatarBadgeProps extends FlexProps {\n  iconName?: IconName;\n  position?: ConditionalValue<AvatarBadgePosition>;\n  status?: Status;\n}\n\ninterface InternalAvatarBadgeProps extends AvatarBadgeProps {\n  avatarSize: AvatarSize;\n}\n\nexport const AvatarBadge = ({\n  avatarSize,\n  iconName,\n  position = \"bottom-end\",\n  status = \"info\",\n  ...rest\n}: InternalAvatarBadgeProps): React.JSX.Element => {\n  const recipe = useRecipe({ recipe: avatarBadgeRecipe });\n  const styles = recipe({ status, size: avatarSize, withIcon: !!iconName });\n  const useSmallBadge = useMemo(\n    () => avatarSize === \"xs\" || !iconName,\n    [iconName, avatarSize],\n  );\n  const offsetRecord = useMemo(\n    () => (useSmallBadge ? badgeOffsetMap : iconBadgeOffsetMap),\n    [useSmallBadge],\n  );\n\n  return (\n    <Float\n      className=\"Avatar__BadgeWrapper\"\n      data-testid=\"kibble-avatar-badge-wrapper\"\n      offset={offsetRecord[avatarSize]}\n      placement={position}\n    >\n      <Flex\n        className=\"Avatar__Badge\"\n        data-testid=\"kibble-avatar-badge\"\n        css={styles}\n        {...rest}\n      >\n        {!useSmallBadge && iconName && (\n          <Icon\n            name={iconName}\n            variant={\n              status !== \"error\" ? (status as TypographyVariant) : \"danger\"\n            }\n            size={avatarSize === \"xl\" ? \"sm\" : \"xs\"}\n          />\n        )}\n      </Flex>\n    </Float>\n  );\n};\n","import React, { useState } from \"react\";\nimport { Avatar as CAvatar } from \"@chakra-ui/react/avatar\";\nimport { Tooltip, TooltipProps } from \"components/Tooltip/tooltip.component\";\nimport { Icon, IconName } from \"components/Icon\";\nimport AvatarRemoveButton from \"./components/AvatarRemoveButton/avatarRemoveButton.component\";\nimport { AvatarSize, AvatarVariant } from \"./avatar.types\";\nimport { getNextIconSize } from \"shared/utils/sizes\";\nimport { Box } from \"@chakra-ui/react/box\";\nimport {\n  AvatarBadge,\n  AvatarBadgeProps,\n} from \"./components/AvatarBadge/avatarBadge.component\";\n\nexport interface AvatarProps extends CAvatar.RootProps {\n  badgeProps?: AvatarBadgeProps;\n  hideBorder?: boolean;\n  iconName?: IconName;\n  name?: string;\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onRemove?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  showBadge?: boolean;\n  showRemoveButton?: boolean;\n  showTooltip?: boolean;\n  size?: AvatarSize;\n  src?: string;\n  tooltipProps?: TooltipProps;\n  variant?: AvatarVariant;\n  webpSrc?: string;\n}\n\nexport const Avatar = ({\n  badgeProps,\n  hideBorder,\n  iconName,\n  name = \"\",\n  onClick,\n  onRemove,\n  showBadge,\n  showRemoveButton,\n  showTooltip = true,\n  size = \"md\",\n  src,\n  tooltipProps,\n  variant = \"default\",\n  webpSrc,\n  ...rest\n}: AvatarProps): React.JSX.Element => {\n  const [isHoveringRemoveButton, setIsHoveringRemoveButton] = useState(false);\n  const AvatarWrapper: React.FC<AvatarProps> =\n    showTooltip && !isHoveringRemoveButton\n      ? ({ children }): React.JSX.Element => {\n          return (\n            <Tooltip\n              data-testid=\"kibble-avatar-tooltip\"\n              {...tooltipProps}\n              label={tooltipProps?.label || name}\n              disabled={!name && !tooltipProps?.label}\n              placement={tooltipProps?.placement || \"bottom\"}\n            >\n              <Box>{children}</Box>\n            </Tooltip>\n          );\n        }\n      : React.Fragment;\n\n  return (\n    <AvatarWrapper>\n      <CAvatar.Root\n        className=\"Avatar group\"\n        data-testid=\"kibble-avatar\"\n        variant={variant}\n        size={size}\n        interactive={!!onClick}\n        hideBorder={hideBorder}\n        onClick={onClick}\n        {...rest}\n      >\n        <CAvatar.Fallback name={name}>\n          {iconName && (\n            <Icon\n              name={iconName}\n              pt=\"-1px\"\n              size={\n                size === \"lg\"\n                  ? \"lg\"\n                  : getNextIconSize({\n                      currentSize: size,\n                      larger: true,\n                      delta: 1,\n                    })\n              }\n            />\n          )}\n        </CAvatar.Fallback>\n        {showBadge && <AvatarBadge avatarSize={size} {...badgeProps} />}\n        {(webpSrc || src) && <CAvatar.Image src={src} srcSet={webpSrc} />}\n        {showRemoveButton && size !== \"xs\" && (\n          <AvatarRemoveButton\n            avatarSize={size}\n            onRemove={onRemove}\n            isBeingHovered={isHoveringRemoveButton}\n            setIsBeingHovered={setIsHoveringRemoveButton}\n          />\n        )}\n      </CAvatar.Root>\n    </AvatarWrapper>\n  );\n};\n"],"names":["AvatarRemoveButton","avatarSize","onRemove","isBeingHovered","setIsBeingHovered","onRemoveButtonClick","useCallback","e","jsx","Float","Icon","avatarBadgeStatusStyles","avatarBadgeSizeStyles","avatarBadgeRecipe","defineRecipe","iconBadgeOffsetMap","badgeOffsetMap","AvatarBadge","iconName","position","status","rest","styles","useRecipe","useSmallBadge","useMemo","offsetRecord","Flex","Avatar","badgeProps","hideBorder","name","onClick","showBadge","showRemoveButton","showTooltip","size","src","tooltipProps","variant","webpSrc","isHoveringRemoveButton","setIsHoveringRemoveButton","useState","AvatarWrapper","children","Tooltip","Box","React","jsxs","CAvatar.Root","CAvatar.Fallback","getNextIconSize","CAvatar.Image"],"mappings":"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"}

package/dist/chunks/avatarGroup.component-DiBoAbnD.js

@@ -0,0 +1,2 @@
+"use strict";const r=require("./vendor-CsrlYH7V.js"),s=require("react"),a=require("./avatar.component-CAP2ZsZn.js"),h=require("./chakra-CQVPsvk3.js"),j=({addButtonTooltipText:n,avatars:t,max:c=3,onAdd:m,onRemove:p,showAddButton:u=!0,showRemoveAvatarButton:i=!1,size:e="md",variant:l="default",...v})=>{const x=s.useMemo(()=>t.map(o=>o.name).join(", "),[t]),d=e==="xs"||e==="sm"?-1:-2;return r.jsxRuntimeExports.jsxs(h.AvatarGroup,{className:"AvatarGroup","data-testid":"kibble-avatar-group",gap:0,spaceX:d,stacking:"first-on-top",size:e,...v,children:[t.length>c?r.jsxRuntimeExports.jsx(a.Avatar,{name:`${t.length}`,size:e,variant:"contrast",showRemoveButton:!1,tooltipProps:{label:x}}):t.map((o,g)=>s.createElement(a.Avatar,{...o,key:o.name,size:e,variant:l||o.variant,showRemoveButton:i,onRemove:()=>p?.(g)})),u&&r.jsxRuntimeExports.jsx(a.Avatar,{variant:"dashed",iconName:"plus",onClick:m,...!!n&&{tooltipProps:{label:n}},size:e})]})};exports.AvatarGroup=j;
+//# sourceMappingURL=avatarGroup.component-DiBoAbnD.js.map

package/dist/chunks/avatarGroup.component-DiBoAbnD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatarGroup.component-DiBoAbnD.js","sources":["../../src/components/AvatarGroup/avatarGroup.component.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  AvatarGroup as CAvatarGroup,\n  AvatarGroupProps as CAvatarGroupProps,\n} from \"@chakra-ui/react/avatar\";\nimport { Avatar, AvatarProps } from \"components/Avatar/avatar.component\";\nimport { AvatarSize, AvatarVariant } from \"components/Avatar/avatar.types\";\n\nexport interface AvatarGroupProps extends CAvatarGroupProps {\n  addButtonTooltipText?: string;\n  avatars: AvatarProps[];\n  max?: number;\n  onAdd?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onRemove?: (index: number) => void;\n  showAddButton?: boolean;\n  showRemoveAvatarButton?: boolean;\n  size?: AvatarSize;\n  variant?: AvatarVariant;\n}\n\nexport const AvatarGroup = ({\n  addButtonTooltipText,\n  avatars,\n  max = 3,\n  onAdd,\n  onRemove,\n  showAddButton = true,\n  showRemoveAvatarButton = false,\n  size = \"md\",\n  variant = \"default\",\n  ...rest\n}: AvatarGroupProps): React.JSX.Element => {\n  const mergedNames = useMemo(\n    () => avatars.map((avatar) => avatar.name).join(\", \"),\n    [avatars],\n  );\n  const spacing = size === \"xs\" || size === \"sm\" ? -1 : -2;\n\n  return (\n    <CAvatarGroup\n      className=\"AvatarGroup\"\n      data-testid=\"kibble-avatar-group\"\n      gap={0}\n      spaceX={spacing}\n      stacking=\"first-on-top\"\n      size={size}\n      {...rest}\n    >\n      {avatars.length > max ? (\n        <Avatar\n          name={`${avatars.length}`}\n          size={size}\n          variant=\"contrast\"\n          showRemoveButton={false}\n          tooltipProps={{ label: mergedNames }}\n        />\n      ) : (\n        avatars.map((avatar, index) => (\n          <Avatar\n            {...avatar}\n            key={avatar.name}\n            size={size}\n            variant={variant || avatar.variant}\n            showRemoveButton={showRemoveAvatarButton}\n            onRemove={() => onRemove?.(index)}\n          />\n        ))\n      )}\n      {showAddButton && (\n        <Avatar\n          variant=\"dashed\"\n          iconName=\"plus\"\n          onClick={onAdd}\n          {...(!!addButtonTooltipText && {\n            tooltipProps: { label: addButtonTooltipText },\n          })}\n          size={size}\n        />\n      )}\n    </CAvatarGroup>\n  );\n};\n"],"names":["AvatarGroup","addButtonTooltipText","avatars","max","onAdd","onRemove","showAddButton","showRemoveAvatarButton","size","variant","rest","mergedNames","useMemo","avatar","spacing","jsxs","CAvatarGroup","jsx","Avatar","index","createElement"],"mappings":"sJAoBaA,EAAc,CAAC,CAC1B,qBAAAC,EACA,QAAAC,EACA,IAAAC,EAAM,EACN,MAAAC,EACA,SAAAC,EACA,cAAAC,EAAgB,GAChB,uBAAAC,EAAyB,GACzB,KAAAC,EAAO,KACP,QAAAC,EAAU,UACV,GAAGC,CACL,IAA2C,CACzC,MAAMC,EAAcC,EAAA,QAClB,IAAMV,EAAQ,IAAKW,GAAWA,EAAO,IAAI,EAAE,KAAK,IAAI,EACpD,CAACX,CAAO,CACV,EACMY,EAAUN,IAAS,MAAQA,IAAS,KAAO,GAAK,GAGpD,OAAAO,EAAA,kBAAA,KAACC,EAAA,YAAA,CACC,UAAU,cACV,cAAY,sBACZ,IAAK,EACL,OAAQF,EACR,SAAS,eACT,KAAAN,EACC,GAAGE,EAEH,SAAA,CAAAR,EAAQ,OAASC,EAChBc,EAAA,kBAAA,IAACC,EAAA,OAAA,CACC,KAAM,GAAGhB,EAAQ,MAAM,GACvB,KAAAM,EACA,QAAQ,WACR,iBAAkB,GAClB,aAAc,CAAE,MAAOG,CAAY,CAAA,CAGrC,EAAAT,EAAQ,IAAI,CAACW,EAAQM,IACnBC,EAAA,cAACF,EAAA,OAAA,CACE,GAAGL,EACJ,IAAKA,EAAO,KACZ,KAAAL,EACA,QAASC,GAAWI,EAAO,QAC3B,iBAAkBN,EAClB,SAAU,IAAMF,IAAWc,CAAK,CAAA,CAAA,CAEnC,EAEFb,GACCW,EAAA,kBAAA,IAACC,EAAA,OAAA,CACC,QAAQ,SACR,SAAS,OACT,QAASd,EACR,GAAI,CAAC,CAACH,GAAwB,CAC7B,aAAc,CAAE,MAAOA,CAAqB,CAC9C,EACA,KAAAO,CAAA,CAAA,CACF,CAAA,CAEJ,CAEJ"}