npm - @sparrowengg/integrations-templates-frontend - Versions diffs - 2.1.0-beta.1 → 2.1.0-beta.2 - Mend

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

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.

Files changed (212) hide show

package/dist/cjs/cascader-dropdown/cascader-dropdown-content.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 var index = require('../node_modules/@radix-ui/react-popover/dist/index.js');
-var popover = require('./popover/popover.js');
+var popover = require('../popover/popover.js');
 var React = require('react');
 var StyledItem = require('./styled/StyledItem.js');
 var useValue = require('./use-value.js');

package/dist/cjs/cascader-dropdown/cascader-dropdown-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cascader-dropdown-content.js","sources":["../../../src/cascader-dropdown/cascader-dropdown-content.tsx"],"sourcesContent":["import { Popover, PopoverProps } from '@radix-ui/react-popover';\nimport { PopoverContent, PopoverTrigger } from './popover';\nimport {\n Tooltip,\n TooltipProps,\n TooltipProvider,\n} from \"@sparrowengg/twigs-react\";\nimport React, { ComponentProps, ReactNode, useState } from \"react\";\nimport { prefixClassName } from \"./styled/StyledItem\";\nimport { Button } from \"@sparrowengg/twigs-react\";\nimport { useCascaderDropdownContext } from \"./use-value\";\nimport { CascaderDropdownNode } from \"./cascader-dropdown-node\";\nimport { CascaderDropdownList } from \"./cascader-dropdown-list\";\nimport { CascaderDropdownBreadcrumb } from \"./cascader-dropdown-breadcrumb\";\nimport { CascaderDropdownSearchInput } from \"./cascader-dropdown-search-input\";\nimport { CascaderDropdownSearchList } from \"./cascader-dropdown-search-list\";\nimport { optionTypes } from \"./helpers/cascader-dropdown-constants\";\nimport { DropdownContentProps } from \"./cascader-dropdown\";\n\nexport type ResultCacheType = Record<string, CascaderDropdownNode[]>;\n\nexport const CascaderDropdownContent = ({\n children,\n dropdownContentProps,\n tooltipProps,\n popoverTriggerButtonProps,\n popoverTriggerProps,\n ...props\n}: {\n children: ReactNode;\n dropdownContentProps?: DropdownContentProps;\n tooltipProps?: TooltipProps;\n popoverTriggerButtonProps?: Partial<ComponentProps<typeof Button>>;\n popoverTriggerProps?: Partial<ComponentProps<typeof PopoverTrigger>>;\n} & PopoverProps) => {\n const {\n popoverOpen,\n setPopoverOpen,\n id,\n selectedNode,\n focusNthColumn,\n focusPreviousColumn,\n foldersSelectionPath,\n rootNode,\n } = useCascaderDropdownContext();\n\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [resultCache, setResultCache] = useState<ResultCacheType>({});\n\n const [searchFocusedNode, setSearchFocusedNode] =\n useState<CascaderDropdownNode \| null>(null);\n\n const showValueSelector =\n selectedNode?.getType() === optionTypes.VALUE_SELECTOR;\n\n return (\n <>\n {tooltipProps?.content ? (\n <>\n <Popover open={popoverOpen} onOpenChange={setPopoverOpen} {...props}>\n <Tooltip {...tooltipProps}>\n <PopoverTrigger\n asChild\n className={prefixClassName(\"cascader-dropdown__trigger\")}\n {...popoverTriggerProps}\n >\n {children \|\| (\n <Button\n variant=\"ghost\"\n color=\"default\"\n className=\"twigs-editor-tool-button\"\n {...popoverTriggerButtonProps}\n >\n Select\n </Button>\n )}\n </PopoverTrigger>\n </Tooltip>\n <PopoverContent\n data-filter-popover-content={id}\n className={prefixClassName(\"cascader-dropdown\")}\n css={{\n padding: 0,\n border: \"0.5px solid $black300\",\n borderRadius: \"$xl\",\n minWidth: \"260px\",\n maxWidth: \"260px\",\n }}\n {...dropdownContentProps}\n >\n <TooltipProvider delayDuration={0}>\n <CascaderDropdownBreadcrumb\n focusNthColumn={focusNthColumn}\n focusPreviousColumn={focusPreviousColumn}\n foldersSelectionPath={\n foldersSelectionPath as { value: string; label: string }[]\n }\n />\n {!showValueSelector && rootNode.getChildren().length > 0 && (\n <CascaderDropdownSearchInput\n searchQuery={searchQuery}\n setSearchQuery={setSearchQuery}\n searchFocusedNode={searchFocusedNode}\n setSearchFocusedNode={setSearchFocusedNode}\n resultCache={resultCache}\n />\n )}\n {!searchQuery && <CascaderDropdownList />}\n {searchQuery && (\n <CascaderDropdownSearchList\n searchQuery={searchQuery}\n setSearchQuery={setSearchQuery}\n resultCache={resultCache}\n setResultCache={setResultCache}\n searchFocusedNode={searchFocusedNode}\n setSearchFocusedNode={setSearchFocusedNode}\n />\n )}\n </TooltipProvider>\n </PopoverContent>\n </Popover>\n </>\n ) : (\n <>\n <Popover open={popoverOpen} onOpenChange={setPopoverOpen} {...props}>\n <PopoverTrigger\n asChild\n className={prefixClassName(\"cascader-dropdown__trigger\")}\n {...popoverTriggerProps}\n >\n {children \|\| (\n <Button\n variant=\"ghost\"\n color=\"default\"\n className=\"twigs-editor-tool-button\"\n {...popoverTriggerButtonProps}\n >\n Select\n </Button>\n )}\n </PopoverTrigger>\n <PopoverContent\n data-filter-popover-content={id}\n className={prefixClassName(\"cascader-dropdown\")}\n css={{\n padding: 0,\n border: \"0.5px solid $black300\",\n borderRadius: \"$xl\",\n minWidth: \"260px\",\n maxWidth: \"260px\",\n }}\n {...dropdownContentProps}\n >\n <TooltipProvider delayDuration={0}>\n <CascaderDropdownBreadcrumb\n focusNthColumn={focusNthColumn}\n focusPreviousColumn={focusPreviousColumn}\n foldersSelectionPath={\n foldersSelectionPath as { value: string; label: string }[]\n }\n />\n {!showValueSelector && rootNode.getChildren().length > 0 && (\n <CascaderDropdownSearchInput\n searchQuery={searchQuery}\n setSearchQuery={setSearchQuery}\n searchFocusedNode={searchFocusedNode}\n setSearchFocusedNode={setSearchFocusedNode}\n resultCache={resultCache}\n />\n )}\n {!searchQuery && <CascaderDropdownList />}\n {searchQuery && (\n <CascaderDropdownSearchList\n searchQuery={searchQuery}\n setSearchQuery={setSearchQuery}\n resultCache={resultCache}\n setResultCache={setResultCache}\n searchFocusedNode={searchFocusedNode}\n setSearchFocusedNode={setSearchFocusedNode}\n />\n )}\n </TooltipProvider>\n </PopoverContent>\n </Popover>\n </>\n )}\n </>\n );\n};\n"],"names":["useCascaderDropdownContext","useState","optionTypes","Popover","Tooltip","PopoverTrigger","prefixClassName","Button","PopoverContent","TooltipProvider","CascaderDropdownBreadcrumb","CascaderDropdownSearchInput","CascaderDropdownList","CascaderDropdownSearchList"],"mappings":"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"}
1	+ {"version":3,"file":"cascader-dropdown-content.js","sources":["../../../src/cascader-dropdown/cascader-dropdown-content.tsx"],"sourcesContent":["import { Popover, PopoverProps } from '@radix-ui/react-popover';\nimport { PopoverContent, PopoverTrigger } from '../popover';\nimport {\n Tooltip,\n TooltipProps,\n TooltipProvider,\n} from \"@sparrowengg/twigs-react\";\nimport React, { ComponentProps, ReactNode, useState } from \"react\";\nimport { prefixClassName } from \"./styled/StyledItem\";\nimport { Button } from \"@sparrowengg/twigs-react\";\nimport { useCascaderDropdownContext } from \"./use-value\";\nimport { CascaderDropdownNode } from \"./cascader-dropdown-node\";\nimport { CascaderDropdownList } from \"./cascader-dropdown-list\";\nimport { CascaderDropdownBreadcrumb } from \"./cascader-dropdown-breadcrumb\";\nimport { CascaderDropdownSearchInput } from \"./cascader-dropdown-search-input\";\nimport { CascaderDropdownSearchList } from \"./cascader-dropdown-search-list\";\nimport { optionTypes } from \"./helpers/cascader-dropdown-constants\";\nimport { DropdownContentProps } from \"./cascader-dropdown\";\n\nexport type ResultCacheType = Record<string, CascaderDropdownNode[]>;\n\nexport const CascaderDropdownContent = ({\n children,\n dropdownContentProps,\n tooltipProps,\n popoverTriggerButtonProps,\n popoverTriggerProps,\n ...props\n}: {\n children: ReactNode;\n dropdownContentProps?: DropdownContentProps;\n tooltipProps?: TooltipProps;\n popoverTriggerButtonProps?: Partial<ComponentProps<typeof Button>>;\n popoverTriggerProps?: Partial<ComponentProps<typeof PopoverTrigger>>;\n} & PopoverProps) => {\n const {\n popoverOpen,\n setPopoverOpen,\n id,\n selectedNode,\n focusNthColumn,\n focusPreviousColumn,\n foldersSelectionPath,\n rootNode,\n } = useCascaderDropdownContext();\n\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [resultCache, setResultCache] = useState<ResultCacheType>({});\n\n const [searchFocusedNode, setSearchFocusedNode] =\n useState<CascaderDropdownNode \| null>(null);\n\n const showValueSelector =\n selectedNode?.getType() === optionTypes.VALUE_SELECTOR;\n\n return (\n <>\n {tooltipProps?.content ? (\n <>\n <Popover open={popoverOpen} onOpenChange={setPopoverOpen} {...props}>\n <Tooltip {...tooltipProps}>\n <PopoverTrigger\n asChild\n className={prefixClassName(\"cascader-dropdown__trigger\")}\n {...popoverTriggerProps}\n >\n {children \|\| (\n <Button\n variant=\"ghost\"\n color=\"default\"\n className=\"twigs-editor-tool-button\"\n {...popoverTriggerButtonProps}\n >\n Select\n </Button>\n )}\n </PopoverTrigger>\n </Tooltip>\n <PopoverContent\n data-filter-popover-content={id}\n className={prefixClassName(\"cascader-dropdown\")}\n css={{\n padding: 0,\n border: \"0.5px solid $black300\",\n borderRadius: \"$xl\",\n minWidth: \"260px\",\n maxWidth: \"260px\",\n }}\n {...dropdownContentProps}\n >\n <TooltipProvider delayDuration={0}>\n <CascaderDropdownBreadcrumb\n focusNthColumn={focusNthColumn}\n focusPreviousColumn={focusPreviousColumn}\n foldersSelectionPath={\n foldersSelectionPath as { value: string; label: string }[]\n }\n />\n {!showValueSelector && rootNode.getChildren().length > 0 && (\n <CascaderDropdownSearchInput\n searchQuery={searchQuery}\n setSearchQuery={setSearchQuery}\n searchFocusedNode={searchFocusedNode}\n setSearchFocusedNode={setSearchFocusedNode}\n resultCache={resultCache}\n />\n )}\n {!searchQuery && <CascaderDropdownList />}\n {searchQuery && (\n <CascaderDropdownSearchList\n searchQuery={searchQuery}\n setSearchQuery={setSearchQuery}\n resultCache={resultCache}\n setResultCache={setResultCache}\n searchFocusedNode={searchFocusedNode}\n setSearchFocusedNode={setSearchFocusedNode}\n />\n )}\n </TooltipProvider>\n </PopoverContent>\n </Popover>\n </>\n ) : (\n <>\n <Popover open={popoverOpen} onOpenChange={setPopoverOpen} {...props}>\n <PopoverTrigger\n asChild\n className={prefixClassName(\"cascader-dropdown__trigger\")}\n {...popoverTriggerProps}\n >\n {children \|\| (\n <Button\n variant=\"ghost\"\n color=\"default\"\n className=\"twigs-editor-tool-button\"\n {...popoverTriggerButtonProps}\n >\n Select\n </Button>\n )}\n </PopoverTrigger>\n <PopoverContent\n data-filter-popover-content={id}\n className={prefixClassName(\"cascader-dropdown\")}\n css={{\n padding: 0,\n border: \"0.5px solid $black300\",\n borderRadius: \"$xl\",\n minWidth: \"260px\",\n maxWidth: \"260px\",\n }}\n {...dropdownContentProps}\n >\n <TooltipProvider delayDuration={0}>\n <CascaderDropdownBreadcrumb\n focusNthColumn={focusNthColumn}\n focusPreviousColumn={focusPreviousColumn}\n foldersSelectionPath={\n foldersSelectionPath as { value: string; label: string }[]\n }\n />\n {!showValueSelector && rootNode.getChildren().length > 0 && (\n <CascaderDropdownSearchInput\n searchQuery={searchQuery}\n setSearchQuery={setSearchQuery}\n searchFocusedNode={searchFocusedNode}\n setSearchFocusedNode={setSearchFocusedNode}\n resultCache={resultCache}\n />\n )}\n {!searchQuery && <CascaderDropdownList />}\n {searchQuery && (\n <CascaderDropdownSearchList\n searchQuery={searchQuery}\n setSearchQuery={setSearchQuery}\n resultCache={resultCache}\n setResultCache={setResultCache}\n searchFocusedNode={searchFocusedNode}\n setSearchFocusedNode={setSearchFocusedNode}\n />\n )}\n </TooltipProvider>\n </PopoverContent>\n </Popover>\n </>\n )}\n </>\n );\n};\n"],"names":["useCascaderDropdownContext","useState","optionTypes","Popover","Tooltip","PopoverTrigger","prefixClassName","Button","PopoverContent","TooltipProvider","CascaderDropdownBreadcrumb","CascaderDropdownSearchInput","CascaderDropdownList","CascaderDropdownSearchList"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBa,MAAA,uBAAA,GAA0B,CAAC,EAanB,KAAA;AAbmB,EACtC,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,oBAAA;AAAA,IACA,YAAA;AAAA,IACA,yBAAA;AAAA,IACA,mBAAA;AAAA,GA1BF,GAqBwC,EAMnC,EAAA,KAAA,GAAA,SAAA,CANmC,EAMnC,EAAA;AAAA,IALH,UAAA;AAAA,IACA,sBAAA;AAAA,IACA,cAAA;AAAA,IACA,2BAAA;AAAA,IACA,qBAAA;AAAA,GAAA,CAAA,CAAA;AASA,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,cAAA;AAAA,IACA,EAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,mBAAA;AAAA,IACA,oBAAA;AAAA,IACA,QAAA;AAAA,MACEA,mCAA2B,EAAA,CAAA;AAE/B,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIC,eAAS,EAAE,CAAA,CAAA;AACjD,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAA,cAAA,CAA0B,EAAE,CAAA,CAAA;AAElE,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAC5CA,eAAsC,IAAI,CAAA,CAAA;AAE5C,EAAM,MAAA,iBAAA,GAAA,CACJ,YAAc,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,OAAA,EAAA,MAAcC,qCAAY,CAAA,cAAA,CAAA;AAE1C,EAAA,uBAEK,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,CAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAc,OACb,oBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACG,KAAA,CAAA,aAAA,CAAAC,aAAA,EAAA,cAAA,CAAA,EAAQ,IAAM,EAAA,WAAA,EAAa,YAAc,EAAA,cAAA,EAAA,EAAoB,KAC5D,CAAA,kBAAA,KAAA,CAAA,aAAA,CAACC,oCAAY,YACX,CAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,sBAAA;AAAA,IAAA,cAAA,CAAA;AAAA,MACC,OAAO,EAAA,IAAA;AAAA,MACP,SAAA,EAAWC,2BAAgB,4BAA4B,CAAA;AAAA,KACnD,EAAA,mBAAA,CAAA;AAAA,IAEH,QACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAACC,aAAA;AAAA,MAAA,cAAA,CAAA;AAAA,QACC,OAAQ,EAAA,OAAA;AAAA,QACR,KAAM,EAAA,SAAA;AAAA,QACN,SAAU,EAAA,0BAAA;AAAA,OACN,EAAA,yBAAA,CAAA;AAAA,MACL,QAAA;AAAA,KAED;AAAA,GAGN,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,sBAAA;AAAA,IAAA,cAAA,CAAA;AAAA,MACC,6BAA6B,EAAA,EAAA;AAAA,MAC7B,SAAA,EAAWF,2BAAgB,mBAAmB,CAAA;AAAA,MAC9C,GAAK,EAAA;AAAA,QACH,OAAS,EAAA,CAAA;AAAA,QACT,MAAQ,EAAA,uBAAA;AAAA,QACR,YAAc,EAAA,KAAA;AAAA,QACd,QAAU,EAAA,OAAA;AAAA,QACV,QAAU,EAAA,OAAA;AAAA,OACZ;AAAA,KACI,EAAA,oBAAA,CAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA,CAACG,uBAAgB,EAAA,EAAA,aAAA,EAAe,CAC9B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAACC,qDAAA;AAAA,MAAA;AAAA,QACC,cAAA;AAAA,QACA,mBAAA;AAAA,QACA,oBAAA;AAAA,OAAA;AAAA,OAID,CAAC,iBAAA,IAAqB,SAAS,WAAY,EAAA,CAAE,SAAS,CACrD,oBAAA,KAAA,CAAA,aAAA;AAAA,MAACC,uDAAA;AAAA,MAAA;AAAA,QACC,WAAA;AAAA,QACA,cAAA;AAAA,QACA,iBAAA;AAAA,QACA,oBAAA;AAAA,QACA,WAAA;AAAA,OAAA;AAAA,OAGH,CAAC,WAAA,oBAAgB,KAAA,CAAA,aAAA,CAAAC,yCAAA,EAAA,IAAqB,GACtC,WACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAACC,qDAAA;AAAA,MAAA;AAAA,QACC,WAAA;AAAA,QACA,cAAA;AAAA,QACA,WAAA;AAAA,QACA,cAAA;AAAA,QACA,iBAAA;AAAA,QACA,oBAAA;AAAA,OAAA;AAAA,KAGN,CAAA;AAAA,GAEJ,CACF,CAAA,mBAGE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAACV,gCAAQ,IAAM,EAAA,WAAA,EAAa,YAAc,EAAA,cAAA,EAAA,EAAoB,KAC5D,CAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACE,sBAAA;AAAA,IAAA,cAAA,CAAA;AAAA,MACC,OAAO,EAAA,IAAA;AAAA,MACP,SAAA,EAAWC,2BAAgB,4BAA4B,CAAA;AAAA,KACnD,EAAA,mBAAA,CAAA;AAAA,IAEH,QACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAACC,aAAA;AAAA,MAAA,cAAA,CAAA;AAAA,QACC,OAAQ,EAAA,OAAA;AAAA,QACR,KAAM,EAAA,SAAA;AAAA,QACN,SAAU,EAAA,0BAAA;AAAA,OACN,EAAA,yBAAA,CAAA;AAAA,MACL,QAAA;AAAA,KAED;AAAA,GAGJ,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,sBAAA;AAAA,IAAA,cAAA,CAAA;AAAA,MACC,6BAA6B,EAAA,EAAA;AAAA,MAC7B,SAAA,EAAWF,2BAAgB,mBAAmB,CAAA;AAAA,MAC9C,GAAK,EAAA;AAAA,QACH,OAAS,EAAA,CAAA;AAAA,QACT,MAAQ,EAAA,uBAAA;AAAA,QACR,YAAc,EAAA,KAAA;AAAA,QACd,QAAU,EAAA,OAAA;AAAA,QACV,QAAU,EAAA,OAAA;AAAA,OACZ;AAAA,KACI,EAAA,oBAAA,CAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA,CAACG,uBAAgB,EAAA,EAAA,aAAA,EAAe,CAC9B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAACC,qDAAA;AAAA,MAAA;AAAA,QACC,cAAA;AAAA,QACA,mBAAA;AAAA,QACA,oBAAA;AAAA,OAAA;AAAA,OAID,CAAC,iBAAA,IAAqB,SAAS,WAAY,EAAA,CAAE,SAAS,CACrD,oBAAA,KAAA,CAAA,aAAA;AAAA,MAACC,uDAAA;AAAA,MAAA;AAAA,QACC,WAAA;AAAA,QACA,cAAA;AAAA,QACA,iBAAA;AAAA,QACA,oBAAA;AAAA,QACA,WAAA;AAAA,OAAA;AAAA,OAGH,CAAC,WAAA,oBAAgB,KAAA,CAAA,aAAA,CAAAC,yCAAA,EAAA,IAAqB,GACtC,WACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAACC,qDAAA;AAAA,MAAA;AAAA,QACC,WAAA;AAAA,QACA,cAAA;AAAA,QACA,WAAA;AAAA,QACA,cAAA;AAAA,QACA,iBAAA;AAAA,QACA,oBAAA;AAAA,OAAA;AAAA,KAGN,CAAA;AAAA,GAEJ,CACF,CAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/cjs/commons/components/NamingModal.js CHANGED Viewed

@@ -3,7 +3,6 @@
 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 formInput = require('../../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js');
@@ -12,33 +11,16 @@ var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.j
 var iconButton = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js');
 var close = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/close.js');
-const DEFAULT_CONFIG = {
-  title: strings.MODAL_TITLES.MAPPING_NAME,
-  placeholder: strings.PLACEHOLDERS.ENTER_NAME_FOR_FUTURE_REFERENCE,
-  maxLength: strings.NUMERIC_CONSTANTS.MAX_LENGTH_DEFAULT,
-  saveButtonText: strings.BUTTON_TEXT.SAVE_MAPPING,
-  updateButtonText: strings.BUTTON_TEXT.UPDATE_MAPPING
-};
-const NamingModal = ({
+function NamingModal({
   editFieldId,
-  isLoading = false,
-  onSave,
-  onClose,
+  mappingLoader = false,
+  saveHandler,
+  closeHandler,
   value,
-  onValueChange,
-  isOpen,
-  maxLength = DEFAULT_CONFIG.maxLength,
-  placeholder = DEFAULT_CONFIG.placeholder
-}) => {
-  const handleInputChange = React.useCallback(
-    (event) => {
-      onValueChange(event.target.value);
-    },
-    [onValueChange]
-  );
-  const buttonText = editFieldId ? DEFAULT_CONFIG.updateButtonText : DEFAULT_CONFIG.saveButtonText;
-  const isSaveDisabled = !value.trim() || isLoading;
-  return /* @__PURE__ */ React.createElement(dialog.Dialog, { open: isOpen, size: strings.SIZE_VALUES.SMALL }, /* @__PURE__ */ React.createElement(dialog.DialogContent, null, /* @__PURE__ */ React.createElement(
+  setValue,
+  isOpen
+}) {
+  return /* @__PURE__ */ React.createElement(dialog.Dialog, { open: isOpen, size: "sm" }, /* @__PURE__ */ React.createElement(dialog.DialogContent, null, /* @__PURE__ */ React.createElement(
     dialog.DialogHeader,
     {
       css: {
@@ -49,29 +31,22 @@ const NamingModal = ({
         borderBottom: "none !important"
       }
     },
-    /* @__PURE__ */ React.createElement(dialog.DialogTitle, { size: strings.SIZE_VALUES.LARGE }, DEFAULT_CONFIG.title)
-  ), /* @__PURE__ */ React.createElement(
-    dialog.DialogBody,
+    /* @__PURE__ */ React.createElement(dialog.DialogTitle, { size: "lg" }, "Mapping Name")
+  ), /* @__PURE__ */ React.createElement(dialog.DialogBody, { css: {
+    paddingInline: "$12",
+    paddingTop: "0 !important",
+    paddingBottom: "$8"
+  } }, /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$2", css: { marginBottom: "$2" } }, /* @__PURE__ */ React.createElement(
+    formInput.FormInput,
     {
-      css: {
-        paddingInline: "$12",
-        paddingTop: "0 !important",
-        paddingBottom: "$8"
-      }
-    },
-    /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$2", css: { marginBottom: "$2" } }, /* @__PURE__ */ React.createElement(
-      formInput.FormInput,
-      {
-        size: strings.SIZE_VALUES.LARGE,
-        id: "mappingName",
-        value,
-        onChange: handleInputChange,
-        maxLength,
-        placeholder,
-        autoFocus: true
-      }
-    ))
-  ), /* @__PURE__ */ React.createElement(dialog.DialogFooter, null, /* @__PURE__ */ React.createElement(
+      size: "lg",
+      id: "name",
+      value,
+      onChange: (e) => setValue(e.target.value),
+      maxLength: 50,
+      placeholder: "Enter a name for future reference"
+    }
+  ))), /* @__PURE__ */ React.createElement(dialog.DialogFooter, null, /* @__PURE__ */ React.createElement(
     flex.Flex,
     {
       css: {
@@ -81,30 +56,27 @@ const NamingModal = ({
     /* @__PURE__ */ React.createElement(
       button.Button,
       {
-        loading: isLoading,
-        size: strings.SIZE_VALUES.LARGE,
-        color: strings.COLORS.PRIMARY,
+        loading: mappingLoader,
+        size: "lg",
+        color: "primary",
         css: {
           width: "100%"
         },
-        onClick: onSave,
-        disabled: isSaveDisabled
+        onClick: saveHandler
       },
-      buttonText
+      editFieldId ? "Update Mapping" : "Save Mapping"
     )
-  )), /* @__PURE__ */ React.createElement(box.Box, { css: { position: "absolute", top: "$8", right: "$8" } }, /* @__PURE__ */ React.createElement(dialog.DialogClose, { asChild: true, onClick: onClose }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(box.Box, { css: { position: "absolute", top: "$8", right: "$8" } }, /* @__PURE__ */ React.createElement(dialog.DialogClose, { asChild: true, onClick: closeHandler }, /* @__PURE__ */ React.createElement(
     iconButton.IconButton,
     {
-      size: strings.SIZE_VALUES.LARGE,
+      size: "lg",
       icon: /* @__PURE__ */ React.createElement(close.CloseIcon, null),
-      variant: strings.VARIANTS.GHOST,
-      "aria-label": strings.ARIA_LABELS.CLOSE_MODAL,
-      color: strings.COLORS.DEFAULT,
-      disabled: isLoading
+      variant: "ghost",
+      "aria-label": "Close",
+      color: "default"
     }
   )))));
-};
-NamingModal.displayName = strings.COMPONENT_DISPLAY_NAMES.NAMING_MODAL;
+}
 exports.default = NamingModal;
 //# sourceMappingURL=NamingModal.js.map

package/dist/cjs/commons/components/NamingModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NamingModal.js","sources":["../../../../src/commons/components/NamingModal.tsx"],"sourcesContent":["import React, ~~{ useCallback, ChangeEvent }~~ from 'react';\nimport {\n Dialog,\n DialogHeader,\n DialogTitle,\n DialogBody,\n DialogFooter,\n DialogClose,\n DialogContent,\n IconButton,\n Box,\n Button,\n Flex,\n FormInput,\n} from '@sparrowengg/twigs-react';\nimport { CloseIcon } from '@sparrowengg/twigs-react-icons';\~~nimport~~ {\n ~~MODAL_TITLES~~,\n ~~PLACEHOLDERS~~,\n ~~BUTTON_TEXT~~,\n ~~NUMERIC_CONSTANTS~~,\n ~~SIZE_VALUES~~,\n ~~COLORS~~,\n ~~VARIANTS~~,\n ~~ARIA_LABELS,\n COMPONENT_DISPLAY_NAMES,\n~~} ~~from '../constants/strings';\n\n/*\n Props for the NamingModal component\n /\nexport interface NamingModalProps~~ {\n ~~/* ID of the mapping being edited (undefined for new mappings) /\n~~ editFieldId?: string \| number;\n /* ~~Whether~~ ~~the save operation is in progress /\~~n ~~isLoading~~?: boolean;\n ~~/* Callback invoked when save button is clicked /\n onSave~~: () => void;\n ~~/* Callback invoked when modal is closed /\n onClose~~: () => void;\n ~~/* Current~~ value ~~of the mapping name input /\n value~~: string;\n ~~/* Callback to update the mapping name value /\n onValueChange~~: (value: string) => void;\n ~~/* Whether the modal is open /\n~~ isOpen: boolean;\n ~~/* Optional: Maximum character length for input (defaults to 50) /\n maxLength?: number;\n /* Optional: Custom placeholder text /\n placeholder?: string;\n~~}\n\n/\n Default configuration for the naming modal\n /\nconst DEFAULT_CONFIG = {\n title: MODAL_TITLES.MAPPING_NAME,\n placeholder: PLACEHOLDERS.ENTER_NAME_FOR_FUTURE_REFERENCE,\n maxLength: NUMERIC_CONSTANTS.MAX_LENGTH_DEFAULT,\n saveButtonText: BUTTON_TEXT.SAVE_MAPPING,\n updateButtonText: BUTTON_TEXT.UPDATE_MAPPING,\n} as const;\n\n/\n NamingModal Component\n * \n * A modal dialog for naming or renaming mapping configurations.\n * Supports both create and edit modes with validation and loading states.\n * \n * @example\n * ```tsx\n * <NamingModal\n * isOpen={isModalOpen}\n * value={mappingName}\n * onValueChange={setMappingName}\n * onSave={handleSave}\n * onClose={handleClose}\n * editFieldId={existingMappingId}\n * />\n * ```\n */\nconst NamingModal: React.FC<NamingModalProps> = ({\n editFieldId,\n isLoading = false,\n onSave,\n onClose,\n value,\n onValueChange,\n isOpen,\n maxLength = DEFAULT_CONFIG.maxLength,\n placeholder = DEFAULT_CONFIG.placeholder,\n}) => {\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n onValueChange(event.target.value);\n },\n [onValueChange]\n );\n\n const buttonText = editFieldId\n ? DEFAULT_CONFIG.updateButtonText\n : DEFAULT_CONFIG.saveButtonText;\n\n const isSaveDisabled = !value.trim() \|\| isLoading;\n\n return (\n <Dialog open={isOpen} size~~={SIZE_VALUES.SMALL}~~>\n <DialogContent>\n <DialogHeader\n css={{\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'center',\n borderBottom: 'none !important',\n }}\n >\n <DialogTitle size~~={SIZE_VALUES.LARGE}~~>~~{DEFAULT_CONFIG.title}~~</DialogTitle>\n </DialogHeader>\n\n <DialogBody\n css={{\n paddingInline: '$12',\n paddingTop: '0 !important',\n paddingBottom: '$8',\n }}\n >\n <Flex flexDirection=\"column\" gap=\"$2\" css={{ marginBottom: '$2' }}>\n <FormInput\n size~~={SIZE_VALUES.LARGE}~~\n id=\"~~mappingName~~\"\n value={value}\n onChange={~~handleInputChange~~}\n maxLength={~~maxLength~~}\n placeholder~~={placeholder}~~\~~n autoFocus~~\n />\n </Flex>\n </DialogBody>\n\n <DialogFooter>\n <Flex\n css={{\n width: '100%',\n }}\n >\n <Button\n loading={~~isLoading~~}\n size~~={SIZE_VALUES.LARGE}~~\n color~~={COLORS.PRIMARY}~~\n css={{\n width: '100%',\n }}\n onClick={~~onSave~~}\n ~~disabled={isSaveDisabled}\n~~ >\n {~~buttonText~~}\n </Button>\n </Flex>\n </DialogFooter>\n\n <Box css={{ position: 'absolute', top: '$8', right: '$8' }}>\n <DialogClose asChild onClick={~~onClose~~}>\n <IconButton\n size~~={SIZE_VALUES.LARGE}~~\n icon={<CloseIcon />}\n variant~~={VARIANTS.GHOST}~~\n aria-label~~={ARIA_LABELS.CLOSE_MODAL}~~\n color~~={COLORS.DEFAULT}~~\~~n disabled={isLoading}~~\n />\n </DialogClose>\n </Box>\n </DialogContent>\n </Dialog>\n );\n}~~;\n~~\~~nNamingModal.displayName = COMPONENT_DISPLAY_NAMES.NAMING_MODAL;\~~n~~\nexport default NamingModal;\n~~"],"names":["~~MODAL_TITLES","PLACEHOLDERS","NUMERIC_CONSTANTS","BUTTON_TEXT","useCallback","~~Dialog","~~SIZE_VALUES","~~DialogContent","DialogHeader","DialogTitle","DialogBody","Flex","FormInput","DialogFooter","Button","~~COLORS","~~Box","DialogClose","IconButton","CloseIcon"~~,"VARIANTS","ARIA_LABELS","COMPONENT_DISPLAY_NAMES"~~],"mappings":"~~;;;;;;;;;;;;;;AAuDA~~,~~MAAM~~,~~cAAiB~~,~~GAAA;AAAA,EACrB,OAAOA,oBAAa,~~CAAA~~,YAAA~~;AAAA,~~EACpB~~,~~aAAaC,oBAAa,CAAA,+BAAA;AAAA,EAC1B,WAAWC,yBAAkB,CAAA,kBAAA;AAAA,EAC7B,gBAAgBC,mBAAY,CAAA,YAAA;AAAA,EAC5B,kBAAkBA,mBAAY,CAAA,cAAA;AAChC,CAAA,CAAA;AAoBA,MAAM,cAA0C,CAAC;AAAA,EAC/C,~~WAAA;AAAA,EACA,~~SAAY~~,GAAA,KAAA;AAAA,~~EACZ~~,~~MAAA~~;AAAA,EACA,~~OAAA~~;AAAA,EACA,KAAA;AAAA,EACA,~~aAAA~~;AAAA,EACA,MAAA;~~AAAA~~,~~EACA~~,~~YAAY,cAAe,CAAA,SAAA~~;~~AAAA~~,~~EAC3B,cAAc,cAAe,CAAA,WAAA;AAC/B,CAAM,KAAA;AACJ,~~EAAA,~~MAAM~~,~~iBAAoB~~,~~GAAAC,iBAAA;AAAA,IACxB,CAAC,KAAyC,KAAA;AACxC,MAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,KAClC;AAAA,IACA,CAAC,aAAa,CAAA;AAAA,GAChB,CAAA;AAEA,~~EAAA,~~MAAM,UAAa,GAAA,WAAA,GACf,cAAe,CAAA,gBAAA,GACf,cAAe,CAAA,cAAA,CAAA;AAEnB,~~EAAA,~~MAAM,cAAiB,GAAA,CAAC,KAAM,CAAA,~~IAAA,~~EAAU~~,~~IAAA~~,~~SAAA~~,~~CAAA;AAExC,EACE,uBAAA,KAAA,CAAA,aAAA,CAACC,iBAAO,IAAM,~~EAAA,~~MAAA~~,~~EAAQ,MAAMC,mBAAY,CAAA,KAAA,~~EAAA,~~sCACrCC~~,oBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,UAAY,EAAA,YAAA;AAAA,QACZ,cAAgB,EAAA,QAAA;AAAA,QAChB,YAAc,EAAA,iBAAA;AAAA,OAChB;AAAA,KAAA;AAAA,~~wCAECC~~,~~kBAAY~~,~~EAAA~~,~~EAAA~~,~~IAAA~~,~~EAAMH~~,~~mBAAY~~,~~CAAA~~,~~KAAA~~,EAAA,~~EAAQ~~,~~eAAe~~,~~KAAM~~,CAAA;AAAA,~~GAG9D~~,~~kBAAA~~,KAAA,CAAA,aAAA~~;AAAA~~,~~IAACI~~,iBAAA~~;AAAA~~,~~IAAA;AAAA~~,~~MACC~~,GAAK,EAAA;AAAA,~~QACH~~,aAAe,EAAA,KAAA;AAAA,~~QACf~~,UAAY,EAAA,cAAA;AAAA,~~QACZ~~,aAAe,EAAA,IAAA;AAAA,~~OACjB;AAAA~~,~~KAAA;AAAA~~,~~oBAEA~~,KAAA,CAAA,aAAA,~~CAACC~~,~~SAAK~~,EAAA,EAAA,~~aAAA~~,~~EAAc~~,~~QAAS~~,EAAA,~~GAAA~~,~~EAAI~~,~~MAAK,~~GAAK,EAAA,EAAE,YAAc,EAAA,IAAA,EACzD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,~~MAACC~~,mBAAA;AAAA,~~MAAA~~;AAAA,~~QACC~~,~~MAAMN~~,~~mBAAY~~,~~CAAA,KAAA~~;AAAA,~~QAClB~~,EAAG,EAAA,~~aAAA~~;AAAA,~~QACH~~,KAAA;AAAA,~~QACA~~,~~QAAU~~,~~EAAA~~,~~iBAAA;AAAA~~,~~QACV~~,~~SAAA~~;AAAA,~~QACA~~,~~WAAA~~;AAAA,~~QACA~~,~~SAAS~~,EAAA,~~IAAA~~;AAAA,~~OAAA~~;AAAA,~~KAEb~~,CAAA~~;AAAA~~,~~GACF~~,~~sCAECO~~,mBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACF,SAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,KAAO,EAAA,MAAA;AAAA,OACT;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACG,aAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,~~SAAA~~;AAAA,QACT,~~MAAMR~~,~~mBAAY~~,~~CAAA,KAAA~~;AAAA,~~QAClB~~,~~OAAOS~~,~~cAAO~~,~~CAAA,OAAA~~;AAAA,~~QACd~~,GAAK,EAAA;AAAA,UACH,KAAO,EAAA,MAAA;AAAA,SACT;AAAA,QACA,OAAS,EAAA,~~MAAA~~;AAAA,~~QACT~~,~~QAAU~~,~~EAAA~~,~~cAAA;AAAA~~,~~OAAA;AAAA~~,~~MAET,UAAA~~;AAAA,~~KACH~~;AAAA,GAEJ,~~CAEA~~,kBAAA,KAAA,CAAA,aAAA,CAACC,WAAI,GAAK,EAAA,EAAE,UAAU,UAAY,EAAA,GAAA,EAAK,IAAM,EAAA,KAAA,EAAO,MAClD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAACC,sBAAY,OAAO,EAAA,IAAA,EAAC,SAAS,~~OAC5B~~,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACC,~~MAAMZ~~,~~mBAAY~~,~~CAAA,KAAA~~;AAAA,~~MAClB~~,IAAA,~~sCAAOa~~,eAAU,EAAA,IAAA,CAAA;AAAA,MACjB,~~SAASC~~,~~gBAAS~~,~~CAAA,KAAA~~;AAAA,~~MAClB~~,~~cAAYC~~,~~mBAAY~~,~~CAAA,WAAA;AAAA,MACxB,OAAON,cAAO,CAAA,~~OAAA;AAAA,~~MACd~~,~~QAAU~~,EAAA,SAAA;AAAA,KAAA;AAAA,~~GAEd~~,CACF,CACF,CACF,CAAA,CAAA;AAEJ~~,EAAA;AAEA,WAAA,CAAY,cAAcO,+BAAwB,CAAA,YAAA~~;;;;"}
1	+ {"version":3,"file":"NamingModal.js","sources":["../../../../src/commons/components/NamingModal.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Dialog,\n DialogHeader,\n DialogTitle,\n DialogBody,\n DialogFooter,\n DialogClose,\n DialogTrigger,\n DialogContent,\n IconButton,\n Box,\n Button,\n Flex,\n FormInput,\n} from \"@sparrowengg/twigs-react\";\nimport { CloseIcon } from \"@sparrowengg/twigs-react-icons\";\n\nexport default function NamingModal({\n editFieldId,\n mappingLoader = false,\n saveHandler,\n closeHandler,\n value,\n setValue,\n isOpen,\n}: {\n editFieldId: string \| number \| undefined;\n mappingLoader?: boolean;\n saveHandler: () => void;\n closeHandler: () => void;\n value: string;\n setValue: (value: string) => void;\n isOpen: boolean;\n}) {\n return (\n <Dialog open={isOpen} size=\"sm\">\n <DialogContent>\n <DialogHeader\n css={{\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n justifyContent: \"center\",\n borderBottom: \"none !important\",\n }}\n >\n <DialogTitle size=\"lg\">Mapping Name</DialogTitle>\n </DialogHeader>\n <DialogBody css={{\n paddingInline: '$12',\n paddingTop: '0 !important',\n paddingBottom: '$8',\n }}>\n <Flex flexDirection=\"column\" gap=\"$2\" css={{ marginBottom: \"$2\" }}>\n <FormInput\n size=\"lg\"\n id=\"name\"\n value={value}\n onChange={(e) => setValue(e.target.value)}\n maxLength={50}\n placeholder=\"Enter a name for future reference\"\n />\n </Flex>\n </DialogBody>\n <DialogFooter>\n <Flex\n css={{\n width: \"100%\",\n }}\n >\n <Button\n loading={mappingLoader}\n size=\"lg\"\n color=\"primary\"\n css={{\n width: \"100%\",\n }}\n onClick={saveHandler}\n >\n {editFieldId ? \"Update Mapping\" : \"Save Mapping\"}\n </Button>\n </Flex>\n </DialogFooter>\n <Box css={{ position: \"absolute\", top: \"$8\", right: \"$8\" }}>\n <DialogClose asChild onClick={closeHandler}>\n <IconButton\n size=\"lg\"\n icon={<CloseIcon />}\n variant=\"ghost\"\n aria-label=\"Close\"\n color=\"default\"\n />\n </DialogClose>\n </Box>\n </DialogContent>\n </Dialog>\n );\n}\n"],"names":["Dialog","DialogContent","DialogHeader","DialogTitle","DialogBody","Flex","FormInput","DialogFooter","Button","Box","DialogClose","IconButton","CloseIcon"],"mappings":";;;;;;;;;;;;;AAkBA,SAAwB,WAAY,CAAA;AAAA,EAClC,WAAA;AAAA,EACA,aAAgB,GAAA,KAAA;AAAA,EAChB,WAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AACF,CAQG,EAAA;AACD,EAAA,2CACGA,aAAO,EAAA,EAAA,IAAA,EAAM,QAAQ,IAAK,EAAA,IAAA,EAAA,sCACxBC,oBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,UAAY,EAAA,YAAA;AAAA,QACZ,cAAgB,EAAA,QAAA;AAAA,QAChB,YAAc,EAAA,iBAAA;AAAA,OAChB;AAAA,KAAA;AAAA,oBAEC,KAAA,CAAA,aAAA,CAAAC,kBAAA,EAAA,EAAY,IAAK,EAAA,IAAA,EAAA,EAAK,cAAY,CAAA;AAAA,GACrC,kBACC,KAAA,CAAA,aAAA,CAAAC,iBAAA,EAAA,EAAW,GAAK,EAAA;AAAA,IACb,aAAe,EAAA,KAAA;AAAA,IACf,UAAY,EAAA,cAAA;AAAA,IACZ,aAAe,EAAA,IAAA;AAAA,GACnB,EAAA,kBACG,KAAA,CAAA,aAAA,CAAAC,SAAA,EAAA,EAAK,aAAc,EAAA,QAAA,EAAS,GAAI,EAAA,IAAA,EAAK,GAAK,EAAA,EAAE,YAAc,EAAA,IAAA,EACzD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,IAAA;AAAA,MACL,EAAG,EAAA,MAAA;AAAA,MACH,KAAA;AAAA,MACA,UAAU,CAAC,CAAA,KAAM,QAAS,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,MACxC,SAAW,EAAA,EAAA;AAAA,MACX,WAAY,EAAA,mCAAA;AAAA,KAAA;AAAA,GAEhB,CACF,CACA,kBAAA,KAAA,CAAA,aAAA,CAACC,mBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACF,SAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,KAAO,EAAA,MAAA;AAAA,OACT;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACG,aAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,aAAA;AAAA,QACT,IAAK,EAAA,IAAA;AAAA,QACL,KAAM,EAAA,SAAA;AAAA,QACN,GAAK,EAAA;AAAA,UACH,KAAO,EAAA,MAAA;AAAA,SACT;AAAA,QACA,OAAS,EAAA,WAAA;AAAA,OAAA;AAAA,MAER,cAAc,gBAAmB,GAAA,cAAA;AAAA,KACpC;AAAA,GAEJ,CACA,kBAAA,KAAA,CAAA,aAAA,CAACC,WAAI,GAAK,EAAA,EAAE,UAAU,UAAY,EAAA,GAAA,EAAK,IAAM,EAAA,KAAA,EAAO,MAClD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAACC,sBAAY,OAAO,EAAA,IAAA,EAAC,SAAS,YAC5B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,IAAA;AAAA,MACL,IAAA,sCAAOC,eAAU,EAAA,IAAA,CAAA;AAAA,MACjB,OAAQ,EAAA,OAAA;AAAA,MACR,YAAW,EAAA,OAAA;AAAA,MACX,KAAM,EAAA,SAAA;AAAA,KAAA;AAAA,GAEV,CACF,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/cjs/commons/components/confirmation-modal.js CHANGED Viewed

@@ -3,35 +3,24 @@
 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 ConfirmationModal = ({
-  title,
+  name,
   description,
   onConfirm,
-  onCancel,
-  confirmText = strings.BUTTON_TEXT.CONFIRM,
-  cancelText = strings.BUTTON_TEXT.CANCEL,
-  showErrorState = false
+  onCancel
 }) => {
-  const [isConfirmHover, setIsConfirmHover] = React.useState(false);
-  const handleMouseEnter = React.useCallback(() => {
-    setIsConfirmHover(true);
-  }, []);
-  const handleMouseLeave = React.useCallback(() => {
-    setIsConfirmHover(false);
-  }, []);
-  const confirmButtonColor = showErrorState && isConfirmHover ? strings.COLORS.ERROR : strings.COLORS.DEFAULT;
+  const [isDeleteIconHover, setIsDeleteIconHover] = React.useState(false);
   return /* @__PURE__ */ React.createElement(alertDialog.AlertDialog, { open: true }, /* @__PURE__ */ React.createElement(
     alertDialog.AlertDialogContent,
     {
       onOpenAutoFocus: (e) => e.preventDefault(),
-      className: strings.CSS_CLASS_NAMES.DM_SANS,
+      className: "dm-sans",
       css: {
         button: {
-          borderRadius: strings.BORDER_RADIUS.EIGHT_PX
+          borderRadius: "8px"
         }
       }
     },
@@ -45,7 +34,7 @@ const ConfirmationModal = ({
           padding: "24px $12 8px $12 !important"
         }
       },
-      title
+      name
     ),
     /* @__PURE__ */ React.createElement(
       alertDialog.AlertDialogDescription,
@@ -63,20 +52,19 @@ const ConfirmationModal = ({
       },
       description
     ),
-    /* @__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 }, cancelText)), /* @__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: "default", variant: "solid", size: "lg" }, "Cancel")), /* @__PURE__ */ React.createElement(alertDialog.AlertDialogAction, { asChild: true }, /* @__PURE__ */ React.createElement(
       button.Button,
       {
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        color: confirmButtonColor,
-        size: strings.SIZE_VALUES.LARGE,
+        onMouseEnter: () => setIsDeleteIconHover(true),
+        onMouseLeave: () => setIsDeleteIconHover(false),
+        color: isDeleteIconHover ? "error" : "default",
+        size: "lg",
         onClick: onConfirm
       },
-      confirmText
+      "Confirm"
     )))
   ));
 };
-ConfirmationModal.displayName = strings.COMPONENT_DISPLAY_NAMES.CONFIRMATION_MODAL;
 exports.default = ConfirmationModal;
 //# sourceMappingURL=confirmation-modal.js.map

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

	@@ -1 +1 @@
1	- {"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":"~~;;;;;;;;;AA0DA~~,MAAM,oBAAsD,CAAC;AAAA,~~EAC3D~~,~~KAAA~~;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;~~AAAA~~,~~EACA,cAAcA,mBAAY,CAAA,OAAA;AAAA,EAC1B,aAAaA,mBAAY,CAAA,MAAA;AAAA,EACzB,cAAiB,GAAA,KAAA;AACnB,~~CAAM,KAAA;~~AACJ~~,EAAA,MAAM,CAAC,~~cAAA~~,~~EAAgB~~,~~iBAAiB~~,CAAA,~~GAAIC~~,eAAS,KAAK,CAAA,CAAA;~~AAE1D~~,~~EAAM~~,MAAA,gBAAA,GAAmBC,kBAAY,MAAM;AACzC,IAAA,iBAAA,CAAkB,IAAI,CAAA,CAAA;AAAA,GACxB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,gBAAA,GAAmBA,kBAAY,MAAM;AACzC,IAAA,iBAAA,CAAkB,KAAK,CAAA,CAAA;AAAA,GACzB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,kBAAqB,GAAA,cAAA,IAAkB,cAAiB,GAAAC,cAAA,CAAO,QAAQA,cAAO,CAAA,OAAA,CAAA;AAEpF,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,~~WAAWC~~,~~uBAAgB~~,~~CAAA,OAAA~~;AAAA,~~MAC3B~~,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA;AAAA,UACN,~~cAAcC~~,~~qBAAc~~,~~CAAA,QAAA~~;AAAA,~~SAC9B~~;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,~~KAAA~~;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,~~oBAEC~~,KAAA,CAAA,aAAA,~~CAAAC~~,~~8BAAA~~,EAAA,~~EAAmB~~,~~GAAK~~,~~EAAA~~,EAAE,~~GAAK~~,~~EAAA~~,~~IAAA~~,~~EAC9B~~,EAAA,~~kBAAA~~,KAAA,CAAA,aAAA,~~CAACC~~,~~6BAAkB~~,EAAA,EAAA,~~OAAA~~,~~EAAO~~,~~IAAC~~,EAAA,~~OAAA~~,~~EAAS~~,~~4BACjC~~,KAAA,CAAA,aAAA,CAAAC,aAAA,EAAA,EAAO,~~KAAO~~,~~EAAAT~~,~~cAAA~~,~~CAAO~~,~~OAAS~~,EAAA,OAAA,~~EAASU~~,~~gBAAS~~,~~CAAA~~,~~KAAA~~,~~EAAO,IAAM,EAAAC,mBAAA,CAAY,KACvE,~~EAAA,~~EAAA~~,~~UACH~~,CACF,~~CAAA~~,~~kBAEC~~,KAAA,CAAA,aAAA,~~CAAAC~~,~~6BAAA~~,EAAA,~~EAAkB~~,~~SAAO~~,IACxB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,~~MAACH~~,aAAA;AAAA,MAAA;AAAA,QACC,~~YAAc~~,~~EAAA~~,~~gBAAA~~;AAAA,~~QACd~~,~~YAAc~~,~~EAAA~~,~~gBAAA~~;AAAA,~~QACd~~,~~KAAO~~,~~EAAA~~,~~kBAAA~~;AAAA,~~QACP~~,~~MAAME~~,~~mBAAY~~,~~CAAA,KAAA~~;AAAA,~~QAClB~~,OAAS,EAAA,SAAA;AAAA,OAAA;AAAA,~~MAER~~,~~WAAA~~;AAAA,~~KAEL~~,CACF,CAAA;AAAA,GAEJ,CAAA,CAAA;~~AAEJ,EAAA;AAEA,iBAAA,CAAkB,cAAcE,+BAAwB,CAAA,kBAAA~~;;;;"}
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;;;;"}

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

@@ -3,47 +3,31 @@
 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,
-  onClose,
+  onCloseHandler,
   variant,
   radius,
-  fontFamily = strings.FONT_FAMILIES.DM_SANS,
-  isClosable = true,
-  className
+  fontFamily = "DM Sans",
+  isClosable = true
 }) => {
-  const styles = PILL_STYLES[variant];
-  const handleClose = React.useCallback(() => {
-    onClose == null ? void 0 : onClose();
-  }, [onClose]);
+  const isDefaultVariant = variant === "default";
   return /* @__PURE__ */ React.createElement(
     flex.Flex,
     {
       alignItems: "center",
-      className,
       css: {
         margin: "2px !important",
         height: "$6",
-        background: styles.background,
+        background: isDefaultVariant ? "rgba(100, 116, 139, 0.08)" : "$positive100",
         padding: "$2",
         paddingLeft: radius === "sm" ? "$3" : "$2",
-        borderRadius: radius === "sm" ? "$sm" : strings.BORDER_RADIUS.NINETY_NINE_PX,
+        borderRadius: radius === "sm" ? "$sm" : "99px",
         "& > *": {
           fontFamily
         }
@@ -55,13 +39,13 @@ const CustomPill = React.memo(({
         size: "xs",
         weight: "medium",
         css: {
-          color: styles.textColor,
+          color: isDefaultVariant ? "$secondary800" : "$neutral900",
           paddingInline: "$1"
         }
       },
       label
     ),
-    isClosable && onClose && /* @__PURE__ */ React.createElement(
+    isClosable && /* @__PURE__ */ React.createElement(
       iconButton.IconButton,
       {
         css: {
@@ -71,16 +55,14 @@ const CustomPill = React.memo(({
           background: "transparent !important",
           ".twigs-button__icon-container": { position: "static" }
         },
-        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
+        variant: "ghost",
+        color: "default",
+        onClick: onCloseHandler,
+        icon: /* @__PURE__ */ React.createElement(closeCircleFill.CloseCircleFillIcon, { size: 12 })
       }
     )
   );
 });
-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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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~~;;;;"}
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;;;;"}

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

@@ -3,59 +3,45 @@
 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 = ({
-  onSave,
-  onClose,
-  onCancel,
-  title = DEFAULT_CONFIG.title,
-  content = DEFAULT_CONFIG.content
+  onSaveHandler,
+  onCloseHandler,
+  onCancel
 }) => {
-  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();
+  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"
       },
-      onClose() {
-        onClose();
+      minWidth: "464px",
+      '[class$="variant-solid"]:nth-child(1)': {
+        width: "106px",
+        marginLeft: "auto"
       }
-    });
-  }, [title, content, onSave, onCancel, onClose]);
+    },
+    confirmButtonProps: {
+      color: "primary"
+    },
+    onCancel(e) {
+      onCancel();
+    },
+    onConfirm(e) {
+      onSaveHandler();
+    },
+    onClose() {
+      onCloseHandler();
+    }
+  });
   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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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~~;;;;"}
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;;;;"}