@televet/kibble-ui 5.0.18 → 5.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/alert.types-BlvzpzTn.js +2 -0
- package/dist/chunks/alert.types-BlvzpzTn.js.map +1 -0
- package/dist/chunks/{alert.types-DWm1TeiF.js → alert.types-C6EN46Ra.js} +39 -38
- package/dist/chunks/alert.types-C6EN46Ra.js.map +1 -0
- package/dist/cjs/components/Alert/index.cjs +1 -1
- package/dist/cjs/components/index.cjs +1 -1
- package/dist/cjs/index.cjs +1 -1
- package/dist/esm/components/Alert/index.js +1 -1
- package/dist/esm/components/index.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/types/components/Alert/alert.component.d.ts +4 -1
- package/package.json +1 -1
- package/dist/chunks/alert.types-Ch8hn5HY.js +0 -2
- package/dist/chunks/alert.types-Ch8hn5HY.js.map +0 -1
- package/dist/chunks/alert.types-DWm1TeiF.js.map +0 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const e=require("./jsx-runtime-BjDatQAs.js"),j=require("react"),y=require("./heading.component-DnoZOXdz.js"),C=require("./icon.component-B1hr5lLa.js"),q=require("./text.component-BDDz5KQP.js"),g=require("./button.component-DjdgBXDC.js"),A=require("./flex-BOU6tYUd.js"),f=require("../cjs/shared/records/index.cjs"),N=require("./provider-NDo8kOkE.js"),S=require("./create-slot-recipe-context-HXE1VazG.js"),w=require("./factory-a2SJjEvR.js"),l=require("./icons-B6Nwr9di.js"),B=t=>t&&t.__esModule?t:{default:t},k=B(j),[I,W]=N.createContext({name:"AlertStatusContext",hookName:"useAlertStatusContext",providerName:"<Alert />"}),{withProvider:z,withContext:R,useStyles:$}=S.createSlotRecipeContext({key:"alert"}),b=z("div","root",{forwardAsChild:!0,wrapElement(t,s){return e.jsxRuntimeExports.jsx(I,{value:{status:s.status||"info"},children:t})}}),F=R("div","title"),M=R("div","description"),D=R("div","content"),H={info:l.InfoIcon,warning:l.WarningIcon,success:l.CheckCircleIcon,error:l.WarningIcon,neutral:l.InfoIcon},L=j.forwardRef(function(s,a){const i=W(),r=$(),x=typeof i.status=="string"?H[i.status]:j.Fragment,{children:u=e.jsxRuntimeExports.jsx(x,{}),...n}=s;return e.jsxRuntimeExports.jsx(w.chakra.span,{ref:a,...n,css:[r.indicator,s.css],children:u})}),p=({buttonPosition:t="topRight",buttonText:s,status:a,["data-testid"]:i="kibble-alert-button",...r})=>e.jsxRuntimeExports.jsx(A.Flex,{className:"Alert__Button","data-testid":i,...t!=="topRight"&&{pt:2,pb:1},...t==="bottomRight"&&{justifyContent:"flex-end"},children:e.jsxRuntimeExports.jsx(g.Button,{size:"xs",variant:a==="default"?"primary":"secondary",w:"max-content",...r,children:s})}),T=({buttonProps:t,description:s,descriptionProps:a,hideCloseButton:i=!1,hideIcon:r=!1,iconProps:x,onClose:u,onContrast:n=!1,status:o="success",title:d,titleProps:_,closeButtonIcon:E="close",["data-testid"]:c="kibble-alert",...v})=>{t&&!t.buttonPosition&&(t.buttonPosition="topRight");const m=t&&t.buttonPosition==="topRight",h=m?A.Flex:k.default.Fragment;return e.jsxRuntimeExports.jsxs(b,{className:"Alert","data-testid":c,...v,variant:o,hideIcon:r,onContrast:n,children:[!r&&e.jsxRuntimeExports.jsx(L,{className:"Alert__Icon","data-testid":`${c}-icon`,children:e.jsxRuntimeExports.jsx(C.Icon,{variant:n?"onContrast":f.StatusTypographyMap[o],name:x?.name||f.StatusIconMap[o],size:"lg",...x})}),e.jsxRuntimeExports.jsxs(D,{className:"Alert__Content","data-testid":`${c}-content`,children:[d&&e.jsxRuntimeExports.jsxs(h,{...m&&{justifyContent:"space-between",gap:2},children:[e.jsxRuntimeExports.jsx(F,{className:"Alert__Title","data-testid":`${c}-title`,children:e.jsxRuntimeExports.jsx(y.WrappedHeading,{size:"sm",variant:n?"onContrast":"default",..._,children:d})}),t&&t.buttonPosition==="topRight"&&e.jsxRuntimeExports.jsx(p,{status:o,onContrast:n,...t})]}),s&&e.jsxRuntimeExports.jsxs(h,{...m&&{justifyContent:"space-between"},children:[e.jsxRuntimeExports.jsx(M,{className:"Alert__Description","data-testid":`${c}-description`,children:typeof s=="string"?e.jsxRuntimeExports.jsx(q.WrappedText,{size:"md",variant:n?"onContrast":"default",...a,children:s}):s}),t&&t.buttonPosition==="topRight"&&!d&&e.jsxRuntimeExports.jsx(p,{status:o,onContrast:n,...t})]}),t&&t?.buttonPosition!=="topRight"&&e.jsxRuntimeExports.jsx(p,{status:o,onContrast:n,...t})]}),!i&&e.jsxRuntimeExports.jsx(g.Button,{className:"Alert__CloseTrigger","data-testid":`${c}-close-trigger`,iconName:E,size:"xs",variant:"ghostNeutral",onContrast:n,onClick:u})]})},G=["topRight","bottomLeft","bottomRight"];exports.Alert=T;exports.alertButtonPositions=G;
|
|
2
|
+
//# sourceMappingURL=alert.types-BlvzpzTn.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert.types-BlvzpzTn.js","sources":["../../node_modules/@chakra-ui/react/dist/esm/components/alert/alert.js","../../src/components/Alert/components/AlertButton/alertButton.component.tsx","../../src/components/Alert/alert.component.tsx","../../src/components/Alert/alert.types.ts"],"sourcesContent":["\"use strict\";\n\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport { forwardRef, Fragment } from 'react';\nimport { createContext } from '../../create-context.js';\nimport { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';\nimport { chakra } from '../../styled-system/factory.js';\nimport { InfoIcon, WarningIcon, CheckCircleIcon } from '../icons.js';\n\nconst [AlertStatusProvider, useAlertStatusContext] = createContext({\n name: \"AlertStatusContext\",\n hookName: \"useAlertStatusContext\",\n providerName: \"<Alert />\"\n});\nconst {\n withProvider,\n withContext,\n useStyles: useAlertStyles,\n PropsProvider\n} = createSlotRecipeContext({ key: \"alert\" });\nconst AlertRoot = withProvider(\n \"div\",\n \"root\",\n {\n forwardAsChild: true,\n wrapElement(element, props) {\n return (\n // @ts-ignore fix later\n /* @__PURE__ */ jsx(AlertStatusProvider, { value: { status: props.status || \"info\" }, children: element })\n );\n }\n }\n);\nconst AlertPropsProvider = PropsProvider;\nconst AlertTitle = withContext(\n \"div\",\n \"title\"\n);\nconst AlertDescription = withContext(\"div\", \"description\");\nconst AlertContent = withContext(\n \"div\",\n \"content\"\n);\nconst iconMap = {\n info: InfoIcon,\n warning: WarningIcon,\n success: CheckCircleIcon,\n error: WarningIcon,\n neutral: InfoIcon\n};\nconst AlertIndicator = forwardRef(\n function AlertIndicator2(props, ref) {\n const api = useAlertStatusContext();\n const styles = useAlertStyles();\n const Icon = typeof api.status === \"string\" ? iconMap[api.status] : Fragment;\n const { children = /* @__PURE__ */ jsx(Icon, {}), ...rest } = props;\n return /* @__PURE__ */ jsx(chakra.span, { ref, ...rest, css: [styles.indicator, props.css], children });\n }\n);\n\nexport { AlertContent, AlertDescription, AlertIndicator, AlertPropsProvider, AlertRoot, AlertStatusProvider, AlertTitle, useAlertStatusContext, useAlertStyles };\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 { Flex } from '@chakra-ui/react/flex';\n\nexport interface AlertButtonProps extends Omit<ButtonProps, 'children'> {\n /** Position of the button.\n * @default topRight\n */\n buttonPosition?: AlertButtonPosition;\n /** Text to display in the button. */\n buttonText: string;\n /** Data test id for the button.\n * @default kibble-alert-button\n */\n 'data-testid'?: string;\n}\n\ninterface InternalAlertButtonProps extends AlertButtonProps {\n /** Status of the alert.\n * @internal\n */\n status: Status;\n}\n\nexport const AlertButton = ({\n buttonPosition = 'topRight',\n buttonText,\n status,\n ['data-testid']: dataTestId = 'kibble-alert-button',\n ...rest\n}: InternalAlertButtonProps): React.JSX.Element => {\n return (\n <Flex\n className=\"Alert__Button\"\n data-testid={dataTestId}\n {...(buttonPosition !== 'topRight' && { pt: 2, pb: 1 })}\n {...(buttonPosition === 'bottomRight' && { justifyContent: 'flex-end' })}\n >\n <Button size=\"xs\" variant={status === 'default' ? 'primary' : 'secondary'} w=\"max-content\" {...rest}>\n {buttonText}\n </Button>\n </Flex>\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 { Flex } from '@chakra-ui/react/flex';\nimport { AlertButton, AlertButtonProps } from './components/AlertButton/alertButton.component';\nimport { StatusIconMap, StatusTypographyMap } from 'shared/records/status';\nimport { IconName } from 'components/Icon/icon.types';\n\nexport interface AlertProps extends Omit<CAlert.RootProps, 'title' | 'status' | 'children' | 'variant' | 'size'> {\n /** Props to customize the alert button. */\n buttonProps?: AlertButtonProps;\n /** The body of the alert */\n description?: React.ReactNode;\n /** Props to customize the description when passed as a string. */\n descriptionProps?: TextProps;\n /**\n * If true, the close button will not be displayed.\n * @default false\n */\n hideCloseButton?: boolean;\n /**\n * If true, the icon will not be displayed.\n * @default false\n */\n hideIcon?: boolean;\n /** Props to customize the icon. */\n iconProps?: IconProps;\n /** Callback function to be called when the close button is clicked. */\n onClose?: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * If true, the alert will use a contrasting variant according to the selected status.\n * @default false\n */\n onContrast?: boolean;\n /**\n * The status of the alert. Determines the color of the alert.\n * @default success\n */\n status?: Status;\n /** The title of the alert. */\n title?: React.ReactNode;\n /** Props to customize the title when passed as a string. */\n titleProps?: HeadingProps;\n /** The name of the icon to be used as the close button. */\n closeButtonIcon?: IconName;\n /** Data test id for the alert.\n * @default kibble-alert\n */\n 'data-testid'?: string;\n}\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 closeButtonIcon = 'close',\n ['data-testid']: dataTestId = 'kibble-alert',\n ...rest\n}: AlertProps): React.JSX.Element => {\n if (buttonProps && !buttonProps.buttonPosition) {\n buttonProps.buttonPosition = 'topRight';\n }\n const isTopRightButton = buttonProps && buttonProps.buttonPosition === 'topRight';\n const WithButtonWrapper = isTopRightButton ? Flex : React.Fragment;\n\n return (\n <CAlert.Root\n className=\"Alert\"\n data-testid={dataTestId}\n {...rest}\n variant={status}\n hideIcon={hideIcon}\n onContrast={onContrast}\n >\n {!hideIcon && (\n <CAlert.Indicator className=\"Alert__Icon\" data-testid={`${dataTestId}-icon`}>\n <Icon\n variant={onContrast ? 'onContrast' : StatusTypographyMap[status]}\n name={iconProps?.name || StatusIconMap[status]}\n size=\"lg\"\n {...iconProps}\n />\n </CAlert.Indicator>\n )}\n <CAlert.Content className=\"Alert__Content\" data-testid={`${dataTestId}-content`}>\n {title && (\n <WithButtonWrapper\n {...(isTopRightButton && {\n justifyContent: 'space-between',\n gap: 2,\n })}\n >\n <CAlert.Title className=\"Alert__Title\" data-testid={`${dataTestId}-title`}>\n <Heading size=\"sm\" variant={onContrast ? 'onContrast' : 'default'} {...titleProps}>\n {title}\n </Heading>\n </CAlert.Title>\n {buttonProps && buttonProps.buttonPosition === 'topRight' && (\n <AlertButton status={status} onContrast={onContrast} {...buttonProps} />\n )}\n </WithButtonWrapper>\n )}\n {description && (\n <WithButtonWrapper {...(isTopRightButton && { justifyContent: 'space-between' })}>\n <CAlert.Description className=\"Alert__Description\" data-testid={`${dataTestId}-description`}>\n {typeof description === 'string' ? (\n <Text size=\"md\" variant={onContrast ? 'onContrast' : 'default'} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </CAlert.Description>\n {buttonProps && buttonProps.buttonPosition === 'topRight' && !title && (\n <AlertButton status={status} onContrast={onContrast} {...buttonProps} />\n )}\n </WithButtonWrapper>\n )}\n {buttonProps && buttonProps?.buttonPosition !== 'topRight' && (\n <AlertButton status={status} onContrast={onContrast} {...buttonProps} />\n )}\n </CAlert.Content>\n {!hideCloseButton && (\n <Button\n className=\"Alert__CloseTrigger\"\n data-testid={`${dataTestId}-close-trigger`}\n iconName={closeButtonIcon}\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', 'bottomRight'] as const;\nexport type AlertButtonPosition = (typeof alertButtonPositions)[number];\n"],"names":["AlertStatusProvider","useAlertStatusContext","createContext","withProvider","withContext","useAlertStyles","createSlotRecipeContext","AlertRoot","element","props","jsx","AlertTitle","AlertDescription","AlertContent","iconMap","InfoIcon","WarningIcon","CheckCircleIcon","AlertIndicator","forwardRef","ref","api","styles","Icon","Fragment","children","rest","chakra","AlertButton","buttonPosition","buttonText","status","dataTestId","Flex","Button","Alert","buttonProps","description","descriptionProps","hideCloseButton","hideIcon","iconProps","onClose","onContrast","title","titleProps","closeButtonIcon","isTopRightButton","WithButtonWrapper","React","jsxs","CAlert.Root","CAlert.Indicator","StatusTypographyMap","StatusIconMap","CAlert.Content","CAlert.Title","Heading","CAlert.Description","Text","alertButtonPositions"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import { j as e } from "./jsx-runtime-C5mzlN2N.js";
|
|
2
|
-
import
|
|
3
|
-
import { W as
|
|
4
|
-
import { I as
|
|
5
|
-
import { W
|
|
2
|
+
import y, { forwardRef as C, Fragment as N } from "react";
|
|
3
|
+
import { W as w } from "./heading.component-CpSAN3cv.js";
|
|
4
|
+
import { I as S } from "./icon.component-PV_nHBId.js";
|
|
5
|
+
import { W } from "./text.component-DhuUgP3j.js";
|
|
6
6
|
import { B as j } from "./button.component-BO6oee_V.js";
|
|
7
7
|
import { F as A } from "./flex-CX-8gE9T.js";
|
|
8
|
-
import { StatusIconMap as
|
|
9
|
-
import { c as
|
|
10
|
-
import { c as
|
|
11
|
-
import { c as
|
|
12
|
-
import { I as u, W as g, a as
|
|
13
|
-
const [
|
|
8
|
+
import { StatusIconMap as k, StatusTypographyMap as B } from "../esm/shared/records/index.js";
|
|
9
|
+
import { c as I } from "./provider-ClCAdPxy.js";
|
|
10
|
+
import { c as z } from "./create-slot-recipe-context-D_FXDJGp.js";
|
|
11
|
+
import { c as $ } from "./factory-BQshv7_b.js";
|
|
12
|
+
import { I as u, W as g, a as F } from "./icons-CoSqruIn.js";
|
|
13
|
+
const [b, M] = I({
|
|
14
14
|
name: "AlertStatusContext",
|
|
15
15
|
hookName: "useAlertStatusContext",
|
|
16
16
|
providerName: "<Alert />"
|
|
17
17
|
}), {
|
|
18
|
-
withProvider:
|
|
18
|
+
withProvider: D,
|
|
19
19
|
withContext: h,
|
|
20
|
-
useStyles:
|
|
21
|
-
} =
|
|
20
|
+
useStyles: E
|
|
21
|
+
} = z({ key: "alert" }), H = D(
|
|
22
22
|
"div",
|
|
23
23
|
"root",
|
|
24
24
|
{
|
|
@@ -26,26 +26,26 @@ const [F, b] = B({
|
|
|
26
26
|
wrapElement(t, s) {
|
|
27
27
|
return (
|
|
28
28
|
// @ts-ignore fix later
|
|
29
|
-
/* @__PURE__ */ e.jsx(
|
|
29
|
+
/* @__PURE__ */ e.jsx(b, { value: { status: s.status || "info" }, children: t })
|
|
30
30
|
);
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
-
),
|
|
33
|
+
), L = h(
|
|
34
34
|
"div",
|
|
35
35
|
"title"
|
|
36
|
-
),
|
|
36
|
+
), T = h("div", "description"), q = h(
|
|
37
37
|
"div",
|
|
38
38
|
"content"
|
|
39
|
-
),
|
|
39
|
+
), G = {
|
|
40
40
|
info: u,
|
|
41
41
|
warning: g,
|
|
42
|
-
success:
|
|
42
|
+
success: F,
|
|
43
43
|
error: g,
|
|
44
44
|
neutral: u
|
|
45
|
-
},
|
|
45
|
+
}, J = C(
|
|
46
46
|
function(s, c) {
|
|
47
|
-
const r =
|
|
48
|
-
return /* @__PURE__ */ e.jsx(
|
|
47
|
+
const r = M(), a = E(), l = typeof r.status == "string" ? G[r.status] : N, { children: m = /* @__PURE__ */ e.jsx(l, {}), ...i } = s;
|
|
48
|
+
return /* @__PURE__ */ e.jsx($.span, { ref: c, ...i, css: [a.indicator, s.css], children: m });
|
|
49
49
|
}
|
|
50
50
|
), x = ({
|
|
51
51
|
buttonPosition: t = "topRight",
|
|
@@ -62,7 +62,7 @@ const [F, b] = B({
|
|
|
62
62
|
...t === "bottomRight" && { justifyContent: "flex-end" },
|
|
63
63
|
children: /* @__PURE__ */ e.jsx(j, { size: "xs", variant: c === "default" ? "primary" : "secondary", w: "max-content", ...a, children: s })
|
|
64
64
|
}
|
|
65
|
-
),
|
|
65
|
+
), it = ({
|
|
66
66
|
buttonProps: t,
|
|
67
67
|
description: s,
|
|
68
68
|
descriptionProps: c,
|
|
@@ -74,31 +74,32 @@ const [F, b] = B({
|
|
|
74
74
|
status: o = "success",
|
|
75
75
|
title: d,
|
|
76
76
|
titleProps: R,
|
|
77
|
+
closeButtonIcon: v = "close",
|
|
77
78
|
["data-testid"]: n = "kibble-alert",
|
|
78
|
-
...
|
|
79
|
+
..._
|
|
79
80
|
}) => {
|
|
80
81
|
t && !t.buttonPosition && (t.buttonPosition = "topRight");
|
|
81
|
-
const f = t && t.buttonPosition === "topRight", p = f ? A :
|
|
82
|
+
const f = t && t.buttonPosition === "topRight", p = f ? A : y.Fragment;
|
|
82
83
|
return /* @__PURE__ */ e.jsxs(
|
|
83
|
-
|
|
84
|
+
H,
|
|
84
85
|
{
|
|
85
86
|
className: "Alert",
|
|
86
87
|
"data-testid": n,
|
|
87
|
-
...
|
|
88
|
+
..._,
|
|
88
89
|
variant: o,
|
|
89
90
|
hideIcon: a,
|
|
90
91
|
onContrast: i,
|
|
91
92
|
children: [
|
|
92
|
-
!a && /* @__PURE__ */ e.jsx(
|
|
93
|
-
|
|
93
|
+
!a && /* @__PURE__ */ e.jsx(J, { className: "Alert__Icon", "data-testid": `${n}-icon`, children: /* @__PURE__ */ e.jsx(
|
|
94
|
+
S,
|
|
94
95
|
{
|
|
95
|
-
variant: i ? "onContrast" :
|
|
96
|
-
name: l?.name ||
|
|
96
|
+
variant: i ? "onContrast" : B[o],
|
|
97
|
+
name: l?.name || k[o],
|
|
97
98
|
size: "lg",
|
|
98
99
|
...l
|
|
99
100
|
}
|
|
100
101
|
) }),
|
|
101
|
-
/* @__PURE__ */ e.jsxs(
|
|
102
|
+
/* @__PURE__ */ e.jsxs(q, { className: "Alert__Content", "data-testid": `${n}-content`, children: [
|
|
102
103
|
d && /* @__PURE__ */ e.jsxs(
|
|
103
104
|
p,
|
|
104
105
|
{
|
|
@@ -107,13 +108,13 @@ const [F, b] = B({
|
|
|
107
108
|
gap: 2
|
|
108
109
|
},
|
|
109
110
|
children: [
|
|
110
|
-
/* @__PURE__ */ e.jsx(
|
|
111
|
+
/* @__PURE__ */ e.jsx(L, { className: "Alert__Title", "data-testid": `${n}-title`, children: /* @__PURE__ */ e.jsx(w, { size: "sm", variant: i ? "onContrast" : "default", ...R, children: d }) }),
|
|
111
112
|
t && t.buttonPosition === "topRight" && /* @__PURE__ */ e.jsx(x, { status: o, onContrast: i, ...t })
|
|
112
113
|
]
|
|
113
114
|
}
|
|
114
115
|
),
|
|
115
116
|
s && /* @__PURE__ */ e.jsxs(p, { ...f && { justifyContent: "space-between" }, children: [
|
|
116
|
-
/* @__PURE__ */ e.jsx(
|
|
117
|
+
/* @__PURE__ */ e.jsx(T, { className: "Alert__Description", "data-testid": `${n}-description`, children: typeof s == "string" ? /* @__PURE__ */ e.jsx(W, { size: "md", variant: i ? "onContrast" : "default", ...c, children: s }) : s }),
|
|
117
118
|
t && t.buttonPosition === "topRight" && !d && /* @__PURE__ */ e.jsx(x, { status: o, onContrast: i, ...t })
|
|
118
119
|
] }),
|
|
119
120
|
t && t?.buttonPosition !== "topRight" && /* @__PURE__ */ e.jsx(x, { status: o, onContrast: i, ...t })
|
|
@@ -123,7 +124,7 @@ const [F, b] = B({
|
|
|
123
124
|
{
|
|
124
125
|
className: "Alert__CloseTrigger",
|
|
125
126
|
"data-testid": `${n}-close-trigger`,
|
|
126
|
-
iconName:
|
|
127
|
+
iconName: v,
|
|
127
128
|
size: "xs",
|
|
128
129
|
variant: "ghostNeutral",
|
|
129
130
|
onContrast: i,
|
|
@@ -133,9 +134,9 @@ const [F, b] = B({
|
|
|
133
134
|
]
|
|
134
135
|
}
|
|
135
136
|
);
|
|
136
|
-
},
|
|
137
|
+
}, rt = ["topRight", "bottomLeft", "bottomRight"];
|
|
137
138
|
export {
|
|
138
|
-
|
|
139
|
-
|
|
139
|
+
it as A,
|
|
140
|
+
rt as a
|
|
140
141
|
};
|
|
141
|
-
//# sourceMappingURL=alert.types-
|
|
142
|
+
//# sourceMappingURL=alert.types-C6EN46Ra.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert.types-C6EN46Ra.js","sources":["../../node_modules/@chakra-ui/react/dist/esm/components/alert/alert.js","../../src/components/Alert/components/AlertButton/alertButton.component.tsx","../../src/components/Alert/alert.component.tsx","../../src/components/Alert/alert.types.ts"],"sourcesContent":["\"use strict\";\n\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport { forwardRef, Fragment } from 'react';\nimport { createContext } from '../../create-context.js';\nimport { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';\nimport { chakra } from '../../styled-system/factory.js';\nimport { InfoIcon, WarningIcon, CheckCircleIcon } from '../icons.js';\n\nconst [AlertStatusProvider, useAlertStatusContext] = createContext({\n name: \"AlertStatusContext\",\n hookName: \"useAlertStatusContext\",\n providerName: \"<Alert />\"\n});\nconst {\n withProvider,\n withContext,\n useStyles: useAlertStyles,\n PropsProvider\n} = createSlotRecipeContext({ key: \"alert\" });\nconst AlertRoot = withProvider(\n \"div\",\n \"root\",\n {\n forwardAsChild: true,\n wrapElement(element, props) {\n return (\n // @ts-ignore fix later\n /* @__PURE__ */ jsx(AlertStatusProvider, { value: { status: props.status || \"info\" }, children: element })\n );\n }\n }\n);\nconst AlertPropsProvider = PropsProvider;\nconst AlertTitle = withContext(\n \"div\",\n \"title\"\n);\nconst AlertDescription = withContext(\"div\", \"description\");\nconst AlertContent = withContext(\n \"div\",\n \"content\"\n);\nconst iconMap = {\n info: InfoIcon,\n warning: WarningIcon,\n success: CheckCircleIcon,\n error: WarningIcon,\n neutral: InfoIcon\n};\nconst AlertIndicator = forwardRef(\n function AlertIndicator2(props, ref) {\n const api = useAlertStatusContext();\n const styles = useAlertStyles();\n const Icon = typeof api.status === \"string\" ? iconMap[api.status] : Fragment;\n const { children = /* @__PURE__ */ jsx(Icon, {}), ...rest } = props;\n return /* @__PURE__ */ jsx(chakra.span, { ref, ...rest, css: [styles.indicator, props.css], children });\n }\n);\n\nexport { AlertContent, AlertDescription, AlertIndicator, AlertPropsProvider, AlertRoot, AlertStatusProvider, AlertTitle, useAlertStatusContext, useAlertStyles };\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 { Flex } from '@chakra-ui/react/flex';\n\nexport interface AlertButtonProps extends Omit<ButtonProps, 'children'> {\n /** Position of the button.\n * @default topRight\n */\n buttonPosition?: AlertButtonPosition;\n /** Text to display in the button. */\n buttonText: string;\n /** Data test id for the button.\n * @default kibble-alert-button\n */\n 'data-testid'?: string;\n}\n\ninterface InternalAlertButtonProps extends AlertButtonProps {\n /** Status of the alert.\n * @internal\n */\n status: Status;\n}\n\nexport const AlertButton = ({\n buttonPosition = 'topRight',\n buttonText,\n status,\n ['data-testid']: dataTestId = 'kibble-alert-button',\n ...rest\n}: InternalAlertButtonProps): React.JSX.Element => {\n return (\n <Flex\n className=\"Alert__Button\"\n data-testid={dataTestId}\n {...(buttonPosition !== 'topRight' && { pt: 2, pb: 1 })}\n {...(buttonPosition === 'bottomRight' && { justifyContent: 'flex-end' })}\n >\n <Button size=\"xs\" variant={status === 'default' ? 'primary' : 'secondary'} w=\"max-content\" {...rest}>\n {buttonText}\n </Button>\n </Flex>\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 { Flex } from '@chakra-ui/react/flex';\nimport { AlertButton, AlertButtonProps } from './components/AlertButton/alertButton.component';\nimport { StatusIconMap, StatusTypographyMap } from 'shared/records/status';\nimport { IconName } from 'components/Icon/icon.types';\n\nexport interface AlertProps extends Omit<CAlert.RootProps, 'title' | 'status' | 'children' | 'variant' | 'size'> {\n /** Props to customize the alert button. */\n buttonProps?: AlertButtonProps;\n /** The body of the alert */\n description?: React.ReactNode;\n /** Props to customize the description when passed as a string. */\n descriptionProps?: TextProps;\n /**\n * If true, the close button will not be displayed.\n * @default false\n */\n hideCloseButton?: boolean;\n /**\n * If true, the icon will not be displayed.\n * @default false\n */\n hideIcon?: boolean;\n /** Props to customize the icon. */\n iconProps?: IconProps;\n /** Callback function to be called when the close button is clicked. */\n onClose?: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * If true, the alert will use a contrasting variant according to the selected status.\n * @default false\n */\n onContrast?: boolean;\n /**\n * The status of the alert. Determines the color of the alert.\n * @default success\n */\n status?: Status;\n /** The title of the alert. */\n title?: React.ReactNode;\n /** Props to customize the title when passed as a string. */\n titleProps?: HeadingProps;\n /** The name of the icon to be used as the close button. */\n closeButtonIcon?: IconName;\n /** Data test id for the alert.\n * @default kibble-alert\n */\n 'data-testid'?: string;\n}\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 closeButtonIcon = 'close',\n ['data-testid']: dataTestId = 'kibble-alert',\n ...rest\n}: AlertProps): React.JSX.Element => {\n if (buttonProps && !buttonProps.buttonPosition) {\n buttonProps.buttonPosition = 'topRight';\n }\n const isTopRightButton = buttonProps && buttonProps.buttonPosition === 'topRight';\n const WithButtonWrapper = isTopRightButton ? Flex : React.Fragment;\n\n return (\n <CAlert.Root\n className=\"Alert\"\n data-testid={dataTestId}\n {...rest}\n variant={status}\n hideIcon={hideIcon}\n onContrast={onContrast}\n >\n {!hideIcon && (\n <CAlert.Indicator className=\"Alert__Icon\" data-testid={`${dataTestId}-icon`}>\n <Icon\n variant={onContrast ? 'onContrast' : StatusTypographyMap[status]}\n name={iconProps?.name || StatusIconMap[status]}\n size=\"lg\"\n {...iconProps}\n />\n </CAlert.Indicator>\n )}\n <CAlert.Content className=\"Alert__Content\" data-testid={`${dataTestId}-content`}>\n {title && (\n <WithButtonWrapper\n {...(isTopRightButton && {\n justifyContent: 'space-between',\n gap: 2,\n })}\n >\n <CAlert.Title className=\"Alert__Title\" data-testid={`${dataTestId}-title`}>\n <Heading size=\"sm\" variant={onContrast ? 'onContrast' : 'default'} {...titleProps}>\n {title}\n </Heading>\n </CAlert.Title>\n {buttonProps && buttonProps.buttonPosition === 'topRight' && (\n <AlertButton status={status} onContrast={onContrast} {...buttonProps} />\n )}\n </WithButtonWrapper>\n )}\n {description && (\n <WithButtonWrapper {...(isTopRightButton && { justifyContent: 'space-between' })}>\n <CAlert.Description className=\"Alert__Description\" data-testid={`${dataTestId}-description`}>\n {typeof description === 'string' ? (\n <Text size=\"md\" variant={onContrast ? 'onContrast' : 'default'} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </CAlert.Description>\n {buttonProps && buttonProps.buttonPosition === 'topRight' && !title && (\n <AlertButton status={status} onContrast={onContrast} {...buttonProps} />\n )}\n </WithButtonWrapper>\n )}\n {buttonProps && buttonProps?.buttonPosition !== 'topRight' && (\n <AlertButton status={status} onContrast={onContrast} {...buttonProps} />\n )}\n </CAlert.Content>\n {!hideCloseButton && (\n <Button\n className=\"Alert__CloseTrigger\"\n data-testid={`${dataTestId}-close-trigger`}\n iconName={closeButtonIcon}\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', 'bottomRight'] as const;\nexport type AlertButtonPosition = (typeof alertButtonPositions)[number];\n"],"names":["AlertStatusProvider","useAlertStatusContext","createContext","withProvider","withContext","useAlertStyles","createSlotRecipeContext","AlertRoot","element","props","jsx","AlertTitle","AlertDescription","AlertContent","iconMap","InfoIcon","WarningIcon","CheckCircleIcon","AlertIndicator","forwardRef","ref","api","styles","Icon","Fragment","children","rest","chakra","AlertButton","buttonPosition","buttonText","status","dataTestId","Flex","Button","Alert","buttonProps","description","descriptionProps","hideCloseButton","hideIcon","iconProps","onClose","onContrast","title","titleProps","closeButtonIcon","isTopRightButton","WithButtonWrapper","React","jsxs","CAlert.Root","CAlert.Indicator","StatusTypographyMap","StatusIconMap","CAlert.Content","CAlert.Title","Heading","CAlert.Description","Text","alertButtonPositions"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../chunks/alert.types-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../chunks/alert.types-BlvzpzTn.js");exports.Alert=t.Alert;exports.alertButtonPositions=t.alertButtonPositions;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../chunks/alert.types-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../chunks/alert.types-BlvzpzTn.js"),v=require("../../chunks/avatar.component-BGgZoVJS.js"),c=require("../../chunks/avatar.types-Bmt5Uhfb.js"),T=require("../../chunks/avatarGroup.component-BHchH_tF.js"),g=require("../../chunks/button.component-DjdgBXDC.js"),e=require("../../chunks/button.types-DXP4uRV8.js"),b=require("../../chunks/buttonGroup.component-BXiKIlPf.js"),y=require("../../chunks/calendar.component-D7TVct1c.js"),P=require("../../chunks/card.component-BmBiYbMV.js"),C=require("../../chunks/card.types-MvkQTTZF.js"),k=require("../../chunks/characterCounter.component-BRHLt929.js"),z=require("../../chunks/checkbox.component-DdOVYSSc.js"),h=require("../../chunks/checkboxGroup.component-CvHKP7gd.js"),D=require("../../chunks/conversationCard.component-0D3jmvOf.js"),I=require("../../chunks/datePicker.component-CghreQgn.js"),x=require("../../chunks/datePicker.provider-D9VYbH7E.js"),o=require("../../chunks/dateTimePicker.component-xTm3GhQr.js"),V=require("../../chunks/divider.component-BX3zyB7O.js"),n=require("../../chunks/divider.types-DBNcs0IR.js"),f=require("../../chunks/heading.component-DnoZOXdz.js"),A=require("../../chunks/icon.component-B1hr5lLa.js"),B=require("../../chunks/icon.types-2obj_NKG.js"),W=require("../../chunks/link.component-_YXG8MDq.js"),p=require("../../chunks/logo.types-88a31xCx.js"),G=require("../../chunks/menu.component-DypBuCwv.js"),t=require("../../chunks/modal.types-D_t0UdS6.js"),R=require("../../chunks/notificationCounter.component-CBwi5vXa.js"),u=require("../../chunks/notificationCounter.types-B_-siNfi.js"),w=require("../../chunks/picture.component-BA2hgdZy.js"),d=require("../../chunks/pinInput.types-ftBwVMLj.js"),M=require("../../chunks/popover.component-DTjA1GSd.js"),r=require("../../chunks/popover.types-ChA9ccQ2.js"),i=require("../../chunks/radioGroup.types-DxRSugsr.js"),L=require("../../chunks/radiomark.component-YJNr68s7.js"),O=require("../../chunks/rating.component-FYKS_NCl.js"),N=require("../../chunks/ratingDots.component-DesbSj0q.js"),F=require("../../chunks/select.component-DoFwe4lJ.js"),H=require("../../chunks/sortableList.component-2yX2pXs7.js"),j=require("../../chunks/spinner.component-Dq6u4vVL.js"),E=require("../../chunks/spinner.types-BCLN5-H2.js"),m=require("../../chunks/styledAvatar.types-BG2G_U-W.js"),l=require("../../chunks/swatch.types-AZLB8OWG.js"),J=require("../../chunks/switch.component-Bs-8D1pU.js"),a=require("../../chunks/tab.types-B8hOk0uV.js"),K=require("../../chunks/tag.component-C98Wf07v.js"),_=require("../../chunks/tag.types-BnDFgTvb.js"),q=require("../../chunks/tagBlock.component-BWXHnUPn.js"),Q=require("../../chunks/text.component-BDDz5KQP.js"),U=require("../../chunks/textInput.component-DzUKTy1w.js"),X=require("../../chunks/textarea.component-DteG1L4y.js"),S=require("../../chunks/timePicker.component-CIk5bEyP.js"),Y=require("../../chunks/timeRange.component-NX1EOY8h.js"),Z=require("../../chunks/timestamp.component-BfmZPfy5.js"),$=require("./Toast/index.cjs"),ee=require("../../chunks/tooltip.component-DBw-hAPU.js"),te=require("../../chunks/numberInput.component-DG6IWAHs.js");exports.Alert=s.Alert;exports.alertButtonPositions=s.alertButtonPositions;exports.Avatar=v.Avatar;exports.avatarSizes=c.avatarSizes;exports.avatarVariants=c.avatarVariants;exports.AvatarGroup=T.AvatarGroup;exports.Button=g.Button;exports.buttonConfigVariants=e.buttonConfigVariants;exports.buttonIconPositions=e.buttonIconPositions;exports.buttonSizes=e.buttonSizes;exports.buttonSpinnerPlacements=e.buttonSpinnerPlacements;exports.buttonVariants=e.buttonVariants;exports.ButtonGroup=b.ButtonGroup;exports.Calendar=y.Calendar;exports.Card=P.Card;exports.cardSizes=C.cardSizes;exports.CharacterCounter=k.CharacterCounter;exports.Checkbox=z.WrappedCheckbox;exports.CheckboxGroup=h.WrappedCheckboxGroup;exports.ConversationCard=D.ConversationCard;exports.DatePicker=I.DatePicker;exports.DateFormats=x.DateFormats;exports.DateTimePicker=o.DateTimePicker;exports.DateTimePickerDefaultOptionValue=o.DateTimePickerDefaultOptionValue;exports.calendarViews=o.calendarViews;exports.Divider=V.Divider;exports.dividerOrientations=n.dividerOrientations;exports.dividerSizes=n.dividerSizes;exports.dividerVariants=n.dividerVariants;exports.Heading=f.WrappedHeading;exports.Icon=A.Icon;exports.iconSizes=B.iconSizes;exports.Link=W.Link;exports.Logo=p.Logo;exports.logoTypes=p.logoTypes;exports.Menu=G.Menu;exports.Modal=t.Modal;exports.modalMotionPresets=t.modalMotionPresets;exports.modalPlacements=t.modalPlacements;exports.modalScrollBehaviors=t.modalScrollBehaviors;exports.modalSizes=t.modalSizes;exports.NotificationCounter=R.NotificationCounter;exports.notificationCounterSizes=u.notificationCounterSizes;exports.notificationCounterVariants=u.notificationCounterVariants;exports.Picture=w.Picture;exports.PinInput=d.WrappedPinInput;exports.pinInputTypes=d.pinInputTypes;exports.Popover=M.Popover;exports.popoverSizes=r.popoverSizes;exports.popoverTriggerTypes=r.popoverTriggerTypes;exports.popoverVariants=r.popoverVariants;exports.RadioGroup=i.WrappedRadioGroup;exports.radioAlignments=i.radioAlignments;exports.radioTypes=i.radioTypes;exports.Radiomark=L.Radiomark;exports.Rating=O.WrappedRating;exports.RatingDots=N.WrappedRatingDots;exports.Select=F.WrappedSelect;exports.SortableList=H.SortableList;exports.Spinner=j.Spinner;exports.spinnerSizes=E.spinnerSizes;exports.StyledAvatar=m.StyledAvatar;exports.styledAvatarTypes=m.styledAvatarTypes;exports.Swatch=l.Swatch;exports.swatchSizes=l.swatchSizes;exports.Switch=J.WrappedSwitch;exports.Tabs=a.Tabs;exports.tabIconPositions=a.tabIconPositions;exports.tabSizes=a.tabSizes;exports.Tag=K.Tag;exports.closeButtonDisplays=_.closeButtonDisplays;exports.tagSizes=_.tagSizes;exports.TagBlock=q.TagBlock;exports.TagDisabledState=q.TagDisabledState;exports.Text=Q.WrappedText;exports.TextInput=U.WrappedTextInput;exports.Textarea=X.WrappedTextarea;exports.Meridiem=S.Meridiem;exports.TimePicker=S.TimePicker;exports.TimeRange=Y.TimeRange;exports.Timestamp=Z.Timestamp;exports.useToast=$.useToast;exports.Tooltip=ee.Tooltip;exports.NumberInput=te.WrappedNumberInput;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../chunks/alert.types-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../chunks/alert.types-BlvzpzTn.js"),g=require("../chunks/avatar.component-BGgZoVJS.js"),u=require("../chunks/avatar.types-Bmt5Uhfb.js"),b=require("../chunks/avatarGroup.component-BHchH_tF.js"),h=require("../chunks/button.component-DjdgBXDC.js"),e=require("../chunks/button.types-DXP4uRV8.js"),S=require("../chunks/buttonGroup.component-BXiKIlPf.js"),k=require("../chunks/calendar.component-D7TVct1c.js"),C=require("../chunks/card.component-BmBiYbMV.js"),P=require("../chunks/card.types-MvkQTTZF.js"),D=require("../chunks/characterCounter.component-BRHLt929.js"),z=require("../chunks/checkbox.component-DdOVYSSc.js"),x=require("../chunks/checkboxGroup.component-CvHKP7gd.js"),M=require("../chunks/conversationCard.component-0D3jmvOf.js"),V=require("../chunks/datePicker.component-CghreQgn.js"),f=require("../chunks/datePicker.provider-D9VYbH7E.js"),r=require("../chunks/dateTimePicker.component-xTm3GhQr.js"),I=require("../chunks/divider.component-BX3zyB7O.js"),n=require("../chunks/divider.types-DBNcs0IR.js"),w=require("../chunks/heading.component-DnoZOXdz.js"),B=require("../chunks/icon.component-B1hr5lLa.js"),A=require("../chunks/icon.types-2obj_NKG.js"),W=require("../chunks/link.component-_YXG8MDq.js"),d=require("../chunks/logo.types-88a31xCx.js"),G=require("../chunks/menu.component-DypBuCwv.js"),t=require("../chunks/modal.types-D_t0UdS6.js"),R=require("../chunks/notificationCounter.component-CBwi5vXa.js"),m=require("../chunks/notificationCounter.types-B_-siNfi.js"),L=require("../chunks/picture.component-BA2hgdZy.js"),l=require("../chunks/pinInput.types-ftBwVMLj.js"),O=require("../chunks/popover.component-DTjA1GSd.js"),i=require("../chunks/popover.types-ChA9ccQ2.js"),a=require("../chunks/radioGroup.types-DxRSugsr.js"),K=require("../chunks/radiomark.component-YJNr68s7.js"),N=require("../chunks/rating.component-FYKS_NCl.js"),F=require("../chunks/ratingDots.component-DesbSj0q.js"),H=require("../chunks/select.component-DoFwe4lJ.js"),j=require("../chunks/sortableList.component-2yX2pXs7.js"),E=require("../chunks/spinner.component-Dq6u4vVL.js"),J=require("../chunks/spinner.types-BCLN5-H2.js"),_=require("../chunks/styledAvatar.types-BG2G_U-W.js"),q=require("../chunks/swatch.types-AZLB8OWG.js"),Q=require("../chunks/switch.component-Bs-8D1pU.js"),s=require("../chunks/tab.types-B8hOk0uV.js"),U=require("../chunks/tag.component-C98Wf07v.js"),T=require("../chunks/tag.types-BnDFgTvb.js"),v=require("../chunks/tagBlock.component-BWXHnUPn.js"),X=require("../chunks/text.component-BDDz5KQP.js"),Y=require("../chunks/textInput.component-DzUKTy1w.js"),Z=require("../chunks/textarea.component-DteG1L4y.js"),y=require("../chunks/timePicker.component-CIk5bEyP.js"),$=require("../chunks/timeRange.component-NX1EOY8h.js"),ee=require("../chunks/timestamp.component-BfmZPfy5.js"),te=require("./components/Toast/index.cjs"),oe=require("../chunks/tooltip.component-DBw-hAPU.js"),re=require("../chunks/numberInput.component-DG6IWAHs.js"),ne=require("../chunks/withDarkMode-R08khTA6.js"),ie=require("../chunks/withLightMode-Crw8xtkD.js"),ae=require("./hooks/useBreakpoint/index.cjs"),se=require("./hooks/useColorMode/index.cjs"),ce=require("./hooks/useColorModeValue/index.cjs"),pe=require("./hooks/useDeviceType/index.cjs"),o=require("./shared/types/index.cjs"),ue=require("../chunks/theme-BFbOz0Jj.js"),c=require("../chunks/theme.provider-BWhqnOFC.js");exports.Alert=p.Alert;exports.alertButtonPositions=p.alertButtonPositions;exports.Avatar=g.Avatar;exports.avatarSizes=u.avatarSizes;exports.avatarVariants=u.avatarVariants;exports.AvatarGroup=b.AvatarGroup;exports.Button=h.Button;exports.buttonConfigVariants=e.buttonConfigVariants;exports.buttonIconPositions=e.buttonIconPositions;exports.buttonSizes=e.buttonSizes;exports.buttonSpinnerPlacements=e.buttonSpinnerPlacements;exports.buttonVariants=e.buttonVariants;exports.ButtonGroup=S.ButtonGroup;exports.Calendar=k.Calendar;exports.Card=C.Card;exports.cardSizes=P.cardSizes;exports.CharacterCounter=D.CharacterCounter;exports.Checkbox=z.WrappedCheckbox;exports.CheckboxGroup=x.WrappedCheckboxGroup;exports.ConversationCard=M.ConversationCard;exports.DatePicker=V.DatePicker;exports.DateFormats=f.DateFormats;exports.DateTimePicker=r.DateTimePicker;exports.DateTimePickerDefaultOptionValue=r.DateTimePickerDefaultOptionValue;exports.calendarViews=r.calendarViews;exports.Divider=I.Divider;exports.dividerOrientations=n.dividerOrientations;exports.dividerSizes=n.dividerSizes;exports.dividerVariants=n.dividerVariants;exports.Heading=w.WrappedHeading;exports.Icon=B.Icon;exports.iconSizes=A.iconSizes;exports.Link=W.Link;exports.Logo=d.Logo;exports.logoTypes=d.logoTypes;exports.Menu=G.Menu;exports.Modal=t.Modal;exports.modalMotionPresets=t.modalMotionPresets;exports.modalPlacements=t.modalPlacements;exports.modalScrollBehaviors=t.modalScrollBehaviors;exports.modalSizes=t.modalSizes;exports.NotificationCounter=R.NotificationCounter;exports.notificationCounterSizes=m.notificationCounterSizes;exports.notificationCounterVariants=m.notificationCounterVariants;exports.Picture=L.Picture;exports.PinInput=l.WrappedPinInput;exports.pinInputTypes=l.pinInputTypes;exports.Popover=O.Popover;exports.popoverSizes=i.popoverSizes;exports.popoverTriggerTypes=i.popoverTriggerTypes;exports.popoverVariants=i.popoverVariants;exports.RadioGroup=a.WrappedRadioGroup;exports.radioAlignments=a.radioAlignments;exports.radioTypes=a.radioTypes;exports.Radiomark=K.Radiomark;exports.Rating=N.WrappedRating;exports.RatingDots=F.WrappedRatingDots;exports.Select=H.WrappedSelect;exports.SortableList=j.SortableList;exports.Spinner=E.Spinner;exports.spinnerSizes=J.spinnerSizes;exports.StyledAvatar=_.StyledAvatar;exports.styledAvatarTypes=_.styledAvatarTypes;exports.Swatch=q.Swatch;exports.swatchSizes=q.swatchSizes;exports.Switch=Q.WrappedSwitch;exports.Tabs=s.Tabs;exports.tabIconPositions=s.tabIconPositions;exports.tabSizes=s.tabSizes;exports.Tag=U.Tag;exports.closeButtonDisplays=T.closeButtonDisplays;exports.tagSizes=T.tagSizes;exports.TagBlock=v.TagBlock;exports.TagDisabledState=v.TagDisabledState;exports.Text=X.WrappedText;exports.TextInput=Y.WrappedTextInput;exports.Textarea=Z.WrappedTextarea;exports.Meridiem=y.Meridiem;exports.TimePicker=y.TimePicker;exports.TimeRange=$.TimeRange;exports.Timestamp=ee.Timestamp;exports.useToast=te.useToast;exports.Tooltip=oe.Tooltip;exports.NumberInput=re.WrappedNumberInput;exports.withDarkMode=ne.withDarkMode;exports.withLightMode=ie.withLightMode;exports.useBreakpoint=ae.useBreakpoint;exports.useColorMode=se.useColorMode;exports.useColorModeValue=ce.useColorModeValue;exports.useDeviceType=pe.useDeviceType;exports.alignments=o.alignments;exports.flexDirections=o.flexDirections;exports.placements=o.placements;exports.statuses=o.statuses;exports.typographyVariants=o.typographyVariants;exports.colorModeThemeKey=ue.colorModeThemeKey;exports.KibbleThemeProvider=c.KibbleThemeProvider;exports.kibbleThemeConfig=c.kibbleThemeConfig;exports.system=c.system;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { A as r, a as t } from "../../chunks/alert.types-
|
|
1
|
+
import { A as r, a as t } from "../../chunks/alert.types-C6EN46Ra.js";
|
|
2
2
|
import { A as s } from "../../chunks/avatar.component-BL6D6Lw_.js";
|
|
3
3
|
import { a as i, b as m } from "../../chunks/avatar.types-C6dZZjdi.js";
|
|
4
4
|
import { A as f } from "../../chunks/avatarGroup.component-Ba_rfWUg.js";
|
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { A as a, a as e } from "../chunks/alert.types-
|
|
1
|
+
import { A as a, a as e } from "../chunks/alert.types-C6EN46Ra.js";
|
|
2
2
|
import { A as s } from "../chunks/avatar.component-BL6D6Lw_.js";
|
|
3
3
|
import { a as i, b as m } from "../chunks/avatar.types-C6dZZjdi.js";
|
|
4
4
|
import { A as x } from "../chunks/avatarGroup.component-Ba_rfWUg.js";
|
|
@@ -5,6 +5,7 @@ import { IconProps } from '../Icon/icon.component';
|
|
|
5
5
|
import { TextProps } from '../Text/text.component';
|
|
6
6
|
import { Status } from '../../shared/types/status';
|
|
7
7
|
import { AlertButtonProps } from './components/AlertButton/alertButton.component';
|
|
8
|
+
import { IconName } from '../Icon/icon.types';
|
|
8
9
|
export interface AlertProps extends Omit<CAlert.RootProps, 'title' | 'status' | 'children' | 'variant' | 'size'> {
|
|
9
10
|
/** Props to customize the alert button. */
|
|
10
11
|
buttonProps?: AlertButtonProps;
|
|
@@ -40,9 +41,11 @@ export interface AlertProps extends Omit<CAlert.RootProps, 'title' | 'status' |
|
|
|
40
41
|
title?: React.ReactNode;
|
|
41
42
|
/** Props to customize the title when passed as a string. */
|
|
42
43
|
titleProps?: HeadingProps;
|
|
44
|
+
/** The name of the icon to be used as the close button. */
|
|
45
|
+
closeButtonIcon?: IconName;
|
|
43
46
|
/** Data test id for the alert.
|
|
44
47
|
* @default kibble-alert
|
|
45
48
|
*/
|
|
46
49
|
'data-testid'?: string;
|
|
47
50
|
}
|
|
48
|
-
export declare const Alert: ({ buttonProps, description, descriptionProps, hideCloseButton, hideIcon, iconProps, onClose, onContrast, status, title, titleProps, ["data-testid"]: dataTestId, ...rest }: AlertProps) => React.JSX.Element;
|
|
51
|
+
export declare const Alert: ({ buttonProps, description, descriptionProps, hideCloseButton, hideIcon, iconProps, onClose, onContrast, status, title, titleProps, closeButtonIcon, ["data-testid"]: dataTestId, ...rest }: AlertProps) => React.JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";const e=require("./jsx-runtime-BjDatQAs.js"),j=require("react"),v=require("./heading.component-DnoZOXdz.js"),y=require("./icon.component-B1hr5lLa.js"),C=require("./text.component-BDDz5KQP.js"),g=require("./button.component-DjdgBXDC.js"),A=require("./flex-BOU6tYUd.js"),f=require("../cjs/shared/records/index.cjs"),q=require("./provider-NDo8kOkE.js"),N=require("./create-slot-recipe-context-HXE1VazG.js"),S=require("./factory-a2SJjEvR.js"),l=require("./icons-B6Nwr9di.js"),w=t=>t&&t.__esModule?t:{default:t},B=w(j),[k,I]=q.createContext({name:"AlertStatusContext",hookName:"useAlertStatusContext",providerName:"<Alert />"}),{withProvider:W,withContext:R,useStyles:z}=N.createSlotRecipeContext({key:"alert"}),$=W("div","root",{forwardAsChild:!0,wrapElement(t,s){return e.jsxRuntimeExports.jsx(k,{value:{status:s.status||"info"},children:t})}}),b=R("div","title"),F=R("div","description"),M=R("div","content"),D={info:l.InfoIcon,warning:l.WarningIcon,success:l.CheckCircleIcon,error:l.WarningIcon,neutral:l.InfoIcon},H=j.forwardRef(function(s,a){const i=I(),r=z(),x=typeof i.status=="string"?D[i.status]:j.Fragment,{children:u=e.jsxRuntimeExports.jsx(x,{}),...n}=s;return e.jsxRuntimeExports.jsx(S.chakra.span,{ref:a,...n,css:[r.indicator,s.css],children:u})}),p=({buttonPosition:t="topRight",buttonText:s,status:a,["data-testid"]:i="kibble-alert-button",...r})=>e.jsxRuntimeExports.jsx(A.Flex,{className:"Alert__Button","data-testid":i,...t!=="topRight"&&{pt:2,pb:1},...t==="bottomRight"&&{justifyContent:"flex-end"},children:e.jsxRuntimeExports.jsx(g.Button,{size:"xs",variant:a==="default"?"primary":"secondary",w:"max-content",...r,children:s})}),L=({buttonProps:t,description:s,descriptionProps:a,hideCloseButton:i=!1,hideIcon:r=!1,iconProps:x,onClose:u,onContrast:n=!1,status:o="success",title:d,titleProps:_,["data-testid"]:c="kibble-alert",...E})=>{t&&!t.buttonPosition&&(t.buttonPosition="topRight");const m=t&&t.buttonPosition==="topRight",h=m?A.Flex:B.default.Fragment;return e.jsxRuntimeExports.jsxs($,{className:"Alert","data-testid":c,...E,variant:o,hideIcon:r,onContrast:n,children:[!r&&e.jsxRuntimeExports.jsx(H,{className:"Alert__Icon","data-testid":`${c}-icon`,children:e.jsxRuntimeExports.jsx(y.Icon,{variant:n?"onContrast":f.StatusTypographyMap[o],name:x?.name||f.StatusIconMap[o],size:"lg",...x})}),e.jsxRuntimeExports.jsxs(M,{className:"Alert__Content","data-testid":`${c}-content`,children:[d&&e.jsxRuntimeExports.jsxs(h,{...m&&{justifyContent:"space-between",gap:2},children:[e.jsxRuntimeExports.jsx(b,{className:"Alert__Title","data-testid":`${c}-title`,children:e.jsxRuntimeExports.jsx(v.WrappedHeading,{size:"sm",variant:n?"onContrast":"default",..._,children:d})}),t&&t.buttonPosition==="topRight"&&e.jsxRuntimeExports.jsx(p,{status:o,onContrast:n,...t})]}),s&&e.jsxRuntimeExports.jsxs(h,{...m&&{justifyContent:"space-between"},children:[e.jsxRuntimeExports.jsx(F,{className:"Alert__Description","data-testid":`${c}-description`,children:typeof s=="string"?e.jsxRuntimeExports.jsx(C.WrappedText,{size:"md",variant:n?"onContrast":"default",...a,children:s}):s}),t&&t.buttonPosition==="topRight"&&!d&&e.jsxRuntimeExports.jsx(p,{status:o,onContrast:n,...t})]}),t&&t?.buttonPosition!=="topRight"&&e.jsxRuntimeExports.jsx(p,{status:o,onContrast:n,...t})]}),!i&&e.jsxRuntimeExports.jsx(g.Button,{className:"Alert__CloseTrigger","data-testid":`${c}-close-trigger`,iconName:"close",size:"xs",variant:"ghostNeutral",onContrast:n,onClick:u})]})},T=["topRight","bottomLeft","bottomRight"];exports.Alert=L;exports.alertButtonPositions=T;
|
|
2
|
-
//# sourceMappingURL=alert.types-Ch8hn5HY.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"alert.types-Ch8hn5HY.js","sources":["../../node_modules/@chakra-ui/react/dist/esm/components/alert/alert.js","../../src/components/Alert/components/AlertButton/alertButton.component.tsx","../../src/components/Alert/alert.component.tsx","../../src/components/Alert/alert.types.ts"],"sourcesContent":["\"use strict\";\n\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport { forwardRef, Fragment } from 'react';\nimport { createContext } from '../../create-context.js';\nimport { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';\nimport { chakra } from '../../styled-system/factory.js';\nimport { InfoIcon, WarningIcon, CheckCircleIcon } from '../icons.js';\n\nconst [AlertStatusProvider, useAlertStatusContext] = createContext({\n name: \"AlertStatusContext\",\n hookName: \"useAlertStatusContext\",\n providerName: \"<Alert />\"\n});\nconst {\n withProvider,\n withContext,\n useStyles: useAlertStyles,\n PropsProvider\n} = createSlotRecipeContext({ key: \"alert\" });\nconst AlertRoot = withProvider(\n \"div\",\n \"root\",\n {\n forwardAsChild: true,\n wrapElement(element, props) {\n return (\n // @ts-ignore fix later\n /* @__PURE__ */ jsx(AlertStatusProvider, { value: { status: props.status || \"info\" }, children: element })\n );\n }\n }\n);\nconst AlertPropsProvider = PropsProvider;\nconst AlertTitle = withContext(\n \"div\",\n \"title\"\n);\nconst AlertDescription = withContext(\"div\", \"description\");\nconst AlertContent = withContext(\n \"div\",\n \"content\"\n);\nconst iconMap = {\n info: InfoIcon,\n warning: WarningIcon,\n success: CheckCircleIcon,\n error: WarningIcon,\n neutral: InfoIcon\n};\nconst AlertIndicator = forwardRef(\n function AlertIndicator2(props, ref) {\n const api = useAlertStatusContext();\n const styles = useAlertStyles();\n const Icon = typeof api.status === \"string\" ? iconMap[api.status] : Fragment;\n const { children = /* @__PURE__ */ jsx(Icon, {}), ...rest } = props;\n return /* @__PURE__ */ jsx(chakra.span, { ref, ...rest, css: [styles.indicator, props.css], children });\n }\n);\n\nexport { AlertContent, AlertDescription, AlertIndicator, AlertPropsProvider, AlertRoot, AlertStatusProvider, AlertTitle, useAlertStatusContext, useAlertStyles };\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 { Flex } from '@chakra-ui/react/flex';\n\nexport interface AlertButtonProps extends Omit<ButtonProps, 'children'> {\n /** Position of the button.\n * @default topRight\n */\n buttonPosition?: AlertButtonPosition;\n /** Text to display in the button. */\n buttonText: string;\n /** Data test id for the button.\n * @default kibble-alert-button\n */\n 'data-testid'?: string;\n}\n\ninterface InternalAlertButtonProps extends AlertButtonProps {\n /** Status of the alert.\n * @internal\n */\n status: Status;\n}\n\nexport const AlertButton = ({\n buttonPosition = 'topRight',\n buttonText,\n status,\n ['data-testid']: dataTestId = 'kibble-alert-button',\n ...rest\n}: InternalAlertButtonProps): React.JSX.Element => {\n return (\n <Flex\n className=\"Alert__Button\"\n data-testid={dataTestId}\n {...(buttonPosition !== 'topRight' && { pt: 2, pb: 1 })}\n {...(buttonPosition === 'bottomRight' && { justifyContent: 'flex-end' })}\n >\n <Button size=\"xs\" variant={status === 'default' ? 'primary' : 'secondary'} w=\"max-content\" {...rest}>\n {buttonText}\n </Button>\n </Flex>\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 { Flex } from '@chakra-ui/react/flex';\nimport { AlertButton, AlertButtonProps } from './components/AlertButton/alertButton.component';\nimport { StatusIconMap, StatusTypographyMap } from 'shared/records/status';\n\nexport interface AlertProps extends Omit<CAlert.RootProps, 'title' | 'status' | 'children' | 'variant' | 'size'> {\n /** Props to customize the alert button. */\n buttonProps?: AlertButtonProps;\n /** The body of the alert */\n description?: React.ReactNode;\n /** Props to customize the description when passed as a string. */\n descriptionProps?: TextProps;\n /**\n * If true, the close button will not be displayed.\n * @default false\n */\n hideCloseButton?: boolean;\n /**\n * If true, the icon will not be displayed.\n * @default false\n */\n hideIcon?: boolean;\n /** Props to customize the icon. */\n iconProps?: IconProps;\n /** Callback function to be called when the close button is clicked. */\n onClose?: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * If true, the alert will use a contrasting variant according to the selected status.\n * @default false\n */\n onContrast?: boolean;\n /**\n * The status of the alert. Determines the color of the alert.\n * @default success\n */\n status?: Status;\n /** The title of the alert. */\n title?: React.ReactNode;\n /** Props to customize the title when passed as a string. */\n titleProps?: HeadingProps;\n /** Data test id for the alert.\n * @default kibble-alert\n */\n 'data-testid'?: string;\n}\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 ['data-testid']: dataTestId = 'kibble-alert',\n ...rest\n}: AlertProps): React.JSX.Element => {\n if (buttonProps && !buttonProps.buttonPosition) {\n buttonProps.buttonPosition = 'topRight';\n }\n const isTopRightButton = buttonProps && buttonProps.buttonPosition === 'topRight';\n const WithButtonWrapper = isTopRightButton ? Flex : React.Fragment;\n\n return (\n <CAlert.Root\n className=\"Alert\"\n data-testid={dataTestId}\n {...rest}\n variant={status}\n hideIcon={hideIcon}\n onContrast={onContrast}\n >\n {!hideIcon && (\n <CAlert.Indicator className=\"Alert__Icon\" data-testid={`${dataTestId}-icon`}>\n <Icon\n variant={onContrast ? 'onContrast' : StatusTypographyMap[status]}\n name={iconProps?.name || StatusIconMap[status]}\n size=\"lg\"\n {...iconProps}\n />\n </CAlert.Indicator>\n )}\n <CAlert.Content className=\"Alert__Content\" data-testid={`${dataTestId}-content`}>\n {title && (\n <WithButtonWrapper\n {...(isTopRightButton && {\n justifyContent: 'space-between',\n gap: 2,\n })}\n >\n <CAlert.Title className=\"Alert__Title\" data-testid={`${dataTestId}-title`}>\n <Heading size=\"sm\" variant={onContrast ? 'onContrast' : 'default'} {...titleProps}>\n {title}\n </Heading>\n </CAlert.Title>\n {buttonProps && buttonProps.buttonPosition === 'topRight' && (\n <AlertButton status={status} onContrast={onContrast} {...buttonProps} />\n )}\n </WithButtonWrapper>\n )}\n {description && (\n <WithButtonWrapper {...(isTopRightButton && { justifyContent: 'space-between' })}>\n <CAlert.Description className=\"Alert__Description\" data-testid={`${dataTestId}-description`}>\n {typeof description === 'string' ? (\n <Text size=\"md\" variant={onContrast ? 'onContrast' : 'default'} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </CAlert.Description>\n {buttonProps && buttonProps.buttonPosition === 'topRight' && !title && (\n <AlertButton status={status} onContrast={onContrast} {...buttonProps} />\n )}\n </WithButtonWrapper>\n )}\n {buttonProps && buttonProps?.buttonPosition !== 'topRight' && (\n <AlertButton status={status} onContrast={onContrast} {...buttonProps} />\n )}\n </CAlert.Content>\n {!hideCloseButton && (\n <Button\n className=\"Alert__CloseTrigger\"\n data-testid={`${dataTestId}-close-trigger`}\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', 'bottomRight'] as const;\nexport type AlertButtonPosition = (typeof alertButtonPositions)[number];\n"],"names":["AlertStatusProvider","useAlertStatusContext","createContext","withProvider","withContext","useAlertStyles","createSlotRecipeContext","AlertRoot","element","props","jsx","AlertTitle","AlertDescription","AlertContent","iconMap","InfoIcon","WarningIcon","CheckCircleIcon","AlertIndicator","forwardRef","ref","api","styles","Icon","Fragment","children","rest","chakra","AlertButton","buttonPosition","buttonText","status","dataTestId","Flex","Button","Alert","buttonProps","description","descriptionProps","hideCloseButton","hideIcon","iconProps","onClose","onContrast","title","titleProps","isTopRightButton","WithButtonWrapper","React","jsxs","CAlert.Root","CAlert.Indicator","StatusTypographyMap","StatusIconMap","CAlert.Content","CAlert.Title","Heading","CAlert.Description","Text","alertButtonPositions"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"alert.types-DWm1TeiF.js","sources":["../../node_modules/@chakra-ui/react/dist/esm/components/alert/alert.js","../../src/components/Alert/components/AlertButton/alertButton.component.tsx","../../src/components/Alert/alert.component.tsx","../../src/components/Alert/alert.types.ts"],"sourcesContent":["\"use strict\";\n\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport { forwardRef, Fragment } from 'react';\nimport { createContext } from '../../create-context.js';\nimport { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';\nimport { chakra } from '../../styled-system/factory.js';\nimport { InfoIcon, WarningIcon, CheckCircleIcon } from '../icons.js';\n\nconst [AlertStatusProvider, useAlertStatusContext] = createContext({\n name: \"AlertStatusContext\",\n hookName: \"useAlertStatusContext\",\n providerName: \"<Alert />\"\n});\nconst {\n withProvider,\n withContext,\n useStyles: useAlertStyles,\n PropsProvider\n} = createSlotRecipeContext({ key: \"alert\" });\nconst AlertRoot = withProvider(\n \"div\",\n \"root\",\n {\n forwardAsChild: true,\n wrapElement(element, props) {\n return (\n // @ts-ignore fix later\n /* @__PURE__ */ jsx(AlertStatusProvider, { value: { status: props.status || \"info\" }, children: element })\n );\n }\n }\n);\nconst AlertPropsProvider = PropsProvider;\nconst AlertTitle = withContext(\n \"div\",\n \"title\"\n);\nconst AlertDescription = withContext(\"div\", \"description\");\nconst AlertContent = withContext(\n \"div\",\n \"content\"\n);\nconst iconMap = {\n info: InfoIcon,\n warning: WarningIcon,\n success: CheckCircleIcon,\n error: WarningIcon,\n neutral: InfoIcon\n};\nconst AlertIndicator = forwardRef(\n function AlertIndicator2(props, ref) {\n const api = useAlertStatusContext();\n const styles = useAlertStyles();\n const Icon = typeof api.status === \"string\" ? iconMap[api.status] : Fragment;\n const { children = /* @__PURE__ */ jsx(Icon, {}), ...rest } = props;\n return /* @__PURE__ */ jsx(chakra.span, { ref, ...rest, css: [styles.indicator, props.css], children });\n }\n);\n\nexport { AlertContent, AlertDescription, AlertIndicator, AlertPropsProvider, AlertRoot, AlertStatusProvider, AlertTitle, useAlertStatusContext, useAlertStyles };\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 { Flex } from '@chakra-ui/react/flex';\n\nexport interface AlertButtonProps extends Omit<ButtonProps, 'children'> {\n /** Position of the button.\n * @default topRight\n */\n buttonPosition?: AlertButtonPosition;\n /** Text to display in the button. */\n buttonText: string;\n /** Data test id for the button.\n * @default kibble-alert-button\n */\n 'data-testid'?: string;\n}\n\ninterface InternalAlertButtonProps extends AlertButtonProps {\n /** Status of the alert.\n * @internal\n */\n status: Status;\n}\n\nexport const AlertButton = ({\n buttonPosition = 'topRight',\n buttonText,\n status,\n ['data-testid']: dataTestId = 'kibble-alert-button',\n ...rest\n}: InternalAlertButtonProps): React.JSX.Element => {\n return (\n <Flex\n className=\"Alert__Button\"\n data-testid={dataTestId}\n {...(buttonPosition !== 'topRight' && { pt: 2, pb: 1 })}\n {...(buttonPosition === 'bottomRight' && { justifyContent: 'flex-end' })}\n >\n <Button size=\"xs\" variant={status === 'default' ? 'primary' : 'secondary'} w=\"max-content\" {...rest}>\n {buttonText}\n </Button>\n </Flex>\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 { Flex } from '@chakra-ui/react/flex';\nimport { AlertButton, AlertButtonProps } from './components/AlertButton/alertButton.component';\nimport { StatusIconMap, StatusTypographyMap } from 'shared/records/status';\n\nexport interface AlertProps extends Omit<CAlert.RootProps, 'title' | 'status' | 'children' | 'variant' | 'size'> {\n /** Props to customize the alert button. */\n buttonProps?: AlertButtonProps;\n /** The body of the alert */\n description?: React.ReactNode;\n /** Props to customize the description when passed as a string. */\n descriptionProps?: TextProps;\n /**\n * If true, the close button will not be displayed.\n * @default false\n */\n hideCloseButton?: boolean;\n /**\n * If true, the icon will not be displayed.\n * @default false\n */\n hideIcon?: boolean;\n /** Props to customize the icon. */\n iconProps?: IconProps;\n /** Callback function to be called when the close button is clicked. */\n onClose?: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * If true, the alert will use a contrasting variant according to the selected status.\n * @default false\n */\n onContrast?: boolean;\n /**\n * The status of the alert. Determines the color of the alert.\n * @default success\n */\n status?: Status;\n /** The title of the alert. */\n title?: React.ReactNode;\n /** Props to customize the title when passed as a string. */\n titleProps?: HeadingProps;\n /** Data test id for the alert.\n * @default kibble-alert\n */\n 'data-testid'?: string;\n}\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 ['data-testid']: dataTestId = 'kibble-alert',\n ...rest\n}: AlertProps): React.JSX.Element => {\n if (buttonProps && !buttonProps.buttonPosition) {\n buttonProps.buttonPosition = 'topRight';\n }\n const isTopRightButton = buttonProps && buttonProps.buttonPosition === 'topRight';\n const WithButtonWrapper = isTopRightButton ? Flex : React.Fragment;\n\n return (\n <CAlert.Root\n className=\"Alert\"\n data-testid={dataTestId}\n {...rest}\n variant={status}\n hideIcon={hideIcon}\n onContrast={onContrast}\n >\n {!hideIcon && (\n <CAlert.Indicator className=\"Alert__Icon\" data-testid={`${dataTestId}-icon`}>\n <Icon\n variant={onContrast ? 'onContrast' : StatusTypographyMap[status]}\n name={iconProps?.name || StatusIconMap[status]}\n size=\"lg\"\n {...iconProps}\n />\n </CAlert.Indicator>\n )}\n <CAlert.Content className=\"Alert__Content\" data-testid={`${dataTestId}-content`}>\n {title && (\n <WithButtonWrapper\n {...(isTopRightButton && {\n justifyContent: 'space-between',\n gap: 2,\n })}\n >\n <CAlert.Title className=\"Alert__Title\" data-testid={`${dataTestId}-title`}>\n <Heading size=\"sm\" variant={onContrast ? 'onContrast' : 'default'} {...titleProps}>\n {title}\n </Heading>\n </CAlert.Title>\n {buttonProps && buttonProps.buttonPosition === 'topRight' && (\n <AlertButton status={status} onContrast={onContrast} {...buttonProps} />\n )}\n </WithButtonWrapper>\n )}\n {description && (\n <WithButtonWrapper {...(isTopRightButton && { justifyContent: 'space-between' })}>\n <CAlert.Description className=\"Alert__Description\" data-testid={`${dataTestId}-description`}>\n {typeof description === 'string' ? (\n <Text size=\"md\" variant={onContrast ? 'onContrast' : 'default'} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </CAlert.Description>\n {buttonProps && buttonProps.buttonPosition === 'topRight' && !title && (\n <AlertButton status={status} onContrast={onContrast} {...buttonProps} />\n )}\n </WithButtonWrapper>\n )}\n {buttonProps && buttonProps?.buttonPosition !== 'topRight' && (\n <AlertButton status={status} onContrast={onContrast} {...buttonProps} />\n )}\n </CAlert.Content>\n {!hideCloseButton && (\n <Button\n className=\"Alert__CloseTrigger\"\n data-testid={`${dataTestId}-close-trigger`}\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', 'bottomRight'] as const;\nexport type AlertButtonPosition = (typeof alertButtonPositions)[number];\n"],"names":["AlertStatusProvider","useAlertStatusContext","createContext","withProvider","withContext","useAlertStyles","createSlotRecipeContext","AlertRoot","element","props","jsx","AlertTitle","AlertDescription","AlertContent","iconMap","InfoIcon","WarningIcon","CheckCircleIcon","AlertIndicator","forwardRef","ref","api","styles","Icon","Fragment","children","rest","chakra","AlertButton","buttonPosition","buttonText","status","dataTestId","Flex","Button","Alert","buttonProps","description","descriptionProps","hideCloseButton","hideIcon","iconProps","onClose","onContrast","title","titleProps","isTopRightButton","WithButtonWrapper","React","jsxs","CAlert.Root","CAlert.Indicator","StatusTypographyMap","StatusIconMap","CAlert.Content","CAlert.Title","Heading","CAlert.Description","Text","alertButtonPositions"],"mappings":"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","x_google_ignoreList":[0]}
|