@popsure/dirty-swan 0.61.2 → 0.62.0

package/dist/esm/components/input/autoSuggestInput/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/autoSuggestInput/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { AutoSuggestInput, AutoSuggestInputProps } from '.';\nimport { Option } from '../../../models/autoSuggestInput';\nimport featherLogo from '../../cards/icons/feather-logo.svg';\n\nconst story = {\n  title: 'JSX/Inputs/AutoSuggestInput',\n  component: AutoSuggestInput,\n  argTypes: {\n    suggestions: {\n      description: 'List of suggestions that should be displayed to the respective input',\n    },\n    currentOption: {\n      description: 'Current input of the component by user',\n    },\n    placeholder: {\n      description: 'Placeholder for DirtySwan Input component'\n    },\n    className: {\n      description: 'Class name for the most parent element',\n      control: 'text'\n    },\n    wrapText: {\n      description: 'Wether or not wrap the entries in the dropdown or hide overflown text',\n    },\n    inputProps: {\n      control: { type: 'object' },\n      table: {\n        type: { \n          summary: 'InputHTMLAttributes'\n        },\n      },\n    },\n    handleSuggestionSelected: {\n      description: 'Function that runs when a suggestion is selected from the dropdown',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    onChange: {\n      description: 'Function that is called when value of current input changes',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    handleSuggestionFetchRequest: {\n      description: 'Function that allows control of which suggestions should be displayed',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    handleSuggestionClearRequest: {\n      description: 'Function that runs when suggestions are cleared (eg. input removal, selecting suggestion)',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n  },\n  args: {\n    suggestions: [\n      { value: 'feather', leftIcon: featherLogo },\n      { value: 'feather2', leftIcon: featherLogo },\n      {\n        value: 'feather3',\n        leftIcon: featherLogo,\n      },\n      {\n        value: 'dirtyswan',\n        leftIcon: featherLogo,\n      },\n      {\n        value: 'test value',\n        leftIcon: featherLogo,\n      },\n    ],\n    currentOption: 'feather',\n    placeholder: 'Placeholder',\n    className: '',\n    wrapText: false,\n    inputProps: {},\n  },\n  parameters: {\n    componentSubtitle: 'This component allows quick search via the input field to find an option for selection',\n  },\n};\n\nexport const AutoSuggestInputStory = ({\n  currentOption = '', \n  suggestions,\n  handleSuggestionSelected,\n  onChange,\n  handleSuggestionFetchRequest,\n  handleSuggestionClearRequest,\n  placeholder,\n  className,\n  wrapText,\n  inputProps,\n}: AutoSuggestInputProps) => {\n  \n  const [selectedValues, setSelectedValues] = useState<Option[]>([]);\n  const [selectedOption, setSelectedOption] = useState(currentOption);\n  const [options, setOptions] = useState([]);\n\n  const handleSelected = (value: Option) => {\n    handleSuggestionSelected(value);\n\n    const newSelectedOptions = [...selectedValues, value];\n    setSelectedValues(newSelectedOptions);\n    setSelectedOption(value.value);\n  };\n\n  const handleFetchRequest = (value: Option) => {\n    handleSuggestionFetchRequest(value);\n\n    const filteredOptions = options.filter((option: Option) =>\n      option.value.toLowerCase().startsWith(option.value.toLowerCase())\n    );\n    setSelectedValues(filteredOptions);\n  };\n\n  const handleClearSuggestions = () => {\n    handleSuggestionClearRequest();\n\n    setOptions([]);\n  };\n\n  const handleOnChange = (value: string) => {\n    onChange(value);\n\n    setSelectedOption(value);\n  };\n\n  return (\n    <div style={{ minHeight: '300px' }}>\n      <AutoSuggestInput\n        currentOption={selectedOption}\n        suggestions={suggestions}\n        handleSuggestionSelected={handleSelected}\n        onChange={handleOnChange}\n        handleSuggestionFetchRequest={handleFetchRequest}\n        handleSuggestionClearRequest={handleClearSuggestions}\n        placeholder={placeholder}\n        className={className}\n        wrapText={wrapText}\n        inputProps={inputProps}\n      />\n    </div>\n  );\n};\n\nAutoSuggestInputStory.storyName = \"AutoSuggestInput\";\n\nexport const OptionType = () => (\n  <pre>\n    {`interface Option {\n      value: string; // value of option to be stored and displayed on UI\n      leftIcon?: string; // image of the provided option to be displayed on UI\n}`}\n  </pre>\n)\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/autoSuggestInput/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { AutoSuggestInput, AutoSuggestInputProps } from '.';\nimport { Option } from '../../../models/autoSuggestInput';\nimport featherLogo from '../../cards/icons/feather-logo.svg';\n\nconst story = {\n  title: 'JSX/Inputs/AutoSuggestInput',\n  component: AutoSuggestInput,\n  argTypes: {\n    suggestions: {\n      description:\n        'List of suggestions that should be displayed to the respective input',\n    },\n    currentOption: {\n      description: 'Current input of the component by user',\n    },\n    placeholder: {\n      description: 'Placeholder for DirtySwan Input component',\n    },\n    className: {\n      description: 'Class name for the most parent element',\n      control: 'text',\n    },\n    wrapText: {\n      description:\n        'Wether or not wrap the entries in the dropdown or hide overflown text',\n    },\n    inputProps: {\n      control: { type: 'object' },\n      table: {\n        type: {\n          summary: 'InputHTMLAttributes',\n        },\n      },\n    },\n    handleSuggestionSelected: {\n      description:\n        'Function that runs when a suggestion is selected from the dropdown',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    onChange: {\n      description:\n        'Function that is called when value of current input changes',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    handleSuggestionFetchRequest: {\n      description:\n        'Function that allows control of which suggestions should be displayed',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    handleSuggestionClearRequest: {\n      description:\n        'Function that runs when suggestions are cleared (eg. input removal, selecting suggestion)',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n  },\n  args: {\n    suggestions: [\n      { value: 'feather', leftIcon: featherLogo },\n      { value: 'feather2', leftIcon: featherLogo },\n      {\n        value: 'feather3',\n        leftIcon: featherLogo,\n      },\n      {\n        value: 'dirtyswan',\n        leftIcon: featherLogo,\n      },\n      {\n        value: 'test value',\n        leftIcon: featherLogo,\n      },\n    ],\n    currentOption: 'feather',\n    placeholder: 'Placeholder',\n    className: '',\n    wrapText: false,\n    inputProps: {},\n  },\n  parameters: {\n    componentSubtitle:\n      'This component allows quick search via the input field to find an option for selection',\n  },\n};\n\nexport const AutoSuggestInputStory = {\n  render: ({\n    currentOption = '',\n    suggestions,\n    handleSuggestionSelected,\n    onChange,\n    handleSuggestionFetchRequest,\n    handleSuggestionClearRequest,\n    placeholder,\n    className,\n    wrapText,\n    inputProps,\n  }: AutoSuggestInputProps) => {\n    const [selectedValues, setSelectedValues] = useState<Option[]>([]);\n    const [selectedOption, setSelectedOption] = useState(currentOption);\n    const [options, setOptions] = useState([]);\n\n    const handleSelected = (value: Option) => {\n      handleSuggestionSelected(value);\n\n      const newSelectedOptions = [...selectedValues, value];\n      setSelectedValues(newSelectedOptions);\n      setSelectedOption(value.value);\n    };\n\n    const handleFetchRequest = (value: Option) => {\n      handleSuggestionFetchRequest(value);\n\n      const filteredOptions = options.filter((option: Option) =>\n        option.value.toLowerCase().startsWith(option.value.toLowerCase())\n      );\n      setSelectedValues(filteredOptions);\n    };\n\n    const handleClearSuggestions = () => {\n      handleSuggestionClearRequest();\n\n      setOptions([]);\n    };\n\n    const handleOnChange = (value: string) => {\n      onChange(value);\n\n      setSelectedOption(value);\n    };\n\n    return (\n      <div style={{ minHeight: '300px' }}>\n        <AutoSuggestInput\n          currentOption={selectedOption}\n          suggestions={suggestions}\n          handleSuggestionSelected={handleSelected}\n          onChange={handleOnChange}\n          handleSuggestionFetchRequest={handleFetchRequest}\n          handleSuggestionClearRequest={handleClearSuggestions}\n          placeholder={placeholder}\n          className={className}\n          wrapText={wrapText}\n          inputProps={inputProps}\n        />\n      </div>\n    );\n  },\n\n  name: 'AutoSuggestInput',\n};\n\nexport const OptionType = () => (\n  <pre>\n    {`interface Option {\n      value: string; // value of option to be stored and displayed on UI\n      leftIcon?: string; // image of the provided option to be displayed on UI\n}`}\n  </pre>\n);\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/input/autoSuggestMultiSelect/index.js

@@ -1,16 +1,18 @@
-import { _ as __spreadArray } from '../../../tslib.es6-a39f91fc.js';
+import { d as __spreadArray } from '../../../tslib.es6-CVlKGIvp.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import Chip from '../../chip/index.js';
 import { AutoSuggestInput } from '../autoSuggestInput/index.js';
-import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
-import { c as classNames } from '../../../index-6ea95111.js';
+import { s as styleInject } from '../../../style-inject.es-tgCJW-Cu.js';
+import { c as classNames } from '../../../index-DLQEsiym.js';
 import '../../icon/icons/X.js';
 import '../../icon/IconWrapper/IconWrapper.js';
-import '../../../index-171a0108.js';
-import '../../../index-dd80248b.js';
+import '../../../_commonjsHelpers-BFTU3MAI.js';
+import '../../../index-BraF21Ae.js';
+import '../../../index-DuaJiEiT.js';
+import '../../../index-hWqCLhoS.js';
 import '../index.js';
-import '../../../index-69a46657.js';
+import '../../../index-CNcEE5dn.js';
 
 var css_248z = ".style-module_chip-container__26s37 {\n  display: flex;\n  flex-wrap: wrap;\n  max-height: 10px;\n  transition: 0.7s ease-in;\n}\n\n.style-module_appearIn__3XNel {\n  max-height: 300px;\n}";
 var styles = {"chip-container":"style-module_chip-container__26s37","appearIn":"style-module_appearIn__3XNel"};

package/dist/esm/components/input/autoSuggestMultiSelect/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/autoSuggestMultiSelect/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Option } from '../../../models/autoSuggestInput';\nimport Chip from '../../chip';\nimport { AutoSuggestInput } from '../autoSuggestInput';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\nexport interface AutoSuggestMultiSelectProps {\n  options: Option[];\n  selectedValues?: Option[];\n  setValues: (values: Option[]) => void;\n  placeholder: string;\n  chipsListClassName?: string;\n  multiSelectClassName?: string;\n  wrapText?: boolean;\n}\n\nexport const AutoSuggestMultiSelect = ({\n  options,\n  selectedValues,\n  setValues,\n  placeholder,\n  chipsListClassName,\n  multiSelectClassName,\n  wrapText,\n}: AutoSuggestMultiSelectProps) => {\n  const [suggestions, setSuggestions] = useState<Option[]>([]);\n  const [currentOption, setCurrentOption] = useState('');\n  const hasChips = Boolean(selectedValues && selectedValues.length > 0);\n\n  return (\n    <>\n      <div\n        className={classNames(\n          styles['chip-container'],\n          chipsListClassName,\n          {\n            [styles.appearIn]: hasChips\n          },\n        )}\n      >\n        {selectedValues && hasChips && (\n          <>\n            {selectedValues.map((value, index) => (\n              <Chip\n                key={`${value.value}-${index}`}\n                className=\"mb16\"\n                value={value}\n                onRemove={(value: Option) => {\n                  const newValues = [...selectedValues].filter(\n                    (selectedValue) => selectedValue.value !== value.value\n                  );\n                  setValues(newValues);\n                }}\n              />\n            ))}\n          </>\n        )}\n      </div>\n      <AutoSuggestInput\n        className={multiSelectClassName}\n        placeholder={placeholder}\n        onChange={setCurrentOption}\n        handleSuggestionSelected={(value) => {\n          const newSelectedOptions = selectedValues ?? [];\n          newSelectedOptions?.push(value);\n          setValues(newSelectedOptions);\n          setCurrentOption('');\n        }}\n        handleSuggestionFetchRequest={({ value }) => {\n          const filteredOptions = options.filter(\n            (option) =>\n              option.value.toLowerCase().startsWith(value.toLowerCase()) &&\n              selectedValues?.find(\n                (selectedValue) => selectedValue.value === option.value\n              ) === undefined\n          );\n          setSuggestions(filteredOptions);\n        }}\n        currentOption={currentOption}\n        suggestions={suggestions}\n        handleSuggestionClearRequest={() => setSuggestions([])}\n        wrapText={wrapText}\n      />\n    </>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;IAkBa,sBAAsB,GAAG,UAAC,EAQT;;QAP5B,OAAO,aAAA,EACP,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,kBAAkB,wBAAA,EAClB,oBAAoB,0BAAA,EACpB,QAAQ,cAAA;IAEF,IAAA,KAAgC,QAAQ,CAAW,EAAE,CAAC,EAArD,WAAW,QAAA,EAAE,cAAc,QAA0B,CAAC;IACvD,IAAA,KAAoC,QAAQ,CAAC,EAAE,CAAC,EAA/C,aAAa,QAAA,EAAE,gBAAgB,QAAgB,CAAC;IACvD,IAAM,QAAQ,GAAG,OAAO,CAAC,cAAc,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAEtE,QACEA,4BACEC,aACE,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,gBAAgB,CAAC,EACxB,kBAAkB;oBAEhB,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ;wBAE9B,YAEA,cAAc,IAAI,QAAQ,KACzBA,0BACG,cAAc,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,QACpCA,IAAC,IAAI,IAEH,SAAS,EAAC,MAAM,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,UAAC,KAAa;4BACtB,IAAM,SAAS,GAAG,kBAAI,cAAc,QAAE,MAAM,CAC1C,UAAC,aAAa,IAAK,OAAA,aAAa,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,GAAA,CACvD,CAAC;4BACF,SAAS,CAAC,SAAS,CAAC,CAAC;yBACtB,IARI,UAAG,KAAK,CAAC,KAAK,cAAI,KAAK,CAAE,CAS9B,IACH,CAAC,GACD,CACJ,GACG,EACNA,IAAC,gBAAgB,IACf,SAAS,EAAE,oBAAoB,EAC/B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,gBAAgB,EAC1B,wBAAwB,EAAE,UAAC,KAAK;oBAC9B,IAAM,kBAAkB,GAAG,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC;oBAChD,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,IAAI,CAAC,KAAK,CAAC,CAAC;oBAChC,SAAS,CAAC,kBAAkB,CAAC,CAAC;oBAC9B,gBAAgB,CAAC,EAAE,CAAC,CAAC;iBACtB,EACD,4BAA4B,EAAE,UAAC,EAAS;wBAAP,KAAK,WAAA;oBACpC,IAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CACpC,UAAC,MAAM;wBACL,OAAA,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;4BAC1D,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,CAClB,UAAC,aAAa,IAAK,OAAA,aAAa,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,GAAA,CACxD,MAAK,SAAS;qBAAA,CAClB,CAAC;oBACF,cAAc,CAAC,eAAe,CAAC,CAAC;iBACjC,EACD,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,4BAA4B,EAAE,cAAM,OAAA,cAAc,CAAC,EAAE,CAAC,GAAA,EACtD,QAAQ,EAAE,QAAQ,GAClB,IACD,EACH;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/autoSuggestMultiSelect/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Option } from '../../../models/autoSuggestInput';\nimport Chip from '../../chip';\nimport { AutoSuggestInput } from '../autoSuggestInput';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\nexport interface AutoSuggestMultiSelectProps {\n  options: Option[];\n  selectedValues?: Option[];\n  setValues: (values: Option[]) => void;\n  placeholder: string;\n  chipsListClassName?: string;\n  multiSelectClassName?: string;\n  wrapText?: boolean;\n}\n\nexport const AutoSuggestMultiSelect = ({\n  options,\n  selectedValues,\n  setValues,\n  placeholder,\n  chipsListClassName,\n  multiSelectClassName,\n  wrapText,\n}: AutoSuggestMultiSelectProps) => {\n  const [suggestions, setSuggestions] = useState<Option[]>([]);\n  const [currentOption, setCurrentOption] = useState('');\n  const hasChips = Boolean(selectedValues && selectedValues.length > 0);\n\n  return (\n    <>\n      <div\n        className={classNames(\n          styles['chip-container'],\n          chipsListClassName,\n          {\n            [styles.appearIn]: hasChips\n          },\n        )}\n      >\n        {selectedValues && hasChips && (\n          <>\n            {selectedValues.map((value, index) => (\n              <Chip\n                key={`${value.value}-${index}`}\n                className=\"mb16\"\n                value={value}\n                onRemove={(value: Option) => {\n                  const newValues = [...selectedValues].filter(\n                    (selectedValue) => selectedValue.value !== value.value\n                  );\n                  setValues(newValues);\n                }}\n              />\n            ))}\n          </>\n        )}\n      </div>\n      <AutoSuggestInput\n        className={multiSelectClassName}\n        placeholder={placeholder}\n        onChange={setCurrentOption}\n        handleSuggestionSelected={(value) => {\n          const newSelectedOptions = selectedValues ?? [];\n          newSelectedOptions?.push(value);\n          setValues(newSelectedOptions);\n          setCurrentOption('');\n        }}\n        handleSuggestionFetchRequest={({ value }) => {\n          const filteredOptions = options.filter(\n            (option) =>\n              option.value.toLowerCase().startsWith(value.toLowerCase()) &&\n              selectedValues?.find(\n                (selectedValue) => selectedValue.value === option.value\n              ) === undefined\n          );\n          setSuggestions(filteredOptions);\n        }}\n        currentOption={currentOption}\n        suggestions={suggestions}\n        handleSuggestionClearRequest={() => setSuggestions([])}\n        wrapText={wrapText}\n      />\n    </>\n  );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/esm/components/input/autoSuggestMultiSelect/index.stories.js

@@ -1,18 +1,20 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { AutoSuggestMultiSelect } from './index.js';
-import { f as featherLogo } from '../../../feather-logo-a3f07990.js';
-import '../../../tslib.es6-a39f91fc.js';
+import { f as featherLogo } from '../../../feather-logo-C_EfYEK5.js';
+import '../../../tslib.es6-CVlKGIvp.js';
 import '../../chip/index.js';
+import '../../../index-DLQEsiym.js';
+import '../../../_commonjsHelpers-BFTU3MAI.js';
 import '../../icon/icons/X.js';
 import '../../icon/IconWrapper/IconWrapper.js';
-import '../../../index-6ea95111.js';
-import '../../../style-inject.es-1f59c1d0.js';
+import '../../../style-inject.es-tgCJW-Cu.js';
 import '../autoSuggestInput/index.js';
-import '../../../index-171a0108.js';
-import '../../../index-dd80248b.js';
+import '../../../index-BraF21Ae.js';
+import '../../../index-DuaJiEiT.js';
+import '../../../index-hWqCLhoS.js';
 import '../index.js';
-import '../../../index-69a46657.js';
+import '../../../index-CNcEE5dn.js';
 
 var story = {
     title: 'JSX/Inputs/AutoSuggestMultiSelect',
@@ -23,7 +25,7 @@ var story = {
             description: 'List of all options available to search from',
             table: {
                 type: {
-                    summary: 'Option[]'
+                    summary: 'Option[]',
                 },
             },
         },
@@ -31,20 +33,20 @@ var story = {
             description: 'List of all selected values',
             table: {
                 type: {
-                    summary: 'Option[]'
+                    summary: 'Option[]',
                 },
             },
         },
         placeholder: {
-            description: 'Placeholder for DirtySwan Input component'
+            description: 'Placeholder for DirtySwan Input component',
         },
         chipsListClassName: {
             description: 'Class name for the most parent element of the Chip component',
-            control: 'text'
+            control: 'text',
         },
         multiSelectClassName: {
             description: 'Class name for the most parent element of the AutoSuggestInput component',
-            control: 'text'
+            control: 'text',
         },
         wrapText: {
             description: 'Wether or not wrap the entries in the dropdown or hide overflown text',
@@ -87,23 +89,24 @@ var story = {
         componentSubtitle: 'AutoSuggestMultiSelect is a combination of the AutoSuggestInput and Chip components',
         docs: {
             description: {
-                component: "This component allows quick search via the input field to find an option for selection.\n        \nUpon selecting an option, the option is displayed above the input field as a chip.\n        \nThe chip can be removed by clicking on the X button. Multi options can be selected as well.\n        \nProp `setValues` function must be provided to keep track of removed and added option selections."
+                component: "This component allows quick search via the input field to find an option for selection.\n        \nUpon selecting an option, the option is displayed above the input field as a chip.\n        \nThe chip can be removed by clicking on the X button. Multi options can be selected as well.\n        \nProp `setValues` function must be provided to keep track of removed and added option selections.",
             },
         },
     },
 };
-var AutoSuggestMultiSelectStory = function (_a) {
-    var options = _a.options, selectedValues = _a.selectedValues, setValues = _a.setValues, placeholder = _a.placeholder, chipsListClassName = _a.chipsListClassName, multiSelectClassName = _a.multiSelectClassName, wrapText = _a.wrapText;
-    var _b = useState(selectedValues), values = _b[0], setSelectedValues = _b[1];
-    var handleSetValues = function (options) {
-        setValues(options);
-        setSelectedValues(options);
-    };
-    return (jsx("div", { style: { minHeight: '240px' }, children: jsx(AutoSuggestMultiSelect, { options: options, selectedValues: values, setValues: handleSetValues, placeholder: placeholder, chipsListClassName: chipsListClassName, multiSelectClassName: multiSelectClassName, wrapText: wrapText }) }));
+var AutoSuggestMultiSelectStory = {
+    render: function (_a) {
+        var options = _a.options, selectedValues = _a.selectedValues, setValues = _a.setValues, placeholder = _a.placeholder, chipsListClassName = _a.chipsListClassName, multiSelectClassName = _a.multiSelectClassName, wrapText = _a.wrapText;
+        var _b = useState(selectedValues), values = _b[0], setSelectedValues = _b[1];
+        var handleSetValues = function (options) {
+            setValues(options);
+            setSelectedValues(options);
+        };
+        return (jsx("div", { style: { minHeight: '240px' }, children: jsx(AutoSuggestMultiSelect, { options: options, selectedValues: values, setValues: handleSetValues, placeholder: placeholder, chipsListClassName: chipsListClassName, multiSelectClassName: multiSelectClassName, wrapText: wrapText }) }));
+    },
+    name: 'AutoSuggestMultiSelect',
 };
 var OptionType = function () { return (jsx("pre", { children: "interface Option {\n      value: string; // value of option to be stored and displayed on UI\n      leftIcon?: string; // image of the provided option to be displayed on UI\n}" })); };
-AutoSuggestMultiSelectStory.storyName = "AutoSuggestMultiSelect";
 
-export default story;
-export { AutoSuggestMultiSelectStory, OptionType };
+export { AutoSuggestMultiSelectStory, OptionType, story as default };
 //# sourceMappingURL=index.stories.js.map

package/dist/esm/components/input/autoSuggestMultiSelect/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/autoSuggestMultiSelect/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { AutoSuggestMultiSelect, AutoSuggestMultiSelectProps } from '.';\nimport { Option } from '../../../models/autoSuggestInput';\nimport featherLogo from '../../cards/icons/feather-logo.svg';\n\nconst story = {\n  title: 'JSX/Inputs/AutoSuggestMultiSelect',\n  subtitle: 'sgsg',\n  component: AutoSuggestMultiSelect,\n  argTypes: {\n    options: {\n      description: 'List of all options available to search from',\n      table: {\n        type: { \n          summary: 'Option[]'\n        },\n      },\n    },\n    selectedValues: {\n      description: 'List of all selected values',\n      table: {\n        type: { \n          summary: 'Option[]'\n        },\n      },\n    },\n    placeholder: {\n      description: 'Placeholder for DirtySwan Input component'\n    },\n    chipsListClassName: {\n      description: 'Class name for the most parent element of the Chip component',\n      control: 'text'\n    },\n    multiSelectClassName: {\n      description: 'Class name for the most parent element of the AutoSuggestInput component',\n      control: 'text'\n    },\n    wrapText: {\n      description: 'Wether or not wrap the entries in the dropdown or hide overflown text',\n    },\n    setValues: {\n      description: 'Function that runs when selecting values',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n  },\n  args: {\n    options: [\n      { value: 'feather', leftIcon: featherLogo },\n      { value: 'feather2', leftIcon: featherLogo },\n      {\n        value: 'feather3',\n        leftIcon: featherLogo,\n      },\n      {\n        value: 'dirtyswan',\n        leftIcon: featherLogo,\n      },\n      {\n        value: 'test value',\n        leftIcon: featherLogo,\n      },\n    ], \n    selectedValues:  [\n      { value: 'feather', leftIcon: featherLogo },\n      { value: 'feather2', leftIcon: featherLogo },\n    ],\n    placeholder: 'Placeholder',\n    chipsListClassName: '',\n    multiSelectClassName: '',\n    wrapText: false,\n  },\n  parameters: {\n    componentSubtitle: 'AutoSuggestMultiSelect is a combination of the AutoSuggestInput and Chip components',\n    docs: {\n      description: {\n        component: `This component allows quick search via the input field to find an option for selection.\n        \\nUpon selecting an option, the option is displayed above the input field as a chip.\n        \\nThe chip can be removed by clicking on the X button. Multi options can be selected as well.\n        \\nProp \\`setValues\\` function must be provided to keep track of removed and added option selections.`\n      },\n    },\n  },\n};\n\nexport const AutoSuggestMultiSelectStory = ({\n  options,\n  selectedValues,\n  setValues,\n  placeholder,\n  chipsListClassName,\n  multiSelectClassName,\n  wrapText,\n}: AutoSuggestMultiSelectProps) => {\n  const [values, setSelectedValues] = useState(selectedValues);\n\n  const handleSetValues = (options: Option[]) => {\n    setValues(options);\n    setSelectedValues(options);\n  }\n\n  return (\n    <div style={{ minHeight: '240px' }}>\n      <AutoSuggestMultiSelect\n       options={options}\n       selectedValues={values}\n       setValues={handleSetValues}\n       placeholder={placeholder}\n       chipsListClassName={chipsListClassName}\n       multiSelectClassName={multiSelectClassName}\n       wrapText={wrapText}\n      />\n    </div>\n  );\n};\n\nexport const OptionType = () => (\n  <pre>\n    {`interface Option {\n      value: string; // value of option to be stored and displayed on UI\n      leftIcon?: string; // image of the provided option to be displayed on UI\n}`}\n  </pre>\n)\n\nAutoSuggestMultiSelectStory.storyName = \"AutoSuggestMultiSelect\";\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;IAKM,KAAK,GAAG;IACZ,KAAK,EAAE,mCAAmC;IAC1C,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,WAAW,EAAE,8CAA8C;YAC3D,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,UAAU;iBACpB;aACF;SACF;QACD,cAAc,EAAE;YACd,WAAW,EAAE,6BAA6B;YAC1C,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,UAAU;iBACpB;aACF;SACF;QACD,WAAW,EAAE;YACX,WAAW,EAAE,2CAA2C;SACzD;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,8DAA8D;YAC3E,OAAO,EAAE,MAAM;SAChB;QACD,oBAAoB,EAAE;YACpB,WAAW,EAAE,0EAA0E;YACvF,OAAO,EAAE,MAAM;SAChB;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,uEAAuE;SACrF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,0CAA0C;YACvD,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE;YAC3C,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE;YAC5C;gBACE,KAAK,EAAE,UAAU;gBACjB,QAAQ,EAAE,WAAW;aACtB;YACD;gBACE,KAAK,EAAE,WAAW;gBAClB,QAAQ,EAAE,WAAW;aACtB;YACD;gBACE,KAAK,EAAE,YAAY;gBACnB,QAAQ,EAAE,WAAW;aACtB;SACF;QACD,cAAc,EAAG;YACf,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE;YAC3C,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE;SAC7C;QACD,WAAW,EAAE,aAAa;QAC1B,kBAAkB,EAAE,EAAE;QACtB,oBAAoB,EAAE,EAAE;QACxB,QAAQ,EAAE,KAAK;KAChB;IACD,UAAU,EAAE;QACV,iBAAiB,EAAE,qFAAqF;QACxG,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE,0YAG0F;aACtG;SACF;KACF;EACD;IAEW,2BAA2B,GAAG,UAAC,EAQd;QAP5B,OAAO,aAAA,EACP,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,kBAAkB,wBAAA,EAClB,oBAAoB,0BAAA,EACpB,QAAQ,cAAA;IAEF,IAAA,KAA8B,QAAQ,CAAC,cAAc,CAAC,EAArD,MAAM,QAAA,EAAE,iBAAiB,QAA4B,CAAC;IAE7D,IAAM,eAAe,GAAG,UAAC,OAAiB;QACxC,SAAS,CAAC,OAAO,CAAC,CAAC;QACnB,iBAAiB,CAAC,OAAO,CAAC,CAAC;KAC5B,CAAA;IAED,QACEA,aAAK,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,YAChCA,IAAC,sBAAsB,IACtB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,MAAM,EACtB,SAAS,EAAE,eAAe,EAC1B,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,oBAAoB,EAAE,oBAAoB,EAC1C,QAAQ,EAAE,QAAQ,GACjB,GACE,EACN;AACJ,EAAE;IAEW,UAAU,GAAG,cAAM,QAC9BA,uBACG,iLAGH,GACM,KACP;AAED,2BAA2B,CAAC,SAAS,GAAG,wBAAwB;;;;;"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/autoSuggestMultiSelect/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { AutoSuggestMultiSelect, AutoSuggestMultiSelectProps } from '.';\nimport { Option } from '../../../models/autoSuggestInput';\nimport featherLogo from '../../cards/icons/feather-logo.svg';\n\nconst story = {\n  title: 'JSX/Inputs/AutoSuggestMultiSelect',\n  subtitle: 'sgsg',\n  component: AutoSuggestMultiSelect,\n  argTypes: {\n    options: {\n      description: 'List of all options available to search from',\n      table: {\n        type: {\n          summary: 'Option[]',\n        },\n      },\n    },\n    selectedValues: {\n      description: 'List of all selected values',\n      table: {\n        type: {\n          summary: 'Option[]',\n        },\n      },\n    },\n    placeholder: {\n      description: 'Placeholder for DirtySwan Input component',\n    },\n    chipsListClassName: {\n      description:\n        'Class name for the most parent element of the Chip component',\n      control: 'text',\n    },\n    multiSelectClassName: {\n      description:\n        'Class name for the most parent element of the AutoSuggestInput component',\n      control: 'text',\n    },\n    wrapText: {\n      description:\n        'Wether or not wrap the entries in the dropdown or hide overflown text',\n    },\n    setValues: {\n      description: 'Function that runs when selecting values',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n  },\n  args: {\n    options: [\n      { value: 'feather', leftIcon: featherLogo },\n      { value: 'feather2', leftIcon: featherLogo },\n      {\n        value: 'feather3',\n        leftIcon: featherLogo,\n      },\n      {\n        value: 'dirtyswan',\n        leftIcon: featherLogo,\n      },\n      {\n        value: 'test value',\n        leftIcon: featherLogo,\n      },\n    ],\n    selectedValues: [\n      { value: 'feather', leftIcon: featherLogo },\n      { value: 'feather2', leftIcon: featherLogo },\n    ],\n    placeholder: 'Placeholder',\n    chipsListClassName: '',\n    multiSelectClassName: '',\n    wrapText: false,\n  },\n  parameters: {\n    componentSubtitle:\n      'AutoSuggestMultiSelect is a combination of the AutoSuggestInput and Chip components',\n    docs: {\n      description: {\n        component: `This component allows quick search via the input field to find an option for selection.\n        \\nUpon selecting an option, the option is displayed above the input field as a chip.\n        \\nThe chip can be removed by clicking on the X button. Multi options can be selected as well.\n        \\nProp \\`setValues\\` function must be provided to keep track of removed and added option selections.`,\n      },\n    },\n  },\n};\n\nexport const AutoSuggestMultiSelectStory = {\n  render: ({\n    options,\n    selectedValues,\n    setValues,\n    placeholder,\n    chipsListClassName,\n    multiSelectClassName,\n    wrapText,\n  }: AutoSuggestMultiSelectProps) => {\n    const [values, setSelectedValues] = useState(selectedValues);\n\n    const handleSetValues = (options: Option[]) => {\n      setValues(options);\n      setSelectedValues(options);\n    };\n\n    return (\n      <div style={{ minHeight: '240px' }}>\n        <AutoSuggestMultiSelect\n          options={options}\n          selectedValues={values}\n          setValues={handleSetValues}\n          placeholder={placeholder}\n          chipsListClassName={chipsListClassName}\n          multiSelectClassName={multiSelectClassName}\n          wrapText={wrapText}\n        />\n      </div>\n    );\n  },\n\n  name: 'AutoSuggestMultiSelect',\n};\n\nexport const OptionType = () => (\n  <pre>\n    {`interface Option {\n      value: string; // value of option to be stored and displayed on UI\n      leftIcon?: string; // image of the provided option to be displayed on UI\n}`}\n  </pre>\n);\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/input/checkbox/index.js

@@ -1,7 +1,8 @@
-import { _ as __spreadArray } from '../../../tslib.es6-a39f91fc.js';
+import { d as __spreadArray } from '../../../tslib.es6-CVlKGIvp.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { c as classNames } from '../../../index-6ea95111.js';
-import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
+import { c as classNames } from '../../../index-DLQEsiym.js';
+import { s as styleInject } from '../../../style-inject.es-tgCJW-Cu.js';
+import '../../../_commonjsHelpers-BFTU3MAI.js';
 
 var css_248z = ".styles-module_container__3zJJC {\n  max-width: 100%;\n}\n\n.styles-module_narrow__2p34b {\n  max-width: 424px;\n}";
 var styles = {"container":"styles-module_container__3zJJC","narrow":"styles-module_narrow__2p34b"};

package/dist/esm/components/input/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/checkbox/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nexport interface CheckboxWithDescription {\n  title: ReactNode;\n  description?: string;\n  icon?: (selected: boolean) => ReactNode;\n}\n\nexport interface CheckboxProps<ValueType extends string> {\n  options: Record<ValueType, ReactNode | CheckboxWithDescription>;\n  value?: ValueType[];\n  onChange: (value: ValueType[]) => void;\n  wide?: boolean;\n  inlineLayout?: boolean;\n  bordered?: Boolean;\n  classNames?: {\n    container?: string;\n    label?: string;\n    option?: string;\n  };\n  fieldLegend?: string;\n}\n\nexport const Checkbox = <ValueType extends string>({\n  options,\n  value = [],\n  onChange,\n  wide = false,\n  inlineLayout = false,\n  bordered = true,\n  classNames: classNamesObj,\n  fieldLegend,\n}: CheckboxProps<ValueType> & {}) => {\n  const hasNoneValue = Object.keys(options).includes('NONE');\n\n  const handleOnChange = (newValue: ValueType) => {\n    if (value?.includes(newValue)) {\n      const filteredCheckboxValues = value.filter(\n        (selectedValue) => selectedValue !== newValue\n      );\n\n      onChange(filteredCheckboxValues);\n      return;\n    }\n\n    if (hasNoneValue && newValue === 'NONE') {\n      onChange([newValue]);\n      return;\n    }\n\n    if (hasNoneValue && newValue !== 'NONE') {\n      const newValues = value\n        ? [...value.filter((v) => v !== 'NONE'), newValue]\n        : [newValue];\n      onChange(newValues);\n      return;\n    }\n\n    const newValues = value ? [...value, newValue] : [newValue];\n    onChange(newValues);\n  };\n\n  const entries = Object.entries(options) as [\n    ValueType,\n    ReactNode | CheckboxWithDescription\n  ][];\n\n  const isCheckboxLabelObject = (\n    label: ReactNode | CheckboxWithDescription\n  ): label is CheckboxWithDescription => {\n    return (label as CheckboxWithDescription).title !== undefined;\n  };\n\n  const legend =\n    fieldLegend ??\n    (Object.keys(options).length > 1\n      ? 'Select one or more options'\n      : 'You may select this option');\n\n  return (\n    <fieldset\n      className={classNames(\n        classNamesObj?.container,\n        styles.container,\n        'd-flex gap8',\n        {\n          [styles.narrow]: !wide,\n          'fd-row': inlineLayout,\n          'f-wrap': inlineLayout,\n          'fd-column': !inlineLayout,\n        }\n      )}\n    >\n      <legend className=\"sr-only\">{legend}</legend>\n      {entries.map(([currentValue, label]) => {\n        const checked = value?.includes(currentValue);\n        const customIcon = (label as CheckboxWithDescription)?.icon;\n\n        return (\n          <div className={classNamesObj?.option} key={currentValue}>\n            <input\n              className={classNames('p-checkbox', {\n                'p-checkbox--no-icon': customIcon,\n              })}\n              id={currentValue}\n              type=\"checkbox\"\n              value={currentValue}\n              onChange={() => handleOnChange(currentValue)}\n              checked={checked}\n              data-testid={`checkbox-input-${currentValue}`}\n            />\n\n            <label\n              htmlFor={currentValue}\n              className={classNames(classNamesObj?.label, 'p-label pr16', {\n                'p-label--bordered': bordered,\n                'jc-center': customIcon,\n                'fd-column': customIcon,\n              })}\n              data-cy={`checkbox-${currentValue}`}\n              data-testid={`checkbox-${currentValue}`}\n            >\n              {customIcon && <div className=\"mt8\">{customIcon?.(checked)}</div>}\n\n              {isCheckboxLabelObject(label) ? (\n                <div>\n                  <p className=\"p-p\">{label.title}</p>\n                  <span className=\"d-block p-p p-p--small tc-neutral-700\">\n                    {label.description}\n                  </span>\n                </div>\n              ) : (\n                label\n              )}\n            </label>\n          </div>\n        );\n      })}\n    </fieldset>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/checkbox/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nexport interface CheckboxWithDescription {\n  title: ReactNode;\n  description?: string;\n  icon?: (selected: boolean) => ReactNode;\n}\n\nexport interface CheckboxProps<ValueType extends string> {\n  options: Record<ValueType, ReactNode | CheckboxWithDescription>;\n  value?: ValueType[];\n  onChange: (value: ValueType[]) => void;\n  wide?: boolean;\n  inlineLayout?: boolean;\n  bordered?: Boolean;\n  classNames?: {\n    container?: string;\n    label?: string;\n    option?: string;\n  };\n  fieldLegend?: string;\n}\n\nexport const Checkbox = <ValueType extends string>({\n  options,\n  value = [],\n  onChange,\n  wide = false,\n  inlineLayout = false,\n  bordered = true,\n  classNames: classNamesObj,\n  fieldLegend,\n}: CheckboxProps<ValueType> & {}) => {\n  const hasNoneValue = Object.keys(options).includes('NONE');\n\n  const handleOnChange = (newValue: ValueType) => {\n    if (value?.includes(newValue)) {\n      const filteredCheckboxValues = value.filter(\n        (selectedValue) => selectedValue !== newValue\n      );\n\n      onChange(filteredCheckboxValues);\n      return;\n    }\n\n    if (hasNoneValue && newValue === 'NONE') {\n      onChange([newValue]);\n      return;\n    }\n\n    if (hasNoneValue && newValue !== 'NONE') {\n      const newValues = value\n        ? [...value.filter((v) => v !== 'NONE'), newValue]\n        : [newValue];\n      onChange(newValues);\n      return;\n    }\n\n    const newValues = value ? [...value, newValue] : [newValue];\n    onChange(newValues);\n  };\n\n  const entries = Object.entries(options) as [\n    ValueType,\n    ReactNode | CheckboxWithDescription\n  ][];\n\n  const isCheckboxLabelObject = (\n    label: ReactNode | CheckboxWithDescription\n  ): label is CheckboxWithDescription => {\n    return (label as CheckboxWithDescription).title !== undefined;\n  };\n\n  const legend =\n    fieldLegend ??\n    (Object.keys(options).length > 1\n      ? 'Select one or more options'\n      : 'You may select this option');\n\n  return (\n    <fieldset\n      className={classNames(\n        classNamesObj?.container,\n        styles.container,\n        'd-flex gap8',\n        {\n          [styles.narrow]: !wide,\n          'fd-row': inlineLayout,\n          'f-wrap': inlineLayout,\n          'fd-column': !inlineLayout,\n        }\n      )}\n    >\n      <legend className=\"sr-only\">{legend}</legend>\n      {entries.map(([currentValue, label]) => {\n        const checked = value?.includes(currentValue);\n        const customIcon = (label as CheckboxWithDescription)?.icon;\n\n        return (\n          <div className={classNamesObj?.option} key={currentValue}>\n            <input\n              className={classNames('p-checkbox', {\n                'p-checkbox--no-icon': customIcon,\n              })}\n              id={currentValue}\n              type=\"checkbox\"\n              value={currentValue}\n              onChange={() => handleOnChange(currentValue)}\n              checked={checked}\n              data-testid={`checkbox-input-${currentValue}`}\n            />\n\n            <label\n              htmlFor={currentValue}\n              className={classNames(classNamesObj?.label, 'p-label pr16', {\n                'p-label--bordered': bordered,\n                'jc-center': customIcon,\n                'fd-column': customIcon,\n              })}\n              data-cy={`checkbox-${currentValue}`}\n              data-testid={`checkbox-${currentValue}`}\n            >\n              {customIcon && <div className=\"mt8\">{customIcon?.(checked)}</div>}\n\n              {isCheckboxLabelObject(label) ? (\n                <div>\n                  <p className=\"p-p\">{label.title}</p>\n                  <span className=\"d-block p-p p-p--small tc-neutral-700\">\n                    {label.description}\n                  </span>\n                </div>\n              ) : (\n                label\n              )}\n            </label>\n          </div>\n        );\n      })}\n    </fieldset>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/input/checkbox/index.stories.js

@@ -1,10 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Checkbox } from './index.js';
-import { a as images } from '../../../index-29e6f39e.js';
-import '../../../tslib.es6-a39f91fc.js';
-import '../../../index-6ea95111.js';
-import '../../../style-inject.es-1f59c1d0.js';
+import { i as images } from '../../../index-C4hs4X-e.js';
+import '../../../tslib.es6-CVlKGIvp.js';
+import '../../../index-DLQEsiym.js';
+import '../../../_commonjsHelpers-BFTU3MAI.js';
+import '../../../style-inject.es-tgCJW-Cu.js';
 
 var story = {
     title: 'JSX/Inputs/Checkbox',
@@ -69,96 +70,107 @@ var story = {
         className: '',
     },
 };
-var CheckboxStory = function (_a) {
-    var onChange = _a.onChange, options = _a.options, wide = _a.wide, bordered = _a.bordered, classNames = _a.classNames, inlineLayout = _a.inlineLayout, fieldLegend = _a.fieldLegend;
-    var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
-    var handleOnChange = function (newValue) {
-        setCheckedValues(newValue);
-        onChange(newValue);
-    };
-    return (jsx(Checkbox, { wide: wide, options: options, onChange: handleOnChange, value: checkedValues, bordered: bordered, classNames: classNames, inlineLayout: inlineLayout, fieldLegend: fieldLegend }));
+var CheckboxStory = {
+    render: function (_a) {
+        var onChange = _a.onChange, options = _a.options, wide = _a.wide, bordered = _a.bordered, classNames = _a.classNames, inlineLayout = _a.inlineLayout, fieldLegend = _a.fieldLegend;
+        var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
+        var handleOnChange = function (newValue) {
+            setCheckedValues(newValue);
+            onChange(newValue);
+        };
+        return (jsx(Checkbox, { wide: wide, options: options, onChange: handleOnChange, value: checkedValues, bordered: bordered, classNames: classNames, inlineLayout: inlineLayout, fieldLegend: fieldLegend }));
+    },
+    name: 'Checkbox',
 };
-var CheckboxWithCustomWrapperStyles = function (_a) {
-    var onChange = _a.onChange;
-    var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
-    var handleOnChange = function (newValue) {
-        if (newValue === void 0) { newValue = []; }
-        setCheckedValues(newValue);
-        onChange(newValue);
-    };
-    return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
-            CAT1: 'Cat',
-            DOG1: 'Dog',
-        }, classNames: { container: 'p32 bg-purple-500 br24 bs-lg' } }));
+var CheckboxWithCustomWrapperStyles = {
+    render: function (_a) {
+        var onChange = _a.onChange;
+        var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
+        var handleOnChange = function (newValue) {
+            if (newValue === void 0) { newValue = []; }
+            setCheckedValues(newValue);
+            onChange(newValue);
+        };
+        return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
+                CAT1: 'Cat',
+                DOG1: 'Dog',
+            }, classNames: { container: 'p32 bg-purple-500 br24 bs-lg' } }));
+    },
 };
-var CheckboxWithCustomOptionStyles = function (_a) {
-    var onChange = _a.onChange;
-    var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
-    var handleOnChange = function (newValue) {
-        if (newValue === void 0) { newValue = []; }
-        setCheckedValues(newValue);
-        onChange(newValue);
-    };
-    return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
-            CAT2: 'Cat',
-            DOG2: 'Dog',
-        }, classNames: { option: 'mb32 p24 bg-green-100 br12 bs-lg' } }));
+var CheckboxWithCustomOptionStyles = {
+    render: function (_a) {
+        var onChange = _a.onChange;
+        var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
+        var handleOnChange = function (newValue) {
+            if (newValue === void 0) { newValue = []; }
+            setCheckedValues(newValue);
+            onChange(newValue);
+        };
+        return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
+                CAT2: 'Cat',
+                DOG2: 'Dog',
+            }, classNames: { option: 'mb32 p24 bg-green-100 br12 bs-lg' } }));
+    },
 };
-var CheckboxWithCustomLabelStyles = function (_a) {
-    var onChange = _a.onChange;
-    var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
-    var handleOnChange = function (newValue) {
-        if (newValue === void 0) { newValue = []; }
-        setCheckedValues(newValue);
-        onChange(newValue);
-    };
-    return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
-            CAT3: 'Cat',
-            DOG3: 'Dog',
-        }, classNames: { label: 'bg-neutral-900 tc-white' } }));
+var CheckboxWithCustomLabelStyles = {
+    render: function (_a) {
+        var onChange = _a.onChange;
+        var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
+        var handleOnChange = function (newValue) {
+            if (newValue === void 0) { newValue = []; }
+            setCheckedValues(newValue);
+            onChange(newValue);
+        };
+        return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
+                CAT3: 'Cat',
+                DOG3: 'Dog',
+            }, classNames: { label: 'bg-neutral-900 tc-white' } }));
+    },
 };
-var CheckboxWithInlineLayout = function (_a) {
-    var onChange = _a.onChange;
-    var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
-    var handleOnChange = function (newValue) {
-        if (newValue === void 0) { newValue = []; }
-        setCheckedValues(newValue);
-        onChange(newValue);
-    };
-    return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
-            CAT4: 'Cat',
-            DOG4: 'Dog',
-            FISHER: 'Fish',
-            RABBIT: 'Rabbit',
-            RAT: 'Rat',
-            ANOTHER: 'Other',
-        }, classNames: { option: 'w30' }, inlineLayout: true, wide: true }));
+var CheckboxWithInlineLayout = {
+    render: function (_a) {
+        var onChange = _a.onChange;
+        var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
+        var handleOnChange = function (newValue) {
+            if (newValue === void 0) { newValue = []; }
+            setCheckedValues(newValue);
+            onChange(newValue);
+        };
+        return (jsx(Checkbox, { onChange: handleOnChange, value: checkedValues, options: {
+                CAT4: 'Cat',
+                DOG4: 'Dog',
+                FISHER: 'Fish',
+                RABBIT: 'Rabbit',
+                RAT: 'Rat',
+                ANOTHER: 'Other',
+            }, classNames: { option: 'w30' }, inlineLayout: true, wide: true }));
+    },
 };
-var CheckboxWithCustomLabel = function (_a) {
-    var onChange = _a.onChange; _a.wide; _a.classNames; _a.inlineLayout;
-    var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
-    var handleOnChange = function (newValue) {
-        if (newValue === void 0) { newValue = []; }
-        setCheckedValues(newValue);
-        onChange(newValue);
-    };
-    return (jsx(Checkbox, { options: {
-            BIGDOG: {
-                icon: function () { return jsx("img", { src: images.bigDog, alt: "" }); },
-                title: 'Dog',
-            },
-            FISH: {
-                icon: function () { return jsx("img", { src: images.brokenAquarium, alt: "" }); },
-                title: 'Fish',
-            },
-            OTHER: {
-                icon: function () { return jsx("img", { src: images.brokenGlass, alt: "" }); },
-                title: 'Other',
-            },
-        }, onChange: handleOnChange, value: checkedValues, classNames: { option: 'w30' }, inlineLayout: true }));
+var CheckboxWithCustomLabel = {
+    render: function (_a) {
+        var onChange = _a.onChange; _a.wide; _a.classNames; _a.inlineLayout;
+        var _b = useState([]), checkedValues = _b[0], setCheckedValues = _b[1];
+        var handleOnChange = function (newValue) {
+            if (newValue === void 0) { newValue = []; }
+            setCheckedValues(newValue);
+            onChange(newValue);
+        };
+        return (jsx(Checkbox, { options: {
+                BIGDOG: {
+                    icon: function () { return jsx("img", { src: images.bigDog, alt: "" }); },
+                    title: 'Dog',
+                },
+                FISH: {
+                    icon: function () { return jsx("img", { src: images.brokenAquarium, alt: "" }); },
+                    title: 'Fish',
+                },
+                OTHER: {
+                    icon: function () { return jsx("img", { src: images.brokenGlass, alt: "" }); },
+                    title: 'Other',
+                },
+            }, onChange: handleOnChange, value: checkedValues, classNames: { option: 'w30' }, inlineLayout: true }));
+    },
 };
-CheckboxStory.storyName = 'Checkbox';
 
-export default story;
-export { CheckboxStory, CheckboxWithCustomLabel, CheckboxWithCustomLabelStyles, CheckboxWithCustomOptionStyles, CheckboxWithCustomWrapperStyles, CheckboxWithInlineLayout };
+export { CheckboxStory, CheckboxWithCustomLabel, CheckboxWithCustomLabelStyles, CheckboxWithCustomOptionStyles, CheckboxWithCustomWrapperStyles, CheckboxWithInlineLayout, story as default };
 //# sourceMappingURL=index.stories.js.map

package/dist/esm/components/input/checkbox/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/checkbox/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Checkbox, CheckboxProps } from '.';\nimport { images } from '../../../util/images';\nimport classNames from 'classnames';\n\nconst story = {\n  title: 'JSX/Inputs/Checkbox',\n  component: Checkbox,\n  argTypes: {\n    options: {\n      description:\n        'Object that contains the possible options for rendering in the input.',\n    },\n    value: {\n      description: 'Current checked values.',\n    },\n    fieldLegend: {\n      description:\n        'Accessibility property that describes the purpose of a group of checkbox buttons, read aloud by screen readers to provide context.',\n    },\n    onChange: {\n      description: 'Function called everytime a value changes.',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    wide: {\n      description:\n        'Property that defines if options should fill 100% of available horizontal space',\n      defaultValue: false,\n    },\n    bordered: {\n      control: 'boolean',\n      description:\n        'Property that defines if checkbox should show the border around each label',\n    },\n    inlineLayout: {\n      description:\n        'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',\n    },\n    className: {\n      description: 'ClassNames for custom styling',\n    },\n  },\n  args: {\n    options: {\n      CAT: {\n        title: 'Cat',\n        description: 'At least 1',\n      },\n      DOG: {\n        title: 'Dog',\n        description: 'At least 2',\n      },\n      NONE: {\n        title: 'None',\n        description: 'No pets',\n      },\n    },\n    fieldLegend: 'Owned pets',\n    wide: false,\n    bordered: true,\n    inlineLayout: false,\n    classNames: {\n      container: '',\n      label: '',\n      option: '',\n    },\n    value: [],\n    className: '',\n  },\n};\n\nexport const CheckboxStory = ({\n  onChange,\n  options,\n  wide,\n  bordered,\n  classNames,\n  inlineLayout,\n  fieldLegend,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[]) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      wide={wide}\n      options={options}\n      onChange={handleOnChange}\n      value={checkedValues}\n      bordered={bordered}\n      classNames={classNames}\n      inlineLayout={inlineLayout}\n      fieldLegend={fieldLegend}\n    />\n  );\n};\n\nexport const CheckboxWithCustomWrapperStyles = ({\n  onChange,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT1: 'Cat',\n        DOG1: 'Dog',\n      }}\n      classNames={{ container: 'p32 bg-purple-500 br24 bs-lg' }}\n    />\n  );\n};\n\nexport const CheckboxWithCustomOptionStyles = ({\n  onChange,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT2: 'Cat',\n        DOG2: 'Dog',\n      }}\n      classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}\n    />\n  );\n};\n\nexport const CheckboxWithCustomLabelStyles = ({\n  onChange,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT3: 'Cat',\n        DOG3: 'Dog',\n      }}\n      classNames={{ label: 'bg-neutral-900 tc-white' }}\n    />\n  );\n};\n\nexport const CheckboxWithInlineLayout = ({\n  onChange,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT4: 'Cat',\n        DOG4: 'Dog',\n        FISHER: 'Fish',\n        RABBIT: 'Rabbit',\n        RAT: 'Rat',\n        ANOTHER: 'Other',\n      }}\n      classNames={{ option: 'w30' }}\n      inlineLayout\n      wide\n    />\n  );\n};\n\nexport const CheckboxWithCustomLabel = ({\n  onChange,\n  wide,\n  classNames,\n  inlineLayout,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  };\n\n  return (\n    <Checkbox\n      options={{\n        BIGDOG: {\n          icon: () => <img src={images.bigDog} alt=\"\" />,\n          title: 'Dog',\n        },\n        FISH: {\n          icon: () => <img src={images.brokenAquarium} alt=\"\" />,\n          title: 'Fish',\n        },\n        OTHER: {\n          icon: () => <img src={images.brokenGlass} alt=\"\" />,\n          title: 'Other',\n        },\n      }}\n      onChange={handleOnChange}\n      value={checkedValues}\n      classNames={{ option: 'w30' }}\n      inlineLayout\n    />\n  );\n};\n\nCheckboxStory.storyName = 'Checkbox';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/checkbox/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Checkbox, CheckboxProps } from '.';\nimport { images } from '../../../util/images';\nimport classNames from 'classnames';\n\nconst story = {\n  title: 'JSX/Inputs/Checkbox',\n  component: Checkbox,\n  argTypes: {\n    options: {\n      description:\n        'Object that contains the possible options for rendering in the input.',\n    },\n    value: {\n      description: 'Current checked values.',\n    },\n    fieldLegend: {\n      description:\n        'Accessibility property that describes the purpose of a group of checkbox buttons, read aloud by screen readers to provide context.',\n    },\n    onChange: {\n      description: 'Function called everytime a value changes.',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    wide: {\n      description:\n        'Property that defines if options should fill 100% of available horizontal space',\n      defaultValue: false,\n    },\n    bordered: {\n      control: 'boolean',\n      description:\n        'Property that defines if checkbox should show the border around each label',\n    },\n    inlineLayout: {\n      description:\n        'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',\n    },\n    className: {\n      description: 'ClassNames for custom styling',\n    },\n  },\n  args: {\n    options: {\n      CAT: {\n        title: 'Cat',\n        description: 'At least 1',\n      },\n      DOG: {\n        title: 'Dog',\n        description: 'At least 2',\n      },\n      NONE: {\n        title: 'None',\n        description: 'No pets',\n      },\n    },\n    fieldLegend: 'Owned pets',\n    wide: false,\n    bordered: true,\n    inlineLayout: false,\n    classNames: {\n      container: '',\n      label: '',\n      option: '',\n    },\n    value: [],\n    className: '',\n  },\n};\n\nexport const CheckboxStory = {\n  render: ({\n    onChange,\n    options,\n    wide,\n    bordered,\n    classNames,\n    inlineLayout,\n    fieldLegend,\n  }: CheckboxProps<string>) => {\n    const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n    const handleOnChange = (newValue: string[]) => {\n      setCheckedValues(newValue);\n      onChange(newValue);\n    };\n\n    return (\n      <Checkbox\n        wide={wide}\n        options={options}\n        onChange={handleOnChange}\n        value={checkedValues}\n        bordered={bordered}\n        classNames={classNames}\n        inlineLayout={inlineLayout}\n        fieldLegend={fieldLegend}\n      />\n    );\n  },\n\n  name: 'Checkbox',\n};\n\nexport const CheckboxWithCustomWrapperStyles = {\n  render: ({ onChange }: CheckboxProps<string>) => {\n    const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n    const handleOnChange = (newValue: string[] = []) => {\n      setCheckedValues(newValue);\n      onChange(newValue);\n    };\n\n    return (\n      <Checkbox\n        onChange={handleOnChange}\n        value={checkedValues}\n        options={{\n          CAT1: 'Cat',\n          DOG1: 'Dog',\n        }}\n        classNames={{ container: 'p32 bg-purple-500 br24 bs-lg' }}\n      />\n    );\n  },\n};\n\nexport const CheckboxWithCustomOptionStyles = {\n  render: ({ onChange }: CheckboxProps<string>) => {\n    const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n    const handleOnChange = (newValue: string[] = []) => {\n      setCheckedValues(newValue);\n      onChange(newValue);\n    };\n\n    return (\n      <Checkbox\n        onChange={handleOnChange}\n        value={checkedValues}\n        options={{\n          CAT2: 'Cat',\n          DOG2: 'Dog',\n        }}\n        classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}\n      />\n    );\n  },\n};\n\nexport const CheckboxWithCustomLabelStyles = {\n  render: ({ onChange }: CheckboxProps<string>) => {\n    const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n    const handleOnChange = (newValue: string[] = []) => {\n      setCheckedValues(newValue);\n      onChange(newValue);\n    };\n\n    return (\n      <Checkbox\n        onChange={handleOnChange}\n        value={checkedValues}\n        options={{\n          CAT3: 'Cat',\n          DOG3: 'Dog',\n        }}\n        classNames={{ label: 'bg-neutral-900 tc-white' }}\n      />\n    );\n  },\n};\n\nexport const CheckboxWithInlineLayout = {\n  render: ({ onChange }: CheckboxProps<string>) => {\n    const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n    const handleOnChange = (newValue: string[] = []) => {\n      setCheckedValues(newValue);\n      onChange(newValue);\n    };\n\n    return (\n      <Checkbox\n        onChange={handleOnChange}\n        value={checkedValues}\n        options={{\n          CAT4: 'Cat',\n          DOG4: 'Dog',\n          FISHER: 'Fish',\n          RABBIT: 'Rabbit',\n          RAT: 'Rat',\n          ANOTHER: 'Other',\n        }}\n        classNames={{ option: 'w30' }}\n        inlineLayout\n        wide\n      />\n    );\n  },\n};\n\nexport const CheckboxWithCustomLabel = {\n  render: ({\n    onChange,\n    wide,\n    classNames,\n    inlineLayout,\n  }: CheckboxProps<string>) => {\n    const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n    const handleOnChange = (newValue: string[] = []) => {\n      setCheckedValues(newValue);\n      onChange(newValue);\n    };\n\n    return (\n      <Checkbox\n        options={{\n          BIGDOG: {\n            icon: () => <img src={images.bigDog} alt=\"\" />,\n            title: 'Dog',\n          },\n          FISH: {\n            icon: () => <img src={images.brokenAquarium} alt=\"\" />,\n            title: 'Fish',\n          },\n          OTHER: {\n            icon: () => <img src={images.brokenGlass} alt=\"\" />,\n            title: 'Other',\n          },\n        }}\n        onChange={handleOnChange}\n        value={checkedValues}\n        classNames={{ option: 'w30' }}\n        inlineLayout\n      />\n    );\n  },\n};\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}