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

package/dist/cjs/_virtual/index8.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var reactIs = {exports: {}};
+var cjs = {};
 
-exports.__module = reactIs;
+exports.__exports = cjs;
 //# sourceMappingURL=index8.js.map

package/dist/cjs/_virtual/index9.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var cjs = {};
+var reactIs = {exports: {}};
 
-exports.__exports = cjs;
+exports.__module = reactIs;
 //# sourceMappingURL=index9.js.map

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

@@ -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

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

package/dist/cjs/cascader-dropdown/popover/popover.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var index = require('../../node_modules/@radix-ui/react-popover/dist/index.js');
+var slitches_config = require('../../packages/frontend-templates/slitches.config.js');
+
+const slideUpAndFade = slitches_config.keyframes({
+  "0%": { opacity: 0, transform: "translateY(2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+});
+const slideRightAndFade = slitches_config.keyframes({
+  "0%": { opacity: 0, transform: "translateX(-2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" }
+});
+const slideDownAndFade = slitches_config.keyframes({
+  "0%": { opacity: 0, transform: "translateY(-2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+});
+const slideLeftAndFade = slitches_config.keyframes({
+  "0%": { opacity: 0, transform: "translateX(2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" }
+});
+const PopoverContent = slitches_config.styled(index.Content, {
+  padding: "$4",
+  width: 260,
+  zIndex: 100,
+  borderRadius: "$md",
+  backgroundColor: "$white900",
+  animationDuration: "400ms",
+  boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+  willChange: "transform, opacity",
+  '&[data-state="open"]': {
+    '&[data-side="top"]': { animationName: slideDownAndFade },
+    '&[data-side="right"]': { animationName: slideLeftAndFade },
+    '&[data-side="bottom"]': { animationName: slideUpAndFade },
+    '&[data-side="left"]': { animationName: slideRightAndFade }
+  }
+});
+slitches_config.styled(index.Arrow, {
+  fill: "white"
+});
+slitches_config.styled(index.Close, {
+  all: "unset",
+  fontFamily: "inherit",
+  position: "absolute",
+  top: 5,
+  right: 5
+});
+const { PopoverTrigger } = index;
+const Popover = index.Root;
+
+exports.Popover = Popover;
+exports.PopoverContent = PopoverContent;
+exports.PopoverTrigger = PopoverTrigger;
+//# sourceMappingURL=popover.js.map

package/dist/cjs/cascader-dropdown/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sources":["../../../../src/cascader-dropdown/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { keyframes, styled } from '../../../slitches.config';\n\nconst slideUpAndFade = keyframes({\n  '0%': { opacity: 0, transform: 'translateY(2px)' },\n  '100%': { opacity: 1, transform: 'translateY(0)' }\n});\n\nconst slideRightAndFade = keyframes({\n  '0%': { opacity: 0, transform: 'translateX(-2px)' },\n  '100%': { opacity: 1, transform: 'translateX(0)' }\n});\n\nconst slideDownAndFade = keyframes({\n  '0%': { opacity: 0, transform: 'translateY(-2px)' },\n  '100%': { opacity: 1, transform: 'translateY(0)' }\n});\n\nconst slideLeftAndFade = keyframes({\n  '0%': { opacity: 0, transform: 'translateX(2px)' },\n  '100%': { opacity: 1, transform: 'translateX(0)' }\n});\n\nexport const PopoverContent = styled(PopoverPrimitive.Content, {\n  padding: '$4',\n  width: 260,\n  zIndex: 100,\n  borderRadius: '$md',\n  backgroundColor: '$white900',\n  animationDuration: '400ms',\n  boxShadow:\n    'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',\n  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',\n  willChange: 'transform, opacity',\n  '&[data-state=\"open\"]': {\n    '&[data-side=\"top\"]': { animationName: slideDownAndFade },\n    '&[data-side=\"right\"]': { animationName: slideLeftAndFade },\n    '&[data-side=\"bottom\"]': { animationName: slideUpAndFade },\n    '&[data-side=\"left\"]': { animationName: slideRightAndFade }\n  }\n});\n\nexport const PopoverArrow = styled(PopoverPrimitive.Arrow, {\n  fill: 'white'\n});\n\nexport const PopoverClose = styled(PopoverPrimitive.Close, {\n  all: 'unset',\n  fontFamily: 'inherit',\n  position: 'absolute',\n  top: 5,\n  right: 5\n});\n\nexport const { PopoverTrigger } = PopoverPrimitive;\nexport const Popover = PopoverPrimitive.Root;\nexport const PopoverPortal = PopoverPrimitive.Portal;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\n"],"names":["keyframes","styled","PopoverPrimitive.Content","PopoverPrimitive.Arrow","PopoverPrimitive.Close","PopoverPrimitive","PopoverPrimitive.Root"],"mappings":";;;;;AAGA,MAAM,iBAAiBA,yBAAU,CAAA;AAAA,EAC/B,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,iBAAkB,EAAA;AAAA,EACjD,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,eAAgB,EAAA;AACnD,CAAC,CAAA,CAAA;AAED,MAAM,oBAAoBA,yBAAU,CAAA;AAAA,EAClC,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,kBAAmB,EAAA;AAAA,EAClD,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,eAAgB,EAAA;AACnD,CAAC,CAAA,CAAA;AAED,MAAM,mBAAmBA,yBAAU,CAAA;AAAA,EACjC,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,kBAAmB,EAAA;AAAA,EAClD,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,eAAgB,EAAA;AACnD,CAAC,CAAA,CAAA;AAED,MAAM,mBAAmBA,yBAAU,CAAA;AAAA,EACjC,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,iBAAkB,EAAA;AAAA,EACjD,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,eAAgB,EAAA;AACnD,CAAC,CAAA,CAAA;AAEY,MAAA,cAAA,GAAiBC,sBAAO,CAAAC,aAA0B,EAAA;AAAA,EAC7D,OAAS,EAAA,IAAA;AAAA,EACT,KAAO,EAAA,GAAA;AAAA,EACP,MAAQ,EAAA,GAAA;AAAA,EACR,YAAc,EAAA,KAAA;AAAA,EACd,eAAiB,EAAA,WAAA;AAAA,EACjB,iBAAmB,EAAA,OAAA;AAAA,EACnB,SACE,EAAA,sFAAA;AAAA,EACF,uBAAyB,EAAA,+BAAA;AAAA,EACzB,UAAY,EAAA,oBAAA;AAAA,EACZ,sBAAwB,EAAA;AAAA,IACtB,oBAAA,EAAsB,EAAE,aAAA,EAAe,gBAAiB,EAAA;AAAA,IACxD,sBAAA,EAAwB,EAAE,aAAA,EAAe,gBAAiB,EAAA;AAAA,IAC1D,uBAAA,EAAyB,EAAE,aAAA,EAAe,cAAe,EAAA;AAAA,IACzD,qBAAA,EAAuB,EAAE,aAAA,EAAe,iBAAkB,EAAA;AAAA,GAC5D;AACF,CAAC,EAAA;AAE2BD,sBAAO,CAAAE,WAAwB,EAAA;AAAA,EACzD,IAAM,EAAA,OAAA;AACR,CAAC,EAAA;AAE2BF,sBAAO,CAAAG,WAAwB,EAAA;AAAA,EACzD,GAAK,EAAA,OAAA;AAAA,EACL,UAAY,EAAA,SAAA;AAAA,EACZ,QAAU,EAAA,UAAA;AAAA,EACV,GAAK,EAAA,CAAA;AAAA,EACL,KAAO,EAAA,CAAA;AACT,CAAC,EAAA;AAEY,MAAA,EAAE,gBAAmB,GAAAC,MAAA;AAC3B,MAAM,UAAUC;;;;;;"}

package/dist/cjs/commons/components/NamingModal.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 formInput = require('../../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js');
@@ -11,16 +12,33 @@ 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');
 
-function NamingModal({
+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 = ({
   editFieldId,
-  mappingLoader = false,
-  saveHandler,
-  closeHandler,
+  isLoading = false,
+  onSave,
+  onClose,
   value,
-  setValue,
-  isOpen
-}) {
-  return /* @__PURE__ */ React.createElement(dialog.Dialog, { open: isOpen, size: "sm" }, /* @__PURE__ */ React.createElement(dialog.DialogContent, null, /* @__PURE__ */ React.createElement(
+  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(
     dialog.DialogHeader,
     {
       css: {
@@ -31,22 +49,29 @@ function NamingModal({
         borderBottom: "none !important"
       }
     },
-    /* @__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,
+    /* @__PURE__ */ React.createElement(dialog.DialogTitle, { size: strings.SIZE_VALUES.LARGE }, DEFAULT_CONFIG.title)
+  ), /* @__PURE__ */ React.createElement(
+    dialog.DialogBody,
     {
-      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(
+      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(
     flex.Flex,
     {
       css: {
@@ -56,27 +81,30 @@ function NamingModal({
     /* @__PURE__ */ React.createElement(
       button.Button,
       {
-        loading: mappingLoader,
-        size: "lg",
-        color: "primary",
+        loading: isLoading,
+        size: strings.SIZE_VALUES.LARGE,
+        color: strings.COLORS.PRIMARY,
         css: {
           width: "100%"
         },
-        onClick: saveHandler
+        onClick: onSave,
+        disabled: isSaveDisabled
       },
-      editFieldId ? "Update Mapping" : "Save Mapping"
+      buttonText
     )
-  )), /* @__PURE__ */ React.createElement(box.Box, { css: { position: "absolute", top: "$8", right: "$8" } }, /* @__PURE__ */ React.createElement(dialog.DialogClose, { asChild: true, onClick: closeHandler }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(box.Box, { css: { position: "absolute", top: "$8", right: "$8" } }, /* @__PURE__ */ React.createElement(dialog.DialogClose, { asChild: true, onClick: onClose }, /* @__PURE__ */ React.createElement(
     iconButton.IconButton,
     {
-      size: "lg",
+      size: strings.SIZE_VALUES.LARGE,
       icon: /* @__PURE__ */ React.createElement(close.CloseIcon, null),
-      variant: "ghost",
-      "aria-label": "Close",
-      color: "default"
+      variant: strings.VARIANTS.GHOST,
+      "aria-label": strings.ARIA_LABELS.CLOSE_MODAL,
+      color: strings.COLORS.DEFAULT,
+      disabled: isLoading
     }
   )))));
-}
+};
+NamingModal.displayName = strings.COMPONENT_DISPLAY_NAMES.NAMING_MODAL;
 
 exports.default = NamingModal;
 //# sourceMappingURL=NamingModal.js.map

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

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

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

@@ -3,24 +3,35 @@
 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 = ({
-  name,
+  title,
   description,
   onConfirm,
-  onCancel
+  onCancel,
+  confirmText = strings.BUTTON_TEXT.CONFIRM,
+  cancelText = strings.BUTTON_TEXT.CANCEL,
+  showErrorState = false
 }) => {
-  const [isDeleteIconHover, setIsDeleteIconHover] = React.useState(false);
+  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;
   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
         }
       }
     },
@@ -34,7 +45,7 @@ const ConfirmationModal = ({
           padding: "24px $12 8px $12 !important"
         }
       },
-      name
+      title
     ),
     /* @__PURE__ */ React.createElement(
       alertDialog.AlertDialogDescription,
@@ -52,19 +63,20 @@ 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: "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 }, cancelText)), /* @__PURE__ */ React.createElement(alertDialog.AlertDialogAction, { asChild: true }, /* @__PURE__ */ React.createElement(
       button.Button,
       {
-        onMouseEnter: () => setIsDeleteIconHover(true),
-        onMouseLeave: () => setIsDeleteIconHover(false),
-        color: isDeleteIconHover ? "error" : "default",
-        size: "lg",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        color: confirmButtonColor,
+        size: strings.SIZE_VALUES.LARGE,
         onClick: onConfirm
       },
-      "Confirm"
+      confirmText
     )))
   ));
 };
+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

@@ -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;;;;"}