@sparrowengg/integrations-templates-frontend 1.9.84-beta.9 → 2.1.0-beta.1

package/dist/cjs/commons/components/confirmation-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirmation-modal.js","sources":["../../../../src/commons/components/confirmation-modal.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {   AlertDialog,\n    AlertDialogContent,\n    AlertDialogTitle,\n    AlertDialogDescription,\n    AlertDialogActions,\n    AlertDialogCancel,\n    AlertDialogAction,\n    Button, } from \"@sparrowengg/twigs-react\";\ntype ConfirmationModalProps = {\n    name: string;\n    description: string;\n    onConfirm: () => void | Promise<void>;\n    onCancel: () => void;\n};\nconst ConfirmationModal: React.FC<ConfirmationModalProps> = ({\n    name,\n    description,\n    onConfirm,\n    onCancel\n}) => {\n    const [isDeleteIconHover, setIsDeleteIconHover] = useState(false);\n    return  <AlertDialog open={true}>\n    <AlertDialogContent\n      onOpenAutoFocus={(e) => e.preventDefault()}\n      className=\"dm-sans\"\n      css={{\n        button: {\n          borderRadius: '8px',\n        },\n      }}\n    >\n      <AlertDialogTitle\n        css={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          border: 'none !important',\n          padding: '24px $12 8px $12 !important',\n        }}\n      >\n        {name}\n      </AlertDialogTitle>\n\n      <AlertDialogDescription\n        css={{\n          overflowWrap: 'break-word',\n          padding: '0px $12 0px $12 !important',\n          fontSize: '$sm',\n          fontWeight: '400',\n          lineHeight: '20px',\n          letterSpacing: '0px',\n          color: '$neutral800',\n          margin: '0 !important',\n        }}\n      >\n        {description}\n      </AlertDialogDescription>\n\n      <AlertDialogActions css={{ gap: '$6' }}>\n        <AlertDialogCancel asChild onClick={onCancel}>\n          <Button color=\"default\" variant=\"solid\" size=\"lg\">\n            Cancel\n          </Button>\n        </AlertDialogCancel>\n\n        <AlertDialogAction asChild>\n          <Button\n            onMouseEnter={() => setIsDeleteIconHover(true)}\n            onMouseLeave={() => setIsDeleteIconHover(false)}\n            color={isDeleteIconHover ? 'error' : 'default'}\n            size=\"lg\"\n            onClick={onConfirm}\n          >\n            Confirm\n          </Button>\n        </AlertDialogAction>\n      </AlertDialogActions>\n    </AlertDialogContent>\n  </AlertDialog>\n};\nexport default ConfirmationModal;\n"],"names":["useState","AlertDialog","AlertDialogContent","AlertDialogTitle","AlertDialogDescription","AlertDialogActions","AlertDialogCancel","Button","AlertDialogAction"],"mappings":";;;;;;;;AAeA,MAAM,oBAAsD,CAAC;AAAA,EACzD,IAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AACJ,CAAM,KAAA;AACF,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIA,eAAS,KAAK,CAAA,CAAA;AAChE,EAAQ,uBAAA,KAAA,CAAA,aAAA,CAACC,uBAAY,EAAA,EAAA,IAAA,EAAM,IAC3B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,eAAiB,EAAA,CAAC,CAAM,KAAA,CAAA,CAAE,cAAe,EAAA;AAAA,MACzC,SAAU,EAAA,SAAA;AAAA,MACV,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA;AAAA,UACN,YAAc,EAAA,KAAA;AAAA,SAChB;AAAA,OACF;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,4BAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,OAAS,EAAA,MAAA;AAAA,UACT,cAAgB,EAAA,eAAA;AAAA,UAChB,MAAQ,EAAA,iBAAA;AAAA,UACR,OAAS,EAAA,6BAAA;AAAA,SACX;AAAA,OAAA;AAAA,MAEC,IAAA;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,kCAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,YAAc,EAAA,YAAA;AAAA,UACd,OAAS,EAAA,4BAAA;AAAA,UACT,QAAU,EAAA,KAAA;AAAA,UACV,UAAY,EAAA,KAAA;AAAA,UACZ,UAAY,EAAA,MAAA;AAAA,UACZ,aAAe,EAAA,KAAA;AAAA,UACf,KAAO,EAAA,aAAA;AAAA,UACP,MAAQ,EAAA,cAAA;AAAA,SACV;AAAA,OAAA;AAAA,MAEC,WAAA;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA,CAACC,8BAAmB,EAAA,EAAA,GAAA,EAAK,EAAE,GAAA,EAAK,IAAK,EAAA,EAAA,kBAClC,KAAA,CAAA,aAAA,CAAAC,6BAAA,EAAA,EAAkB,OAAO,EAAA,IAAA,EAAC,OAAS,EAAA,QAAA,EAAA,kBACjC,KAAA,CAAA,aAAA,CAAAC,aAAA,EAAA,EAAO,KAAM,EAAA,SAAA,EAAU,OAAQ,EAAA,OAAA,EAAQ,IAAK,EAAA,IAAA,EAAA,EAAK,QAElD,CACF,CAEA,kBAAA,KAAA,CAAA,aAAA,CAACC,6BAAkB,EAAA,EAAA,OAAA,EAAO,IACxB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAACD,aAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAc,MAAM,oBAAA,CAAqB,IAAI,CAAA;AAAA,QAC7C,YAAA,EAAc,MAAM,oBAAA,CAAqB,KAAK,CAAA;AAAA,QAC9C,KAAA,EAAO,oBAAoB,OAAU,GAAA,SAAA;AAAA,QACrC,IAAK,EAAA,IAAA;AAAA,QACL,OAAS,EAAA,SAAA;AAAA,OAAA;AAAA,MACV,SAAA;AAAA,KAGH,CACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AACF;;;;"}
+{"version":3,"file":"confirmation-modal.js","sources":["../../../../src/commons/components/confirmation-modal.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport {\n  AlertDialog,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogActions,\n  AlertDialogCancel,\n  AlertDialogAction,\n  Button,\n} from '@sparrowengg/twigs-react';\nimport {\n  BUTTON_TEXT,\n  CSS_CLASS_NAMES,\n  COLORS,\n  SIZE_VALUES,\n  BORDER_RADIUS,\n  VARIANTS,\n  COMPONENT_DISPLAY_NAMES,\n} from '../constants/strings';\n\n/**\n * Props for the ConfirmationModal component\n */\nexport interface ConfirmationModalProps {\n  /** Title text displayed at the top of the modal */\n  title: string;\n  /** Descriptive text explaining the action requiring confirmation */\n  description: string;\n  /** Callback function invoked when the user confirms the action */\n  onConfirm: () => void | Promise<void>;\n  /** Callback function invoked when the user cancels the action */\n  onCancel: () => void;\n  /** Optional: Text for the confirm button (defaults to \"Confirm\") */\n  confirmText?: string;\n  /** Optional: Text for the cancel button (defaults to \"Cancel\") */\n  cancelText?: string;\n  /** Optional: Whether to show the confirm button in error state (defaults to false) */\n  showErrorState?: boolean;\n}\n\n/**\n * ConfirmationModal Component\n * \n * A reusable confirmation dialog that prompts users to confirm or cancel an action.\n * Features hover state for the confirm button and customizable button text.\n * \n * @example\n * ```tsx\n * <ConfirmationModal\n *   title=\"Delete Item\"\n *   description=\"Are you sure you want to delete this item?\"\n *   onConfirm={handleDelete}\n *   onCancel={handleCancel}\n *   showErrorState\n * />\n * ```\n */\nconst ConfirmationModal: React.FC<ConfirmationModalProps> = ({\n  title,\n  description,\n  onConfirm,\n  onCancel,\n  confirmText = BUTTON_TEXT.CONFIRM,\n  cancelText = BUTTON_TEXT.CANCEL,\n  showErrorState = false,\n}) => {\n  const [isConfirmHover, setIsConfirmHover] = useState(false);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsConfirmHover(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsConfirmHover(false);\n  }, []);\n\n  const confirmButtonColor = showErrorState && isConfirmHover ? COLORS.ERROR : COLORS.DEFAULT;\n\n  return (\n    <AlertDialog open={true}>\n      <AlertDialogContent\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        className={CSS_CLASS_NAMES.DM_SANS}\n        css={{\n          button: {\n            borderRadius: BORDER_RADIUS.EIGHT_PX,\n          },\n        }}\n      >\n        <AlertDialogTitle\n          css={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            border: 'none !important',\n            padding: '24px $12 8px $12 !important',\n          }}\n        >\n          {title}\n        </AlertDialogTitle>\n\n        <AlertDialogDescription\n          css={{\n            overflowWrap: 'break-word',\n            padding: '0px $12 0px $12 !important',\n            fontSize: '$sm',\n            fontWeight: '400',\n            lineHeight: '20px',\n            letterSpacing: '0px',\n            color: '$neutral800',\n            margin: '0 !important',\n          }}\n        >\n          {description}\n        </AlertDialogDescription>\n\n        <AlertDialogActions css={{ gap: '$6' }}>\n          <AlertDialogCancel asChild onClick={onCancel}>\n            <Button color={COLORS.DEFAULT} variant={VARIANTS.SOLID} size={SIZE_VALUES.LARGE}>\n              {cancelText}\n            </Button>\n          </AlertDialogCancel>\n\n          <AlertDialogAction asChild>\n            <Button\n              onMouseEnter={handleMouseEnter}\n              onMouseLeave={handleMouseLeave}\n              color={confirmButtonColor}\n              size={SIZE_VALUES.LARGE}\n              onClick={onConfirm}\n            >\n              {confirmText}\n            </Button>\n          </AlertDialogAction>\n        </AlertDialogActions>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n};\n\nConfirmationModal.displayName = COMPONENT_DISPLAY_NAMES.CONFIRMATION_MODAL;\n\nexport default ConfirmationModal;\n"],"names":["BUTTON_TEXT","useState","useCallback","COLORS","AlertDialog","AlertDialogContent","CSS_CLASS_NAMES","BORDER_RADIUS","AlertDialogTitle","AlertDialogDescription","AlertDialogActions","AlertDialogCancel","Button","VARIANTS","SIZE_VALUES","AlertDialogAction","COMPONENT_DISPLAY_NAMES"],"mappings":"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"}

package/dist/cjs/commons/components/custom-pill.js

@@ -3,31 +3,47 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var strings = require('../constants/strings.js');
 var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
 var text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
 var iconButton = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js');
 var closeCircleFill = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/close-circle-fill.js');
 
+const PILL_STYLES = {
+  default: {
+    background: "rgba(100, 116, 139, 0.08)",
+    textColor: "$secondary800"
+  },
+  success: {
+    background: "$positive100",
+    textColor: "$neutral900"
+  }
+};
 const CustomPill = React.memo(({
   label,
-  onCloseHandler,
+  onClose,
   variant,
   radius,
-  fontFamily = "DM Sans",
-  isClosable = true
+  fontFamily = strings.FONT_FAMILIES.DM_SANS,
+  isClosable = true,
+  className
 }) => {
-  const isDefaultVariant = variant === "default";
+  const styles = PILL_STYLES[variant];
+  const handleClose = React.useCallback(() => {
+    onClose == null ? void 0 : onClose();
+  }, [onClose]);
   return /* @__PURE__ */ React.createElement(
     flex.Flex,
     {
       alignItems: "center",
+      className,
       css: {
         margin: "2px !important",
         height: "$6",
-        background: isDefaultVariant ? "rgba(100, 116, 139, 0.08)" : "$positive100",
+        background: styles.background,
         padding: "$2",
         paddingLeft: radius === "sm" ? "$3" : "$2",
-        borderRadius: radius === "sm" ? "$sm" : "99px",
+        borderRadius: radius === "sm" ? "$sm" : strings.BORDER_RADIUS.NINETY_NINE_PX,
         "& > *": {
           fontFamily
         }
@@ -39,13 +55,13 @@ const CustomPill = React.memo(({
         size: "xs",
         weight: "medium",
         css: {
-          color: isDefaultVariant ? "$secondary800" : "$neutral900",
+          color: styles.textColor,
           paddingInline: "$1"
         }
       },
       label
     ),
-    isClosable && /* @__PURE__ */ React.createElement(
+    isClosable && onClose && /* @__PURE__ */ React.createElement(
       iconButton.IconButton,
       {
         css: {
@@ -55,14 +71,16 @@ const CustomPill = React.memo(({
           background: "transparent !important",
           ".twigs-button__icon-container": { position: "static" }
         },
-        variant: "ghost",
-        color: "default",
-        onClick: onCloseHandler,
-        icon: /* @__PURE__ */ React.createElement(closeCircleFill.CloseCircleFillIcon, { size: 12 })
+        variant: strings.VARIANTS.GHOST,
+        color: strings.COLORS.DEFAULT,
+        onClick: handleClose,
+        icon: /* @__PURE__ */ React.createElement(closeCircleFill.CloseCircleFillIcon, { size: strings.NUMERIC_CONSTANTS.CLOSE_ICON_SIZE }),
+        "aria-label": strings.ARIA_LABELS.REMOVE_PILL
       }
     )
   );
 });
+CustomPill.displayName = strings.COMPONENT_DISPLAY_NAMES.CUSTOM_PILL;
 
 exports.default = CustomPill;
 //# sourceMappingURL=custom-pill.js.map

package/dist/cjs/commons/components/custom-pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-pill.js","sources":["../../../../src/commons/components/custom-pill.tsx"],"sourcesContent":["import { Flex, IconButton, Text } from \"@sparrowengg/twigs-react\";\nimport { CloseCircleFillIcon } from \"@sparrowengg/twigs-react-icons\";\nimport React from \"react\";\n\ntype CustomPillProps = {\n  label: string;\n  onCloseHandler?: () => void;\n  variant: \"default\" | \"success\";\n  radius: \"sm\" | \"md\";\n  fontFamily?: \"Roboto Mono\";\n  isClosable?: boolean;\n};\n\nconst CustomPill: React.FC<CustomPillProps> = React.memo(({\n  label,\n  onCloseHandler,\n  variant,\n  radius,\n  fontFamily = \"DM Sans\",\n  isClosable = true\n}) => {\n  const isDefaultVariant = variant === \"default\";\n  return (\n    <Flex\n      alignItems=\"center\"\n      css={{\n        margin: \"2px !important\",\n        height: \"$6\",\n        background: isDefaultVariant\n          ? \"rgba(100, 116, 139, 0.08)\"\n          : \"$positive100\",\n        padding: \"$2\",\n        paddingLeft: radius === \"sm\" ? \"$3\" : \"$2\",\n        borderRadius: radius === \"sm\" ? \"$sm\" : \"99px\",\n        \"& > *\": {\n          fontFamily\n        }\n      }}\n    >\n      <Text\n        size=\"xs\"\n        weight=\"medium\"\n        css={{\n          color: isDefaultVariant ? \"$secondary800\" : \"$neutral900\",\n          paddingInline: \"$1\"\n        }}\n      >\n        {label}\n      </Text>\n      {isClosable && (\n        <IconButton\n          css={{\n            padding: \"$1\",\n            height: \"$4\",\n            width: \"$4\",\n            background: \"transparent !important\",\n            \".twigs-button__icon-container\": { position: \"static\" }\n          }}\n          variant=\"ghost\"\n          color=\"default\"\n          onClick={onCloseHandler}\n          icon={<CloseCircleFillIcon size={12} />}\n        />\n      )}\n    </Flex>\n  );\n});\n\nexport default CustomPill;\n"],"names":["Flex","Text","IconButton","CloseCircleFillIcon"],"mappings":";;;;;;;;;;AAaM,MAAA,UAAA,GAAwC,KAAM,CAAA,IAAA,CAAK,CAAC;AAAA,EACxD,KAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAa,GAAA,SAAA;AAAA,EACb,UAAa,GAAA,IAAA;AACf,CAAM,KAAA;AACJ,EAAA,MAAM,mBAAmB,OAAY,KAAA,SAAA,CAAA;AACrC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAACA,SAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,QAAA;AAAA,MACX,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA,gBAAA;AAAA,QACR,MAAQ,EAAA,IAAA;AAAA,QACR,UAAA,EAAY,mBACR,2BACA,GAAA,cAAA;AAAA,QACJ,OAAS,EAAA,IAAA;AAAA,QACT,WAAA,EAAa,MAAW,KAAA,IAAA,GAAO,IAAO,GAAA,IAAA;AAAA,QACtC,YAAA,EAAc,MAAW,KAAA,IAAA,GAAO,KAAQ,GAAA,MAAA;AAAA,QACxC,OAAS,EAAA;AAAA,UACP,UAAA;AAAA,SACF;AAAA,OACF;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,IAAA;AAAA,QACL,MAAO,EAAA,QAAA;AAAA,QACP,GAAK,EAAA;AAAA,UACH,KAAA,EAAO,mBAAmB,eAAkB,GAAA,aAAA;AAAA,UAC5C,aAAe,EAAA,IAAA;AAAA,SACjB;AAAA,OAAA;AAAA,MAEC,KAAA;AAAA,KACH;AAAA,IACC,UACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,OAAS,EAAA,IAAA;AAAA,UACT,MAAQ,EAAA,IAAA;AAAA,UACR,KAAO,EAAA,IAAA;AAAA,UACP,UAAY,EAAA,wBAAA;AAAA,UACZ,+BAAA,EAAiC,EAAE,QAAA,EAAU,QAAS,EAAA;AAAA,SACxD;AAAA,QACA,OAAQ,EAAA,OAAA;AAAA,QACR,KAAM,EAAA,SAAA;AAAA,QACN,OAAS,EAAA,cAAA;AAAA,QACT,IAAM,kBAAA,KAAA,CAAA,aAAA,CAACC,mCAAoB,EAAA,EAAA,IAAA,EAAM,EAAI,EAAA,CAAA;AAAA,OAAA;AAAA,KACvC;AAAA,GAEJ,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"custom-pill.js","sources":["../../../../src/commons/components/custom-pill.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { Flex, IconButton, Text } from '@sparrowengg/twigs-react';\nimport { CloseCircleFillIcon } from '@sparrowengg/twigs-react-icons';\nimport {\n  FONT_FAMILIES,\n  ARIA_LABELS,\n  NUMERIC_CONSTANTS,\n  VARIANTS,\n  COLORS,\n  BORDER_RADIUS,\n  COMPONENT_DISPLAY_NAMES,\n} from '../constants/strings';\n\n/**\n * Available pill variants\n */\nexport type PillVariant = 'default' | 'success';\n\n/**\n * Available border radius options\n */\nexport type PillRadius = 'sm' | 'md';\n\n/**\n * Available font families\n */\nexport type PillFontFamily = 'DM Sans' | 'Roboto Mono';\n\n/**\n * Props for the CustomPill component\n */\nexport interface CustomPillProps {\n  /** Text content to display in the pill */\n  label: string;\n  /** Optional callback when the close button is clicked */\n  onClose?: () => void;\n  /** Visual style variant of the pill */\n  variant: PillVariant;\n  /** Border radius size */\n  radius: PillRadius;\n  /** Font family for the pill text */\n  fontFamily?: PillFontFamily;\n  /** Whether the pill can be closed/removed */\n  isClosable?: boolean;\n  /** Optional additional CSS class name */\n  className?: string;\n}\n\n/**\n * Styling constants for CustomPill\n */\nconst PILL_STYLES = {\n  default: {\n    background: 'rgba(100, 116, 139, 0.08)',\n    textColor: '$secondary800',\n  },\n  success: {\n    background: '$positive100',\n    textColor: '$neutral900',\n  },\n} as const;\n\nconst CLOSE_ICON_SIZE = 12;\n\n/**\n * CustomPill Component\n * \n * A styled pill component that displays a label with an optional close button.\n * Supports different visual variants and customization options.\n * \n * @example\n * ```tsx\n * <CustomPill\n *   label=\"Active\"\n *   variant=\"success\"\n *   radius=\"md\"\n *   onClose={() => console.log('Pill closed')}\n * />\n * ```\n */\nconst CustomPill: React.FC<CustomPillProps> = React.memo(({\n  label,\n  onClose,\n  variant,\n  radius,\n  fontFamily = FONT_FAMILIES.DM_SANS,\n  isClosable = true,\n  className,\n}) => {\n  const styles = PILL_STYLES[variant];\n\n  const handleClose = useCallback(() => {\n    onClose?.();\n  }, [onClose]);\n\n  return (\n    <Flex\n      alignItems=\"center\"\n      className={className}\n      css={{\n        margin: '2px !important',\n        height: '$6',\n        background: styles.background,\n        padding: '$2',\n        paddingLeft: radius === 'sm' ? '$3' : '$2',\n        borderRadius: radius === 'sm' ? '$sm' : BORDER_RADIUS.NINETY_NINE_PX,\n        '& > *': {\n          fontFamily,\n        },\n      }}\n    >\n      <Text\n        size=\"xs\"\n        weight=\"medium\"\n        css={{\n          color: styles.textColor,\n          paddingInline: '$1',\n        }}\n      >\n        {label}\n      </Text>\n      {isClosable && onClose && (\n        <IconButton\n          css={{\n            padding: '$1',\n            height: '$4',\n            width: '$4',\n            background: 'transparent !important',\n            '.twigs-button__icon-container': { position: 'static' },\n          }}\n          variant={VARIANTS.GHOST}\n          color={COLORS.DEFAULT}\n          onClick={handleClose}\n          icon={<CloseCircleFillIcon size={NUMERIC_CONSTANTS.CLOSE_ICON_SIZE} />}\n          aria-label={ARIA_LABELS.REMOVE_PILL}\n        />\n      )}\n    </Flex>\n  );\n});\n\nCustomPill.displayName = COMPONENT_DISPLAY_NAMES.CUSTOM_PILL;\n\nexport default CustomPill;\n"],"names":["FONT_FAMILIES","useCallback","Flex","BORDER_RADIUS","Text","IconButton","VARIANTS","COLORS","CloseCircleFillIcon","NUMERIC_CONSTANTS","ARIA_LABELS","COMPONENT_DISPLAY_NAMES"],"mappings":";;;;;;;;;;;AAmDA,MAAM,WAAc,GAAA;AAAA,EAClB,OAAS,EAAA;AAAA,IACP,UAAY,EAAA,2BAAA;AAAA,IACZ,SAAW,EAAA,eAAA;AAAA,GACb;AAAA,EACA,OAAS,EAAA;AAAA,IACP,UAAY,EAAA,cAAA;AAAA,IACZ,SAAW,EAAA,aAAA;AAAA,GACb;AACF,CAAA,CAAA;AAoBM,MAAA,UAAA,GAAwC,KAAM,CAAA,IAAA,CAAK,CAAC;AAAA,EACxD,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAaA,qBAAc,CAAA,OAAA;AAAA,EAC3B,UAAa,GAAA,IAAA;AAAA,EACb,SAAA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,MAAA,GAAS,YAAY,OAAO,CAAA,CAAA;AAElC,EAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM;AACpC,IAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA,CAAA;AAAA,GACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,QAAA;AAAA,MACX,SAAA;AAAA,MACA,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA,gBAAA;AAAA,QACR,MAAQ,EAAA,IAAA;AAAA,QACR,YAAY,MAAO,CAAA,UAAA;AAAA,QACnB,OAAS,EAAA,IAAA;AAAA,QACT,WAAA,EAAa,MAAW,KAAA,IAAA,GAAO,IAAO,GAAA,IAAA;AAAA,QACtC,YAAc,EAAA,MAAA,KAAW,IAAO,GAAA,KAAA,GAAQC,qBAAc,CAAA,cAAA;AAAA,QACtD,OAAS,EAAA;AAAA,UACP,UAAA;AAAA,SACF;AAAA,OACF;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,IAAA;AAAA,QACL,MAAO,EAAA,QAAA;AAAA,QACP,GAAK,EAAA;AAAA,UACH,OAAO,MAAO,CAAA,SAAA;AAAA,UACd,aAAe,EAAA,IAAA;AAAA,SACjB;AAAA,OAAA;AAAA,MAEC,KAAA;AAAA,KACH;AAAA,IACC,cAAc,OACb,oBAAA,KAAA,CAAA,aAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,OAAS,EAAA,IAAA;AAAA,UACT,MAAQ,EAAA,IAAA;AAAA,UACR,KAAO,EAAA,IAAA;AAAA,UACP,UAAY,EAAA,wBAAA;AAAA,UACZ,+BAAA,EAAiC,EAAE,QAAA,EAAU,QAAS,EAAA;AAAA,SACxD;AAAA,QACA,SAASC,gBAAS,CAAA,KAAA;AAAA,QAClB,OAAOC,cAAO,CAAA,OAAA;AAAA,QACd,OAAS,EAAA,WAAA;AAAA,QACT,IAAM,kBAAA,KAAA,CAAA,aAAA,CAACC,mCAAoB,EAAA,EAAA,IAAA,EAAMC,0BAAkB,eAAiB,EAAA,CAAA;AAAA,QACpE,cAAYC,mBAAY,CAAA,WAAA;AAAA,OAAA;AAAA,KAC1B;AAAA,GAEJ,CAAA;AAEJ,CAAC,EAAA;AAED,UAAA,CAAW,cAAcC,+BAAwB,CAAA,WAAA;;;;"}

package/dist/cjs/commons/components/draftModal.js

@@ -3,45 +3,59 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var strings = require('../constants/strings.js');
 var index = require('../../node_modules/@sparrowengg/twigs-react/dist/es/dialog/dialogs-manager/index.js');
 
+const DEFAULT_CONFIG = {
+  title: strings.MODAL_TITLES.YOU_WILL_BE_REDIRECTED,
+  content: strings.MODAL_DESCRIPTIONS.DRAFT_REDIRECT,
+  confirmLabel: strings.BUTTON_TEXT.YES_PROCEED,
+  cancelLabel: strings.BUTTON_TEXT.CANCEL,
+  minWidth: strings.NUMERIC_CONSTANTS.MIN_WIDTH_464PX,
+  buttonWidth: strings.NUMERIC_CONSTANTS.BUTTON_WIDTH_106PX
+};
 const DraftModal = ({
-  onSaveHandler,
-  onCloseHandler,
-  onCancel
+  onSave,
+  onClose,
+  onCancel,
+  title = DEFAULT_CONFIG.title,
+  content = DEFAULT_CONFIG.content
 }) => {
-  index.dialogs.open("confirm", {
-    title: "You will be redirected",
-    content: "To create a new share channel, we'll navigate you to the Share section. Your changes will be saved as a draft",
-    labels: {
-      confirm: "Yes, Proceed",
-      cancel: "Cancel"
-    },
-    css: {
-      "*": {
-        fontFamily: "DM Sans !important"
+  React.useEffect(() => {
+    index.dialogs.open("confirm", {
+      title,
+      content,
+      labels: {
+        confirm: DEFAULT_CONFIG.confirmLabel,
+        cancel: DEFAULT_CONFIG.cancelLabel
+      },
+      css: {
+        "*": {
+          fontFamily: strings.FONT_FAMILIES.DM_SANS_IMPORTANT
+        },
+        minWidth: DEFAULT_CONFIG.minWidth,
+        '[class$="variant-solid"]:nth-child(1)': {
+          width: DEFAULT_CONFIG.buttonWidth,
+          marginLeft: "auto"
+        }
+      },
+      confirmButtonProps: {
+        color: strings.COLORS.PRIMARY
+      },
+      onCancel() {
+        onCancel();
+      },
+      onConfirm() {
+        onSave();
       },
-      minWidth: "464px",
-      '[class$="variant-solid"]:nth-child(1)': {
-        width: "106px",
-        marginLeft: "auto"
+      onClose() {
+        onClose();
       }
-    },
-    confirmButtonProps: {
-      color: "primary"
-    },
-    onCancel(e) {
-      onCancel();
-    },
-    onConfirm(e) {
-      onSaveHandler();
-    },
-    onClose() {
-      onCloseHandler();
-    }
-  });
+    });
+  }, [title, content, onSave, onCancel, onClose]);
   return /* @__PURE__ */ React.createElement(index.DialogsManager, null);
 };
+DraftModal.displayName = strings.COMPONENT_DISPLAY_NAMES.DRAFT_MODAL;
 
 exports.default = DraftModal;
 //# sourceMappingURL=draftModal.js.map

package/dist/cjs/commons/components/draftModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"draftModal.js","sources":["../../../../src/commons/components/draftModal.tsx"],"sourcesContent":["import React from \"react\";\nimport { dialogs, DialogsManager } from \"@sparrowengg/twigs-react\";\ntype DraftModalProps = {\n  onSaveHandler: () => void;\n  onCloseHandler: () => void;\n  onCancel: () => void;\n};\nconst DraftModal: React.FC<DraftModalProps> = ({\n  onSaveHandler,\n  onCloseHandler,\n  onCancel\n}) => {\n  dialogs.open(\"confirm\", {\n    title: \"You will be redirected\",\n    content:\n      \"To create a new share channel, we'll navigate you to the Share section. Your changes will be saved as a draft\",\n    labels: {\n      confirm: \"Yes, Proceed\",\n      cancel: \"Cancel\",\n    },\n    css: {\n      \"*\": {\n        fontFamily: \"DM Sans !important\",\n      },\n      minWidth: \"464px\",\n      '[class$=\"variant-solid\"]:nth-child(1)': {\n        width: \"106px\",\n        marginLeft: \"auto\",\n      },\n    },\n    confirmButtonProps: {\n      color: \"primary\",\n    },\n    onCancel(e) {\n      onCancel();\n    },\n    onConfirm(e) {\n      onSaveHandler();\n    },\n    onClose() {\n      onCloseHandler();\n    }\n  });\n  return <DialogsManager />;\n};\nexport default DraftModal;"],"names":["dialogs","DialogsManager"],"mappings":";;;;;;;AAOA,MAAM,aAAwC,CAAC;AAAA,EAC7C,aAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AACF,CAAM,KAAA;AACJ,EAAAA,aAAA,CAAQ,KAAK,SAAW,EAAA;AAAA,IACtB,KAAO,EAAA,wBAAA;AAAA,IACP,OACE,EAAA,+GAAA;AAAA,IACF,MAAQ,EAAA;AAAA,MACN,OAAS,EAAA,cAAA;AAAA,MACT,MAAQ,EAAA,QAAA;AAAA,KACV;AAAA,IACA,GAAK,EAAA;AAAA,MACH,GAAK,EAAA;AAAA,QACH,UAAY,EAAA,oBAAA;AAAA,OACd;AAAA,MACA,QAAU,EAAA,OAAA;AAAA,MACV,uCAAyC,EAAA;AAAA,QACvC,KAAO,EAAA,OAAA;AAAA,QACP,UAAY,EAAA,MAAA;AAAA,OACd;AAAA,KACF;AAAA,IACA,kBAAoB,EAAA;AAAA,MAClB,KAAO,EAAA,SAAA;AAAA,KACT;AAAA,IACA,SAAS,CAAG,EAAA;AACV,MAAS,QAAA,EAAA,CAAA;AAAA,KACX;AAAA,IACA,UAAU,CAAG,EAAA;AACX,MAAc,aAAA,EAAA,CAAA;AAAA,KAChB;AAAA,IACA,OAAU,GAAA;AACR,MAAe,cAAA,EAAA,CAAA;AAAA,KACjB;AAAA,GACD,CAAA,CAAA;AACD,EAAA,2CAAQC,oBAAe,EAAA,IAAA,CAAA,CAAA;AACzB;;;;"}
+{"version":3,"file":"draftModal.js","sources":["../../../../src/commons/components/draftModal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { dialogs, DialogsManager } from '@sparrowengg/twigs-react';\nimport {\n  MODAL_TITLES,\n  MODAL_DESCRIPTIONS,\n  BUTTON_TEXT,\n  FONT_FAMILIES,\n  NUMERIC_CONSTANTS,\n  COLORS,\n  COMPONENT_DISPLAY_NAMES,\n} from '../constants/strings';\n\n/**\n * Props for the DraftModal component\n */\nexport interface DraftModalProps {\n  /** Callback invoked when user confirms to proceed */\n  onSave: () => void;\n  /** Callback invoked when the dialog is closed */\n  onClose: () => void;\n  /** Callback invoked when user cancels the action */\n  onCancel: () => void;\n  /** Optional custom title for the modal */\n  title?: string;\n  /** Optional custom content message */\n  content?: string;\n}\n\n/**\n * Default configuration for the draft modal\n */\nconst DEFAULT_CONFIG = {\n  title: MODAL_TITLES.YOU_WILL_BE_REDIRECTED,\n  content: MODAL_DESCRIPTIONS.DRAFT_REDIRECT,\n  confirmLabel: BUTTON_TEXT.YES_PROCEED,\n  cancelLabel: BUTTON_TEXT.CANCEL,\n  minWidth: NUMERIC_CONSTANTS.MIN_WIDTH_464PX,\n  buttonWidth: NUMERIC_CONSTANTS.BUTTON_WIDTH_106PX,\n} as const;\n\n/**\n * DraftModal Component\n * \n * A modal dialog that prompts the user before redirecting them to another section\n * while saving their current work as a draft.\n * \n * @example\n * ```tsx\n * <DraftModal\n *   onSave={handleSaveAsDraft}\n *   onClose={handleClose}\n *   onCancel={handleCancel}\n * />\n * ```\n */\nconst DraftModal: React.FC<DraftModalProps> = ({\n  onSave,\n  onClose,\n  onCancel,\n  title = DEFAULT_CONFIG.title,\n  content = DEFAULT_CONFIG.content,\n}) => {\n  useEffect(() => {\n    dialogs.open('confirm', {\n      title,\n      content,\n      labels: {\n        confirm: DEFAULT_CONFIG.confirmLabel,\n        cancel: DEFAULT_CONFIG.cancelLabel,\n      },\n      css: {\n        '*': {\n          fontFamily: FONT_FAMILIES.DM_SANS_IMPORTANT,\n        },\n        minWidth: DEFAULT_CONFIG.minWidth,\n        '[class$=\"variant-solid\"]:nth-child(1)': {\n          width: DEFAULT_CONFIG.buttonWidth,\n          marginLeft: 'auto',\n        },\n      },\n      confirmButtonProps: {\n        color: COLORS.PRIMARY,\n      },\n      onCancel() {\n        onCancel();\n      },\n      onConfirm() {\n        onSave();\n      },\n      onClose() {\n        onClose();\n      },\n    });\n  }, [title, content, onSave, onCancel, onClose]);\n\n  return <DialogsManager />;\n};\n\nDraftModal.displayName = COMPONENT_DISPLAY_NAMES.DRAFT_MODAL;\n\nexport default DraftModal;"],"names":["MODAL_TITLES","MODAL_DESCRIPTIONS","BUTTON_TEXT","NUMERIC_CONSTANTS","useEffect","dialogs","FONT_FAMILIES","COLORS","DialogsManager","COMPONENT_DISPLAY_NAMES"],"mappings":";;;;;;;;AA+BA,MAAM,cAAiB,GAAA;AAAA,EACrB,OAAOA,oBAAa,CAAA,sBAAA;AAAA,EACpB,SAASC,0BAAmB,CAAA,cAAA;AAAA,EAC5B,cAAcC,mBAAY,CAAA,WAAA;AAAA,EAC1B,aAAaA,mBAAY,CAAA,MAAA;AAAA,EACzB,UAAUC,yBAAkB,CAAA,eAAA;AAAA,EAC5B,aAAaA,yBAAkB,CAAA,kBAAA;AACjC,CAAA,CAAA;AAiBA,MAAM,aAAwC,CAAC;AAAA,EAC7C,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAQ,cAAe,CAAA,KAAA;AAAA,EACvB,UAAU,cAAe,CAAA,OAAA;AAC3B,CAAM,KAAA;AACJ,EAAAC,eAAA,CAAU,MAAM;AACd,IAAAC,aAAA,CAAQ,KAAK,SAAW,EAAA;AAAA,MACtB,KAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,SAAS,cAAe,CAAA,YAAA;AAAA,QACxB,QAAQ,cAAe,CAAA,WAAA;AAAA,OACzB;AAAA,MACA,GAAK,EAAA;AAAA,QACH,GAAK,EAAA;AAAA,UACH,YAAYC,qBAAc,CAAA,iBAAA;AAAA,SAC5B;AAAA,QACA,UAAU,cAAe,CAAA,QAAA;AAAA,QACzB,uCAAyC,EAAA;AAAA,UACvC,OAAO,cAAe,CAAA,WAAA;AAAA,UACtB,UAAY,EAAA,MAAA;AAAA,SACd;AAAA,OACF;AAAA,MACA,kBAAoB,EAAA;AAAA,QAClB,OAAOC,cAAO,CAAA,OAAA;AAAA,OAChB;AAAA,MACA,QAAW,GAAA;AACT,QAAS,QAAA,EAAA,CAAA;AAAA,OACX;AAAA,MACA,SAAY,GAAA;AACV,QAAO,MAAA,EAAA,CAAA;AAAA,OACT;AAAA,MACA,OAAU,GAAA;AACR,QAAQ,OAAA,EAAA,CAAA;AAAA,OACV;AAAA,KACD,CAAA,CAAA;AAAA,KACA,CAAC,KAAA,EAAO,SAAS,MAAQ,EAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAE9C,EAAA,2CAAQC,oBAAe,EAAA,IAAA,CAAA,CAAA;AACzB,EAAA;AAEA,UAAA,CAAW,cAAcC,+BAAwB,CAAA,WAAA;;;;"}

package/dist/cjs/commons/components/edit-confirmation.js

@@ -3,25 +3,45 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var strings = require('../constants/strings.js');
 var alertDialog = require('../../node_modules/@sparrowengg/twigs-react/dist/es/alert-dialog/alert-dialog.js');
 var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
 
 const EditConfirmation = ({
-  name,
+  title,
   description,
   onConfirm,
-  onCancel
+  onCancel,
+  confirmText = strings.BUTTON_TEXT.CONFIRM,
+  cancelText = strings.BUTTON_TEXT.CANCEL
 }) => {
-  const [isDeleteIconHover, setIsDeleteIconHover] = React.useState(false);
+  const [isConfirmHover, setIsConfirmHover] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(false);
+  const handleMouseEnter = React.useCallback(() => {
+    setIsConfirmHover(true);
+  }, []);
+  const handleMouseLeave = React.useCallback(() => {
+    setIsConfirmHover(false);
+  }, []);
+  const handleConfirm = React.useCallback(async () => {
+    try {
+      setIsLoading(true);
+      await onConfirm();
+    } catch (error) {
+      console.error(strings.CONSOLE_MESSAGES.ERROR_DURING_CONFIRMATION, error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onConfirm]);
+  const confirmButtonColor = isConfirmHover ? strings.COLORS.SECONDARY : strings.COLORS.DEFAULT;
   return /* @__PURE__ */ React.createElement(alertDialog.AlertDialog, { open: true }, /* @__PURE__ */ React.createElement(
     alertDialog.AlertDialogContent,
     {
       onOpenAutoFocus: (e) => e.preventDefault(),
-      className: "dm-sans",
+      className: strings.CSS_CLASS_NAMES.DM_SANS,
       css: {
         button: {
-          borderRadius: "8px"
+          borderRadius: strings.BORDER_RADIUS.EIGHT_PX
         }
       }
     },
@@ -35,7 +55,7 @@ const EditConfirmation = ({
           padding: "24px $12 8px $12 !important"
         }
       },
-      name
+      title
     ),
     /* @__PURE__ */ React.createElement(
       alertDialog.AlertDialogDescription,
@@ -53,24 +73,21 @@ const EditConfirmation = ({
       },
       description
     ),
-    /* @__PURE__ */ React.createElement(alertDialog.AlertDialogActions, { css: { gap: "$6" } }, /* @__PURE__ */ React.createElement(alertDialog.AlertDialogCancel, { asChild: true, onClick: onCancel }, /* @__PURE__ */ React.createElement(button.Button, { color: "default", variant: "solid", size: "lg" }, "Cancel")), /* @__PURE__ */ React.createElement(alertDialog.AlertDialogAction, { asChild: true }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(alertDialog.AlertDialogActions, { css: { gap: "$6" } }, /* @__PURE__ */ React.createElement(alertDialog.AlertDialogCancel, { asChild: true, onClick: onCancel }, /* @__PURE__ */ React.createElement(button.Button, { color: strings.COLORS.DEFAULT, variant: strings.VARIANTS.SOLID, size: strings.SIZE_VALUES.LARGE, disabled: isLoading }, cancelText)), /* @__PURE__ */ React.createElement(alertDialog.AlertDialogAction, { asChild: true }, /* @__PURE__ */ React.createElement(
       button.Button,
       {
         loading: isLoading,
-        onMouseEnter: () => setIsDeleteIconHover(true),
-        onMouseLeave: () => setIsDeleteIconHover(false),
-        color: isDeleteIconHover ? "secondary" : "default",
-        size: "lg",
-        onClick: async () => {
-          setIsLoading(true);
-          await onConfirm();
-          setIsLoading(false);
-        }
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        color: confirmButtonColor,
+        size: strings.SIZE_VALUES.LARGE,
+        onClick: handleConfirm
       },
-      "Confirm"
+      confirmText
     )))
   ));
 };
+EditConfirmation.displayName = strings.COMPONENT_DISPLAY_NAMES.EDIT_CONFIRMATION;
 
 exports.default = EditConfirmation;
 //# sourceMappingURL=edit-confirmation.js.map

package/dist/cjs/commons/components/edit-confirmation.js.map

@@ -1 +1 @@
-{"version":3,"file":"edit-confirmation.js","sources":["../../../../src/commons/components/edit-confirmation.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  AlertDialog,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogActions,\n  AlertDialogCancel,\n  AlertDialogAction,\n  Button,\n} from \"@sparrowengg/twigs-react\";\ntype ConfirmationModalProps = {\n  name: string;\n  description: string;\n  onConfirm: () => void | Promise<void>;\n  onCancel: () => void;\n};\nconst EditConfirmation: React.FC<ConfirmationModalProps> = ({\n  name,\n  description,\n  onConfirm,\n  onCancel,\n}) => {\n  const [isDeleteIconHover, setIsDeleteIconHover] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n  return (\n    <AlertDialog open={true}>\n      <AlertDialogContent\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        className=\"dm-sans\"\n        css={{\n          button: {\n            borderRadius: \"8px\",\n          },\n        }}\n      >\n        <AlertDialogTitle\n          css={{\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            border: \"none !important\",\n            padding: \"24px $12 8px $12 !important\",\n          }}\n        >\n          {name}\n        </AlertDialogTitle>\n\n        <AlertDialogDescription\n          css={{\n            overflowWrap: \"break-word\",\n            padding: \"0px $12 0px $12 !important\",\n            fontSize: \"$sm\",\n            fontWeight: \"400\",\n            lineHeight: \"20px\",\n            letterSpacing: \"0px\",\n            color: \"$neutral800\",\n            margin: \"0 !important\",\n          }}\n        >\n          {description}\n        </AlertDialogDescription>\n\n        <AlertDialogActions css={{ gap: \"$6\" }}>\n          <AlertDialogCancel asChild onClick={onCancel}>\n            <Button color=\"default\" variant=\"solid\" size=\"lg\">\n              Cancel\n            </Button>\n          </AlertDialogCancel>\n\n          <AlertDialogAction asChild>\n            <Button\n              loading={isLoading}\n              onMouseEnter={() => setIsDeleteIconHover(true)}\n              onMouseLeave={() => setIsDeleteIconHover(false)}\n              color={isDeleteIconHover ? \"secondary\" : \"default\"}\n              size=\"lg\"\n              onClick={async () => {\n                setIsLoading(true)\n                await onConfirm()\n                setIsLoading(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </AlertDialogAction>\n        </AlertDialogActions>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n};\nexport default EditConfirmation;\n"],"names":["useState","AlertDialog","AlertDialogContent","AlertDialogTitle","AlertDialogDescription","AlertDialogActions","AlertDialogCancel","Button","AlertDialogAction"],"mappings":";;;;;;;;AAiBA,MAAM,mBAAqD,CAAC;AAAA,EAC1D,IAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIA,eAAS,KAAK,CAAA,CAAA;AAChE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,KAAK,CAAA,CAAA;AAChD,EACE,uBAAA,KAAA,CAAA,aAAA,CAACC,uBAAY,EAAA,EAAA,IAAA,EAAM,IACjB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,eAAiB,EAAA,CAAC,CAAM,KAAA,CAAA,CAAE,cAAe,EAAA;AAAA,MACzC,SAAU,EAAA,SAAA;AAAA,MACV,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA;AAAA,UACN,YAAc,EAAA,KAAA;AAAA,SAChB;AAAA,OACF;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,4BAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,OAAS,EAAA,MAAA;AAAA,UACT,cAAgB,EAAA,eAAA;AAAA,UAChB,MAAQ,EAAA,iBAAA;AAAA,UACR,OAAS,EAAA,6BAAA;AAAA,SACX;AAAA,OAAA;AAAA,MAEC,IAAA;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,kCAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,YAAc,EAAA,YAAA;AAAA,UACd,OAAS,EAAA,4BAAA;AAAA,UACT,QAAU,EAAA,KAAA;AAAA,UACV,UAAY,EAAA,KAAA;AAAA,UACZ,UAAY,EAAA,MAAA;AAAA,UACZ,aAAe,EAAA,KAAA;AAAA,UACf,KAAO,EAAA,aAAA;AAAA,UACP,MAAQ,EAAA,cAAA;AAAA,SACV;AAAA,OAAA;AAAA,MAEC,WAAA;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA,CAACC,8BAAmB,EAAA,EAAA,GAAA,EAAK,EAAE,GAAA,EAAK,IAAK,EAAA,EAAA,kBAClC,KAAA,CAAA,aAAA,CAAAC,6BAAA,EAAA,EAAkB,OAAO,EAAA,IAAA,EAAC,OAAS,EAAA,QAAA,EAAA,kBACjC,KAAA,CAAA,aAAA,CAAAC,aAAA,EAAA,EAAO,KAAM,EAAA,SAAA,EAAU,OAAQ,EAAA,OAAA,EAAQ,IAAK,EAAA,IAAA,EAAA,EAAK,QAElD,CACF,CAEA,kBAAA,KAAA,CAAA,aAAA,CAACC,6BAAkB,EAAA,EAAA,OAAA,EAAO,IACxB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAACD,aAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,SAAA;AAAA,QACT,YAAA,EAAc,MAAM,oBAAA,CAAqB,IAAI,CAAA;AAAA,QAC7C,YAAA,EAAc,MAAM,oBAAA,CAAqB,KAAK,CAAA;AAAA,QAC9C,KAAA,EAAO,oBAAoB,WAAc,GAAA,SAAA;AAAA,QACzC,IAAK,EAAA,IAAA;AAAA,QACL,SAAS,YAAY;AACnB,UAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,UAAA,MAAM,SAAU,EAAA,CAAA;AAChB,UAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,SACpB;AAAA,OAAA;AAAA,MACD,SAAA;AAAA,KAGH,CACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"edit-confirmation.js","sources":["../../../../src/commons/components/edit-confirmation.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport {\n  AlertDialog,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogActions,\n  AlertDialogCancel,\n  AlertDialogAction,\n  Button,\n} from '@sparrowengg/twigs-react';\nimport {\n  BUTTON_TEXT,\n  CSS_CLASS_NAMES,\n  COLORS,\n  SIZE_VALUES,\n  BORDER_RADIUS,\n  VARIANTS,\n  CONSOLE_MESSAGES,\n  COMPONENT_DISPLAY_NAMES,\n} from '../constants/strings';\n\n/**\n * Props for the EditConfirmation component\n */\nexport interface EditConfirmationProps {\n  /** Title text displayed at the top of the modal */\n  title: string;\n  /** Descriptive text explaining the edit action */\n  description: string;\n  /** Async callback function invoked when the user confirms the edit */\n  onConfirm: () => void | Promise<void>;\n  /** Callback function invoked when the user cancels the edit */\n  onCancel: () => void;\n  /** Optional: Text for the confirm button (defaults to \"Confirm\") */\n  confirmText?: string;\n  /** Optional: Text for the cancel button (defaults to \"Cancel\") */\n  cancelText?: string;\n}\n\n/**\n * EditConfirmation Component\n * \n * A confirmation dialog specifically designed for edit operations.\n * Supports async operations with loading state and hover effects.\n * \n * @example\n * ```tsx\n * <EditConfirmation\n *   title=\"Confirm Edit\"\n *   description=\"Are you sure you want to save these changes?\"\n *   onConfirm={async () => await saveChanges()}\n *   onCancel={handleCancel}\n * />\n * ```\n */\nconst EditConfirmation: React.FC<EditConfirmationProps> = ({\n  title,\n  description,\n  onConfirm,\n  onCancel,\n  confirmText = BUTTON_TEXT.CONFIRM,\n  cancelText = BUTTON_TEXT.CANCEL,\n}) => {\n  const [isConfirmHover, setIsConfirmHover] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsConfirmHover(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsConfirmHover(false);\n  }, []);\n\n  const handleConfirm = useCallback(async () => {\n    try {\n      setIsLoading(true);\n      await onConfirm();\n    } catch (error) {\n      console.error(CONSOLE_MESSAGES.ERROR_DURING_CONFIRMATION, error);\n    } finally {\n      setIsLoading(false);\n    }\n  }, [onConfirm]);\n\n  const confirmButtonColor = isConfirmHover ? COLORS.SECONDARY : COLORS.DEFAULT;\n\n  return (\n    <AlertDialog open={true}>\n      <AlertDialogContent\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        className={CSS_CLASS_NAMES.DM_SANS}\n        css={{\n          button: {\n            borderRadius: BORDER_RADIUS.EIGHT_PX,\n          },\n        }}\n      >\n        <AlertDialogTitle\n          css={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            border: 'none !important',\n            padding: '24px $12 8px $12 !important',\n          }}\n        >\n          {title}\n        </AlertDialogTitle>\n\n        <AlertDialogDescription\n          css={{\n            overflowWrap: 'break-word',\n            padding: '0px $12 0px $12 !important',\n            fontSize: '$sm',\n            fontWeight: '400',\n            lineHeight: '20px',\n            letterSpacing: '0px',\n            color: '$neutral800',\n            margin: '0 !important',\n          }}\n        >\n          {description}\n        </AlertDialogDescription>\n\n        <AlertDialogActions css={{ gap: '$6' }}>\n          <AlertDialogCancel asChild onClick={onCancel}>\n            <Button color={COLORS.DEFAULT} variant={VARIANTS.SOLID} size={SIZE_VALUES.LARGE} disabled={isLoading}>\n              {cancelText}\n            </Button>\n          </AlertDialogCancel>\n\n          <AlertDialogAction asChild>\n            <Button\n              loading={isLoading}\n              onMouseEnter={handleMouseEnter}\n              onMouseLeave={handleMouseLeave}\n              color={confirmButtonColor}\n              size={SIZE_VALUES.LARGE}\n              onClick={handleConfirm}\n            >\n              {confirmText}\n            </Button>\n          </AlertDialogAction>\n        </AlertDialogActions>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n};\n\nEditConfirmation.displayName = COMPONENT_DISPLAY_NAMES.EDIT_CONFIRMATION;\n\nexport default EditConfirmation;\n"],"names":["BUTTON_TEXT","useState","useCallback","CONSOLE_MESSAGES","COLORS","AlertDialog","AlertDialogContent","CSS_CLASS_NAMES","BORDER_RADIUS","AlertDialogTitle","AlertDialogDescription","AlertDialogActions","AlertDialogCancel","Button","VARIANTS","SIZE_VALUES","AlertDialogAction","COMPONENT_DISPLAY_NAMES"],"mappings":"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"}

package/dist/cjs/commons/components/import-modal.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var strings = require('../constants/strings.js');
 var dialog = require('../../node_modules/@sparrowengg/twigs-react/dist/es/dialog/dialog.js');
 var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
 var heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
@@ -12,11 +13,29 @@ var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.j
 var formInput = require('../../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js');
 var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
 
+const DEFAULT_CONFIG = {
+  title: strings.MODAL_TITLES.NEW_CUSTOM_PROPERTY,
+  inputLabel: strings.FORM_LABELS.PROPERTY_NAME,
+  saveButtonText: strings.BUTTON_TEXT.SAVE,
+  cancelButtonText: strings.BUTTON_TEXT.CANCEL,
+  iconColor: strings.COLORS.ICON_GRAY_DARK
+};
 const ImportModal = ({
-  onCloseHandler,
-  onInputHandler,
-  onSaveHandler
+  onClose,
+  onInputChange,
+  onSave,
+  value = "",
+  title = DEFAULT_CONFIG.title,
+  inputLabel = DEFAULT_CONFIG.inputLabel,
+  placeholder,
+  isSaveDisabled = false
 }) => {
+  const handleInputChange = React.useCallback(
+    (event) => {
+      onInputChange(event.currentTarget.value);
+    },
+    [onInputChange]
+  );
   return /* @__PURE__ */ React.createElement(dialog.Dialog, { open: true }, /* @__PURE__ */ React.createElement(
     dialog.DialogContent,
     {
@@ -35,20 +54,21 @@ const ImportModal = ({
           borderBottom: "$borderWidths$xs solid $neutral200"
         }
       },
-      /* @__PURE__ */ React.createElement(heading.Heading, { size: "h6", css: { color: "$neutral900" } }, "New Custom Property"),
+      /* @__PURE__ */ React.createElement(heading.Heading, { size: "h6", css: { color: "$neutral900" } }, title),
       /* @__PURE__ */ React.createElement(
         iconButton.IconButton,
         {
-          variant: "ghost",
-          color: "default",
+          variant: strings.VARIANTS.GHOST,
+          color: strings.COLORS.DEFAULT,
           icon: /* @__PURE__ */ React.createElement(close.CloseIcon, null),
-          size: "lg",
+          size: strings.SIZE_VALUES.LARGE,
           css: {
             "& svg": {
-              color: "#64748B !important"
+              color: `${DEFAULT_CONFIG.iconColor} !important`
             }
           },
-          onClick: onCloseHandler
+          onClick: onClose,
+          "aria-label": strings.ARIA_LABELS.CLOSE_MODAL
         }
       )
     ),
@@ -62,10 +82,12 @@ const ImportModal = ({
       /* @__PURE__ */ React.createElement(
         formInput.FormInput,
         {
-          label: "Property Name",
+          label: inputLabel,
+          value,
           requiredIndicator: true,
-          onChange: (event) => onInputHandler(event.currentTarget.value),
-          size: "lg"
+          onChange: handleInputChange,
+          size: strings.SIZE_VALUES.LARGE,
+          placeholder
         }
       )
     ),
@@ -81,17 +103,26 @@ const ImportModal = ({
       /* @__PURE__ */ React.createElement(
         button.Button,
         {
-          size: "lg",
-          variant: "ghost",
-          color: "default",
-          onClick: onCloseHandler
+          size: strings.SIZE_VALUES.LARGE,
+          variant: strings.VARIANTS.GHOST,
+          color: strings.COLORS.DEFAULT,
+          onClick: onClose
         },
-        "Cancel"
+        DEFAULT_CONFIG.cancelButtonText
       ),
-      /* @__PURE__ */ React.createElement(button.Button, { size: "lg", onClick: onSaveHandler }, "Save")
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          size: strings.SIZE_VALUES.LARGE,
+          onClick: onSave,
+          disabled: isSaveDisabled
+        },
+        DEFAULT_CONFIG.saveButtonText
+      )
     )
   ));
 };
+ImportModal.displayName = strings.COMPONENT_DISPLAY_NAMES.IMPORT_MODAL;
 
 exports.default = ImportModal;
 //# sourceMappingURL=import-modal.js.map

package/dist/cjs/commons/components/import-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"import-modal.js","sources":["../../../../src/commons/components/import-modal.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Dialog,\n  DialogContent,\n  Flex,\n  FormInput,\n  Heading,\n  IconButton,\n} from \"@sparrowengg/twigs-react\";\nimport { CloseIcon } from \"@sparrowengg/twigs-react-icons\";\nimport React from \"react\";\n\ntype ImportModalProps = {\n  onCloseHandler: () => void;\n  onInputHandler: (value: string) => void;\n  onSaveHandler: () => void;\n};\n\nconst ImportModal: React.FC<ImportModalProps> = ({\n  onCloseHandler,\n  onInputHandler,\n  onSaveHandler,\n}) => {\n  return (\n    <Dialog open>\n      <DialogContent\n        css={{\n          padding: 0,\n          borderRadius: \"$3xl\",\n        }}\n      >\n        <Flex\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n          css={{\n            padding: \"$8 $12\",\n            borderBottom: \"$borderWidths$xs solid $neutral200\",\n          }}\n        >\n          <Heading size=\"h6\" css={{ color: \"$neutral900\" }}>\n            New Custom Property\n          </Heading>\n          <IconButton\n            variant=\"ghost\"\n            color=\"default\"\n            icon={<CloseIcon />}\n            size=\"lg\"\n            css={{\n              \"& svg\": {\n                color: \"#64748B !important\",\n              },\n            }}\n            onClick={onCloseHandler}\n          />\n        </Flex>\n        <Box\n          css={{\n            padding: \"$12\",\n          }}\n        >\n          <FormInput\n            label={\"Property Name\"}\n            requiredIndicator\n            onChange={(event) => onInputHandler(event.currentTarget.value)}\n            size=\"lg\"\n          />\n        </Box>\n        <Flex\n          gap=\"$4\"\n          css={{\n            justifyContent: \"flex-end\",\n            padding: \"$8 $12\",\n          }}\n        >\n          <Button\n            size=\"lg\"\n            variant=\"ghost\"\n            color=\"default\"\n            onClick={onCloseHandler}\n          >\n            Cancel\n          </Button>\n          <Button size=\"lg\" onClick={onSaveHandler}>\n            Save\n          </Button>\n        </Flex>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default ImportModal;"],"names":["Dialog","DialogContent","Flex","Heading","IconButton","CloseIcon","Box","FormInput","Button"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,cAA0C,CAAC;AAAA,EAC/C,cAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,KAAA,CAAA,aAAA,CAACA,aAAO,EAAA,EAAA,IAAA,EAAI,IACV,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,oBAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,OAAS,EAAA,CAAA;AAAA,QACT,YAAc,EAAA,MAAA;AAAA,OAChB;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,UAAW,EAAA,QAAA;AAAA,QACX,cAAe,EAAA,eAAA;AAAA,QACf,GAAK,EAAA;AAAA,UACH,OAAS,EAAA,QAAA;AAAA,UACT,YAAc,EAAA,oCAAA;AAAA,SAChB;AAAA,OAAA;AAAA,sBAEA,KAAA,CAAA,aAAA,CAACC,mBAAQ,IAAK,EAAA,IAAA,EAAK,KAAK,EAAE,KAAA,EAAO,aAAc,EAAA,EAAA,EAAG,qBAElD,CAAA;AAAA,sBACA,KAAA,CAAA,aAAA;AAAA,QAACC,qBAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,OAAA;AAAA,UACR,KAAM,EAAA,SAAA;AAAA,UACN,IAAA,sCAAOC,eAAU,EAAA,IAAA,CAAA;AAAA,UACjB,IAAK,EAAA,IAAA;AAAA,UACL,GAAK,EAAA;AAAA,YACH,OAAS,EAAA;AAAA,cACP,KAAO,EAAA,oBAAA;AAAA,aACT;AAAA,WACF;AAAA,UACA,OAAS,EAAA,cAAA;AAAA,SAAA;AAAA,OACX;AAAA,KACF;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAACC,OAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,OAAS,EAAA,KAAA;AAAA,SACX;AAAA,OAAA;AAAA,sBAEA,KAAA,CAAA,aAAA;AAAA,QAACC,mBAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA,eAAA;AAAA,UACP,iBAAiB,EAAA,IAAA;AAAA,UACjB,UAAU,CAAC,KAAA,KAAU,cAAe,CAAA,KAAA,CAAM,cAAc,KAAK,CAAA;AAAA,UAC7D,IAAK,EAAA,IAAA;AAAA,SAAA;AAAA,OACP;AAAA,KACF;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAACL,SAAA;AAAA,MAAA;AAAA,QACC,GAAI,EAAA,IAAA;AAAA,QACJ,GAAK,EAAA;AAAA,UACH,cAAgB,EAAA,UAAA;AAAA,UAChB,OAAS,EAAA,QAAA;AAAA,SACX;AAAA,OAAA;AAAA,sBAEA,KAAA,CAAA,aAAA;AAAA,QAACM,aAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,IAAA;AAAA,UACL,OAAQ,EAAA,OAAA;AAAA,UACR,KAAM,EAAA,SAAA;AAAA,UACN,OAAS,EAAA,cAAA;AAAA,SAAA;AAAA,QACV,QAAA;AAAA,OAED;AAAA,0CACCA,aAAO,EAAA,EAAA,IAAA,EAAK,IAAK,EAAA,OAAA,EAAS,iBAAe,MAE1C,CAAA;AAAA,KACF;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"import-modal.js","sources":["../../../../src/commons/components/import-modal.tsx"],"sourcesContent":["import React, { useCallback, ChangeEvent } from 'react';\nimport {\n  Box,\n  Button,\n  Dialog,\n  DialogContent,\n  Flex,\n  FormInput,\n  Heading,\n  IconButton,\n} from '@sparrowengg/twigs-react';\nimport { CloseIcon } from '@sparrowengg/twigs-react-icons';\nimport {\n  MODAL_TITLES,\n  FORM_LABELS,\n  BUTTON_TEXT,\n  COLORS,\n  SIZE_VALUES,\n  VARIANTS,\n  ARIA_LABELS,\n  COMPONENT_DISPLAY_NAMES,\n} from '../constants/strings';\n\n/**\n * Props for the ImportModal component\n */\nexport interface ImportModalProps {\n  /** Callback invoked when the modal is closed */\n  onClose: () => void;\n  /** Callback invoked when the input value changes */\n  onInputChange: (value: string) => void;\n  /** Callback invoked when the save button is clicked */\n  onSave: () => void;\n  /** Optional: Current input value for controlled component */\n  value?: string;\n  /** Optional: Custom modal title (defaults to \"New Custom Property\") */\n  title?: string;\n  /** Optional: Custom input label (defaults to \"Property Name\") */\n  inputLabel?: string;\n  /** Optional: Custom input placeholder */\n  placeholder?: string;\n  /** Optional: Whether the save button is disabled */\n  isSaveDisabled?: boolean;\n}\n\n/**\n * Default configuration for the import modal\n */\nconst DEFAULT_CONFIG = {\n  title: MODAL_TITLES.NEW_CUSTOM_PROPERTY,\n  inputLabel: FORM_LABELS.PROPERTY_NAME,\n  saveButtonText: BUTTON_TEXT.SAVE,\n  cancelButtonText: BUTTON_TEXT.CANCEL,\n  iconColor: COLORS.ICON_GRAY_DARK,\n} as const;\n\n/**\n * ImportModal Component\n * \n * A modal dialog for creating a new custom property with form input.\n * Provides a clean interface for property name entry with validation support.\n * \n * @example\n * ```tsx\n * <ImportModal\n *   onClose={handleClose}\n *   onInputChange={handleInputChange}\n *   onSave={handleSave}\n *   value={propertyName}\n * />\n * ```\n */\nconst ImportModal: React.FC<ImportModalProps> = ({\n  onClose,\n  onInputChange,\n  onSave,\n  value = '',\n  title = DEFAULT_CONFIG.title,\n  inputLabel = DEFAULT_CONFIG.inputLabel,\n  placeholder,\n  isSaveDisabled = false,\n}) => {\n  const handleInputChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      onInputChange(event.currentTarget.value);\n    },\n    [onInputChange]\n  );\n\n  return (\n    <Dialog open>\n      <DialogContent\n        css={{\n          padding: 0,\n          borderRadius: '$3xl',\n        }}\n      >\n        <Flex\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n          css={{\n            padding: '$8 $12',\n            borderBottom: '$borderWidths$xs solid $neutral200',\n          }}\n        >\n          <Heading size=\"h6\" css={{ color: '$neutral900' }}>\n            {title}\n          </Heading>\n          <IconButton\n            variant={VARIANTS.GHOST}\n            color={COLORS.DEFAULT}\n            icon={<CloseIcon />}\n            size={SIZE_VALUES.LARGE}\n            css={{\n              '& svg': {\n                color: `${DEFAULT_CONFIG.iconColor} !important`,\n              },\n            }}\n            onClick={onClose}\n            aria-label={ARIA_LABELS.CLOSE_MODAL}\n          />\n        </Flex>\n\n        <Box\n          css={{\n            padding: '$12',\n          }}\n        >\n          <FormInput\n            label={inputLabel}\n            value={value}\n            requiredIndicator\n            onChange={handleInputChange}\n            size={SIZE_VALUES.LARGE}\n            placeholder={placeholder}\n          />\n        </Box>\n\n        <Flex\n          gap=\"$4\"\n          css={{\n            justifyContent: 'flex-end',\n            padding: '$8 $12',\n          }}\n        >\n          <Button\n            size={SIZE_VALUES.LARGE}\n            variant={VARIANTS.GHOST}\n            color={COLORS.DEFAULT}\n            onClick={onClose}\n          >\n            {DEFAULT_CONFIG.cancelButtonText}\n          </Button>\n          <Button\n            size={SIZE_VALUES.LARGE}\n            onClick={onSave}\n            disabled={isSaveDisabled}\n          >\n            {DEFAULT_CONFIG.saveButtonText}\n          </Button>\n        </Flex>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nImportModal.displayName = COMPONENT_DISPLAY_NAMES.IMPORT_MODAL;\n\nexport default ImportModal;"],"names":["MODAL_TITLES","FORM_LABELS","BUTTON_TEXT","COLORS","useCallback","Dialog","DialogContent","Flex","Heading","IconButton","VARIANTS","CloseIcon","SIZE_VALUES","ARIA_LABELS","Box","FormInput","Button","COMPONENT_DISPLAY_NAMES"],"mappings":"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"}

package/dist/cjs/commons/components/spinner.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var strings = require('../constants/strings.js');
 var stitches_config = require('../../node_modules/@sparrowengg/twigs-react/dist/es/stitches.config.js');
 var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
 
@@ -41,9 +42,22 @@ const StyledBox = stitches_config.styled(box.Box, {
     size: "md"
   }
 });
-const Spinner = ({ size = "md" }) => {
-  return /* @__PURE__ */ React.createElement(StyledBox, { size });
+const Spinner = ({
+  size = strings.SIZE_VALUES.MEDIUM,
+  className,
+  ariaLabel = strings.ARIA_LABELS.LOADING
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    StyledBox,
+    {
+      size,
+      className,
+      role: strings.ATTRIBUTES.STATUS,
+      "aria-label": ariaLabel
+    }
+  );
 };
+Spinner.displayName = strings.COMPONENT_DISPLAY_NAMES.SPINNER;
 
 exports.default = Spinner;
 //# sourceMappingURL=spinner.js.map

package/dist/cjs/commons/components/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sources":["../../../../src/commons/components/spinner.tsx"],"sourcesContent":["import React from \"react\";\nimport { keyframes, Box, styled } from \"@sparrowengg/twigs-react\";\n\nconst spin = keyframes({\n  \"0%\": { transform: \"rotate(0deg)\" },\n  \"100%\": { transform: \"rotate(360deg)\" },\n});\n\nconst StyledBox = styled(Box, {\n  borderRadius: \"50%\",\n  width: \"$7\",\n  height: \"$7\",\n  borderStyle: \"solid\",\n  borderWidth: \"$md\",\n  borderBottomColor: \"$neutral400\",\n  borderRightColor: \"$neutral400\",\n  borderTopColor: \"$black900\",\n  borderLeftColor: \"$black900\",\n  animationDuration: \"800ms\",\n  animationTimingFunction: \"linear\",\n  animationIterationCount: \"infinite\",\n  willChange: \"transform\",\n  animationName: `${spin}`,\n  variants: {\n    size: {\n      sm: {\n        width: \"$5\",\n        height: \"$5\",\n      },\n      md: {\n        width: \"$7\",\n        height: \"$7\",\n      },\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\ntype SpinnerProps = {\n  size?: \"md\" | \"sm\";\n};\n\nconst Spinner: React.FC<SpinnerProps> = ({ size = \"md\" }) => {\n  return <StyledBox size={size} />;\n};\n\nexport default Spinner;"],"names":["keyframes","styled","Box"],"mappings":";;;;;;;;AAGA,MAAM,OAAOA,yBAAU,CAAA;AAAA,EACrB,IAAA,EAAM,EAAE,SAAA,EAAW,cAAe,EAAA;AAAA,EAClC,MAAA,EAAQ,EAAE,SAAA,EAAW,gBAAiB,EAAA;AACxC,CAAC,CAAA,CAAA;AAED,MAAM,SAAA,GAAYC,uBAAOC,OAAK,EAAA;AAAA,EAC5B,YAAc,EAAA,KAAA;AAAA,EACd,KAAO,EAAA,IAAA;AAAA,EACP,MAAQ,EAAA,IAAA;AAAA,EACR,WAAa,EAAA,OAAA;AAAA,EACb,WAAa,EAAA,KAAA;AAAA,EACb,iBAAmB,EAAA,aAAA;AAAA,EACnB,gBAAkB,EAAA,aAAA;AAAA,EAClB,cAAgB,EAAA,WAAA;AAAA,EAChB,eAAiB,EAAA,WAAA;AAAA,EACjB,iBAAmB,EAAA,OAAA;AAAA,EACnB,uBAAyB,EAAA,QAAA;AAAA,EACzB,uBAAyB,EAAA,UAAA;AAAA,EACzB,UAAY,EAAA,WAAA;AAAA,EACZ,aAAA,EAAe,GAAG,IAAI,CAAA,CAAA;AAAA,EACtB,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,EAAI,EAAA;AAAA,QACF,KAAO,EAAA,IAAA;AAAA,QACP,MAAQ,EAAA,IAAA;AAAA,OACV;AAAA,MACA,EAAI,EAAA;AAAA,QACF,KAAO,EAAA,IAAA;AAAA,QACP,MAAQ,EAAA,IAAA;AAAA,OACV;AAAA,KACF;AAAA,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,IAAA;AAAA,GACR;AACF,CAAC,CAAA,CAAA;AAMD,MAAM,OAAkC,GAAA,CAAC,EAAE,IAAA,GAAO,MAAW,KAAA;AAC3D,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,aAAU,IAAY,EAAA,CAAA,CAAA;AAChC;;;;"}
+{"version":3,"file":"spinner.js","sources":["../../../../src/commons/components/spinner.tsx"],"sourcesContent":["import React from 'react';\nimport { keyframes, Box, styled } from '@sparrowengg/twigs-react';\nimport { SIZE_VALUES, ARIA_LABELS, ATTRIBUTES, COMPONENT_DISPLAY_NAMES } from '../constants/strings';\n\n/**\n * Available spinner sizes\n */\nexport type SpinnerSize = 'sm' | 'md';\n\n/**\n * Props for the Spinner component\n */\nexport interface SpinnerProps {\n  /** Size variant of the spinner */\n  size?: SpinnerSize;\n  /** Optional: Additional CSS class name */\n  className?: string;\n  /** Optional: ARIA label for accessibility */\n  ariaLabel?: string;\n}\n\n/**\n * Keyframe animation for spinner rotation\n */\nconst spin = keyframes({\n  '0%': { transform: 'rotate(0deg)' },\n  '100%': { transform: 'rotate(360deg)' },\n});\n\n/**\n * Styled spinner component with size variants\n */\nconst StyledBox = styled(Box, {\n  borderRadius: '50%',\n  width: '$7',\n  height: '$7',\n  borderStyle: 'solid',\n  borderWidth: '$md',\n  borderBottomColor: '$neutral400',\n  borderRightColor: '$neutral400',\n  borderTopColor: '$black900',\n  borderLeftColor: '$black900',\n  animationDuration: '800ms',\n  animationTimingFunction: 'linear',\n  animationIterationCount: 'infinite',\n  willChange: 'transform',\n  animationName: `${spin}`,\n  variants: {\n    size: {\n      sm: {\n        width: '$5',\n        height: '$5',\n      },\n      md: {\n        width: '$7',\n        height: '$7',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\n/**\n * Spinner Component\n * \n * A loading spinner with customizable size.\n * Provides visual feedback during async operations.\n * \n * @example\n * ```tsx\n * <Spinner size=\"md\" ariaLabel=\"Loading content\" />\n * ```\n */\nconst Spinner: React.FC<SpinnerProps> = ({\n  size = SIZE_VALUES.MEDIUM,\n  className,\n  ariaLabel = ARIA_LABELS.LOADING,\n}) => {\n  return (\n    <StyledBox\n      size={size}\n      className={className}\n      role={ATTRIBUTES.STATUS}\n      aria-label={ariaLabel}\n    />\n  );\n};\n\nSpinner.displayName = COMPONENT_DISPLAY_NAMES.SPINNER;\n\nexport default Spinner;"],"names":["keyframes","styled","Box","SIZE_VALUES","ARIA_LABELS","ATTRIBUTES","COMPONENT_DISPLAY_NAMES"],"mappings":";;;;;;;;;AAwBA,MAAM,OAAOA,yBAAU,CAAA;AAAA,EACrB,IAAA,EAAM,EAAE,SAAA,EAAW,cAAe,EAAA;AAAA,EAClC,MAAA,EAAQ,EAAE,SAAA,EAAW,gBAAiB,EAAA;AACxC,CAAC,CAAA,CAAA;AAKD,MAAM,SAAA,GAAYC,uBAAOC,OAAK,EAAA;AAAA,EAC5B,YAAc,EAAA,KAAA;AAAA,EACd,KAAO,EAAA,IAAA;AAAA,EACP,MAAQ,EAAA,IAAA;AAAA,EACR,WAAa,EAAA,OAAA;AAAA,EACb,WAAa,EAAA,KAAA;AAAA,EACb,iBAAmB,EAAA,aAAA;AAAA,EACnB,gBAAkB,EAAA,aAAA;AAAA,EAClB,cAAgB,EAAA,WAAA;AAAA,EAChB,eAAiB,EAAA,WAAA;AAAA,EACjB,iBAAmB,EAAA,OAAA;AAAA,EACnB,uBAAyB,EAAA,QAAA;AAAA,EACzB,uBAAyB,EAAA,UAAA;AAAA,EACzB,UAAY,EAAA,WAAA;AAAA,EACZ,aAAA,EAAe,GAAG,IAAI,CAAA,CAAA;AAAA,EACtB,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,EAAI,EAAA;AAAA,QACF,KAAO,EAAA,IAAA;AAAA,QACP,MAAQ,EAAA,IAAA;AAAA,OACV;AAAA,MACA,EAAI,EAAA;AAAA,QACF,KAAO,EAAA,IAAA;AAAA,QACP,MAAQ,EAAA,IAAA;AAAA,OACV;AAAA,KACF;AAAA,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,IAAA;AAAA,GACR;AACF,CAAC,CAAA,CAAA;AAaD,MAAM,UAAkC,CAAC;AAAA,EACvC,OAAOC,mBAAY,CAAA,MAAA;AAAA,EACnB,SAAA;AAAA,EACA,YAAYC,mBAAY,CAAA,OAAA;AAC1B,CAAM,KAAA;AACJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAMC,kBAAW,CAAA,MAAA;AAAA,MACjB,YAAY,EAAA,SAAA;AAAA,KAAA;AAAA,GACd,CAAA;AAEJ,EAAA;AAEA,OAAA,CAAQ,cAAcC,+BAAwB,CAAA,OAAA;;;;"}