@popsure/dirty-swan 0.55.3 → 0.56.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (119) hide show
  1. package/dist/cjs/index.d.ts +2 -2
  2. package/dist/cjs/index.js +2688 -882
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/lib/components/modal/fullScreenModal/index.d.ts +3 -0
  5. package/dist/cjs/lib/components/modal/index.d.ts +2 -1
  6. package/dist/cjs/lib/components/modal/index.stories.d.ts +4 -0
  7. package/dist/cjs/lib/hooks/useEscapeKey.d.ts +1 -0
  8. package/dist/cjs/lib/hooks/useFocusWithin.d.ts +1 -0
  9. package/dist/cjs/lib/index.d.ts +4 -2
  10. package/dist/esm/{Calendar-3239814b.js → Calendar-d39056f4.js} +9 -9
  11. package/dist/esm/{Calendar-3239814b.js.map → Calendar-d39056f4.js.map} +1 -1
  12. package/dist/esm/{TableSection-a1be2bd3.js → TableSection-24337bc7.js} +1 -1
  13. package/dist/esm/{TableSection-a1be2bd3.js.map → TableSection-24337bc7.js.map} +1 -1
  14. package/dist/esm/components/accordion/index.js +1 -1
  15. package/dist/esm/components/accordion/index.stories.js +1 -1
  16. package/dist/esm/components/autocompleteAddress/index.test.js +1 -1
  17. package/dist/esm/components/badge/index.test.js +1 -1
  18. package/dist/esm/components/button/index.js +4 -4
  19. package/dist/esm/components/button/index.js.map +1 -1
  20. package/dist/esm/components/button/index.test.js +1 -1
  21. package/dist/esm/components/comparisonTable/components/AccordionItem/AccordionItem.js +1 -1
  22. package/dist/esm/components/comparisonTable/components/AccordionItem/index.js +1 -1
  23. package/dist/esm/components/comparisonTable/components/Row/index.js +2 -2
  24. package/dist/esm/components/comparisonTable/components/Row/index.js.map +1 -1
  25. package/dist/esm/components/comparisonTable/components/TableButton/index.test.js +2 -2
  26. package/dist/esm/components/comparisonTable/components/TableRowHeader/index.test.js +2 -2
  27. package/dist/esm/components/comparisonTable/index.js +2 -2
  28. package/dist/esm/components/comparisonTable/index.stories.js +2 -2
  29. package/dist/esm/components/dateSelector/components/Calendar.js +1 -1
  30. package/dist/esm/components/dateSelector/index.js +1 -1
  31. package/dist/esm/components/dateSelector/index.stories.js +1 -1
  32. package/dist/esm/components/dateSelector/index.test.js +2 -2
  33. package/dist/esm/components/informationBox/index.test.js +1 -1
  34. package/dist/esm/components/input/autoSuggestInput/index.js +8 -998
  35. package/dist/esm/components/input/autoSuggestInput/index.js.map +1 -1
  36. package/dist/esm/components/input/autoSuggestInput/index.stories.js +1 -0
  37. package/dist/esm/components/input/autoSuggestInput/index.stories.js.map +1 -1
  38. package/dist/esm/components/input/autoSuggestMultiSelect/index.js +1 -0
  39. package/dist/esm/components/input/autoSuggestMultiSelect/index.js.map +1 -1
  40. package/dist/esm/components/input/autoSuggestMultiSelect/index.stories.js +1 -0
  41. package/dist/esm/components/input/autoSuggestMultiSelect/index.stories.js.map +1 -1
  42. package/dist/esm/components/input/checkbox/index.test.js +1 -1
  43. package/dist/esm/components/input/currency/index.test.js +1 -1
  44. package/dist/esm/components/input/index.js +2 -2
  45. package/dist/esm/components/input/index.js.map +1 -1
  46. package/dist/esm/components/input/radio/index.test.js +1 -1
  47. package/dist/esm/components/input/toggle/index.test.js +1 -1
  48. package/dist/esm/components/modal/bottomModal/index.js +2 -0
  49. package/dist/esm/components/modal/bottomModal/index.js.map +1 -1
  50. package/dist/esm/components/modal/bottomOrRegularModal/index.js +2 -0
  51. package/dist/esm/components/modal/bottomOrRegularModal/index.js.map +1 -1
  52. package/dist/esm/components/modal/fullScreenModal/index.js +33 -0
  53. package/dist/esm/components/modal/fullScreenModal/index.js.map +1 -0
  54. package/dist/esm/components/modal/genericModal/index.js +1751 -13
  55. package/dist/esm/components/modal/genericModal/index.js.map +1 -1
  56. package/dist/esm/components/modal/index.stories.js +20 -7
  57. package/dist/esm/components/modal/index.stories.js.map +1 -1
  58. package/dist/esm/components/modal/regularModal/index.js +2 -0
  59. package/dist/esm/components/modal/regularModal/index.js.map +1 -1
  60. package/dist/esm/components/multiDropzone/index.js +3 -3
  61. package/dist/esm/components/multiDropzone/index.js.map +1 -1
  62. package/dist/esm/components/multiDropzone/index.stories.js +1 -1
  63. package/dist/esm/components/multiDropzone/index.test.js +3 -3
  64. package/dist/esm/components/segmentedControl/index.test.js +1 -1
  65. package/dist/esm/components/signaturePad/index.js +2 -2
  66. package/dist/esm/components/signaturePad/index.js.map +1 -1
  67. package/dist/esm/components/spinner/index.test.js +1 -1
  68. package/dist/esm/components/table/Table.js +4 -2
  69. package/dist/esm/components/table/Table.js.map +1 -1
  70. package/dist/esm/components/table/Table.stories.js +4 -2
  71. package/dist/esm/components/table/Table.stories.js.map +1 -1
  72. package/dist/esm/components/table/Table.test.js +5 -3
  73. package/dist/esm/components/table/Table.test.js.map +1 -1
  74. package/dist/esm/components/table/components/TableCell/BaseCell/BaseCell.js +1 -1
  75. package/dist/esm/components/table/components/TableCell/BaseCell/BaseCell.stories.js +1 -1
  76. package/dist/esm/components/table/components/TableCell/TableCell.js +3 -3
  77. package/dist/esm/components/table/components/TableCell/TableCell.js.map +1 -1
  78. package/dist/esm/components/table/components/TableCell/TableCell.test.js +2 -2
  79. package/dist/esm/components/table/components/TableContents/TableContents.js +2 -2
  80. package/dist/esm/components/table/components/TableContents/TableContents.test.js +3 -3
  81. package/dist/esm/components/table/components/TableControls/TableControls.test.js +1 -1
  82. package/dist/esm/components/table/components/TableSection/TableSection.js +2 -2
  83. package/dist/esm/components/table/components/TableSection/TableSection.test.js +3 -3
  84. package/dist/esm/components/toast/index.js +1 -1
  85. package/dist/esm/components/toast/index.stories.js +1 -1
  86. package/dist/esm/components/toast/index.test.js +2 -2
  87. package/dist/esm/{customRender-d03c10b6.js → customRender-be47569b.js} +4 -4
  88. package/dist/esm/{customRender-d03c10b6.js.map → customRender-be47569b.js.map} +1 -1
  89. package/dist/esm/index-171a0108.js +997 -0
  90. package/dist/esm/index-171a0108.js.map +1 -0
  91. package/dist/esm/{index-3aa7e697.js → index-4b19aafb.js} +4 -4
  92. package/dist/esm/{index-3aa7e697.js.map → index-4b19aafb.js.map} +1 -1
  93. package/dist/esm/{index-6f567b0b.js → index-86558de6.js} +2 -2
  94. package/dist/esm/{index-6f567b0b.js.map → index-86558de6.js.map} +1 -1
  95. package/dist/esm/{index-3d286178.js → index-af1860d8.js} +3 -3
  96. package/dist/esm/{index-3d286178.js.map → index-af1860d8.js.map} +1 -1
  97. package/dist/esm/{index-a0ef2ab4.js → index-e27b50cf.js} +4 -4
  98. package/dist/esm/{index-a0ef2ab4.js.map → index-e27b50cf.js.map} +1 -1
  99. package/dist/esm/index.d.ts +2 -2
  100. package/dist/esm/index.js +36 -6
  101. package/dist/esm/index.js.map +1 -1
  102. package/dist/esm/lib/components/modal/fullScreenModal/index.d.ts +3 -0
  103. package/dist/esm/lib/components/modal/index.d.ts +2 -1
  104. package/dist/esm/lib/components/modal/index.stories.d.ts +4 -0
  105. package/dist/esm/lib/hooks/useEscapeKey.d.ts +1 -0
  106. package/dist/esm/lib/hooks/useFocusWithin.d.ts +1 -0
  107. package/dist/esm/lib/index.d.ts +4 -2
  108. package/dist/esm/util/testUtils/customRender.js +1 -1
  109. package/package.json +2 -1
  110. package/src/index.tsx +4 -1
  111. package/src/lib/components/modal/fullScreenModal/index.tsx +24 -0
  112. package/src/lib/components/modal/fullScreenModal/style.module.scss +49 -0
  113. package/src/lib/components/modal/genericModal/index.tsx +71 -78
  114. package/src/lib/components/modal/hooks/useOnClose.ts +10 -8
  115. package/src/lib/components/modal/index.stories.tsx +54 -6
  116. package/src/lib/components/modal/index.ts +2 -1
  117. package/src/lib/hooks/useEscapeKey.ts +18 -0
  118. package/src/lib/hooks/useFocusWithin.ts +22 -0
  119. package/src/lib/index.tsx +6 -0
@@ -4,6 +4,7 @@ import { useState } from 'react';
4
4
  import { AutoSuggestInput } from './index.js';
5
5
  import { f as featherLogo } from '../../../feather-logo-a3f07990.js';
6
6
  import '../../../index-6ea95111.js';
7
+ import '../../../index-171a0108.js';
7
8
  import '../../../index-dd80248b.js';
8
9
  import '../../../style-inject.es-1f59c1d0.js';
9
10
  import '../index.js';
@@ -1 +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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"}
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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"}
@@ -7,6 +7,7 @@ import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
7
7
  import { c as classNames } from '../../../index-6ea95111.js';
8
8
  import '../../icon/icons/X.js';
9
9
  import '../../icon/IconWrapper/IconWrapper.js';
10
+ import '../../../index-171a0108.js';
10
11
  import '../../../index-dd80248b.js';
11
12
  import '../index.js';
12
13
  import '../../../index-69a46657.js';
@@ -1 +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;;;;"}
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;;;;"}
@@ -9,6 +9,7 @@ import '../../icon/IconWrapper/IconWrapper.js';
9
9
  import '../../../index-6ea95111.js';
10
10
  import '../../../style-inject.es-1f59c1d0.js';
11
11
  import '../autoSuggestInput/index.js';
12
+ import '../../../index-171a0108.js';
12
13
  import '../../../index-dd80248b.js';
13
14
  import '../index.js';
14
15
  import '../../../index-69a46657.js';
@@ -1 +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;;;;;"}
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;;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { c as __awaiter, d as __generator } from '../../../tslib.es6-a39f91fc.js';
2
2
  import { jsx } from 'react/jsx-runtime';
3
- import { c as customRender } from '../../../customRender-d03c10b6.js';
3
+ import { c as customRender } from '../../../customRender-be47569b.js';
4
4
  import { Checkbox } from './index.js';
5
5
  import 'react';
6
6
  import 'react-dom';
@@ -1,6 +1,6 @@
1
1
  import { c as __awaiter, d as __generator, a as __assign } from '../../../tslib.es6-a39f91fc.js';
2
2
  import { jsx } from 'react/jsx-runtime';
3
- import { c as customRender } from '../../../customRender-d03c10b6.js';
3
+ import { c as customRender } from '../../../customRender-be47569b.js';
4
4
  import { CurrencyInput } from './index.js';
5
5
  import 'react';
6
6
  import 'react-dom';
@@ -1,6 +1,6 @@
1
1
  import { b as __rest, a as __assign } from '../../tslib.es6-a39f91fc.js';
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
- import require$$0__default, { useState } from 'react';
3
+ import React__default, { useState } from 'react';
4
4
  import { c as classNames } from '../../index-6ea95111.js';
5
5
  import { g as generateId } from '../../index-69a46657.js';
6
6
  import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
@@ -9,7 +9,7 @@ var css_248z = ".style-module_container__2L4SP {\n position: relative;\n}\n\n.s
9
9
  var styles = {"container":"style-module_container__2L4SP","prefix":"style-module_prefix__3jAFZ","prefix--with-error":"style-module_prefix--with-error__1yTTM","prefix--disabled":"style-module_prefix--disabled__2-gcw","input":"style-module_input__1eJO5","placeholder":"style-module_placeholder__1U2z0","input--with-inside-label":"style-module_input--with-inside-label__253bZ","placeholder--with-error":"style-module_placeholder--with-error__2ieRU","input--no-placeholder":"style-module_input--no-placeholder__3EGwh","input--with-prefix":"style-module_input--with-prefix__38e0j","placeholder--with-prefix":"style-module_placeholder--with-prefix__2PquQ","label":"style-module_label__3FEZ1","label--with-error":"style-module_label--with-error__166bP","error":"style-module_error__167Zc"};
10
10
  styleInject(css_248z);
11
11
 
12
- var Input = require$$0__default.forwardRef(function (_a, ref) {
12
+ var Input = React__default.forwardRef(function (_a, ref) {
13
13
  var _b, _c, _d, _e, _f, _g;
14
14
  var className = _a.className, placeholder = _a.placeholder, label = _a.label, id = _a.id, prefix = _a.prefix, error = _a.error, disabled = _a.disabled, _h = _a.hideLabel, hideLabel = _h === void 0 ? false : _h, _j = _a.labelInsideInput, labelInsideInput = _j === void 0 ? false : _j, props = __rest(_a, ["className", "placeholder", "label", "id", "prefix", "error", "disabled", "hideLabel", "labelInsideInput"]);
15
15
  var uniqueId = useState(id !== null && id !== void 0 ? id : generateId())[0];
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps = Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {\n error?: string | boolean;\n prefix?: string;\n label?: string;\n id?: string;\n hideLabel?: boolean;\n labelInsideInput?: boolean;\n};\n\nexport const Input = React.forwardRef(\n (\n {\n className,\n placeholder,\n label,\n id,\n prefix,\n error,\n disabled,\n hideLabel = false,\n labelInsideInput = false,\n ...props\n }: InputProps,\n ref?: React.ForwardedRef<HTMLInputElement>\n ) => {\n const [uniqueId] = useState(id ?? generateId());\n\n return (\n <div className={`${styles.container} ${className ?? ''}`}>\n {label && !labelInsideInput && (\n <label\n htmlFor={uniqueId}\n className={classnames('p-p', styles.label, {\n [styles['label--with-error']]: error,\n 'sr-only': hideLabel,\n })}\n >\n {label}\n </label>\n )}\n <div style={{ position: 'relative' }}>\n <input\n id={uniqueId}\n data-testid=\"ds-input-input\"\n type=\"text\"\n ref={ref}\n className={classnames(\n error ? 'p-input--error' : 'p-input',\n (!label || labelInsideInput) && placeholder && placeholder.length > 0\n ? styles.input\n : styles['input--no-placeholder'],\n {\n [styles['input--with-prefix']]: prefix, \n [styles['input--with-inside-label']]: labelInsideInput\n }\n )}\n placeholder={label || labelInsideInput ? placeholder : ' '}\n disabled={disabled}\n {...props}\n />\n {prefix && (\n <span\n className={classnames(\n styles.prefix,\n { [styles['prefix--with-error']]: error },\n { [styles['prefix--disabled']]: disabled }\n )}\n >\n {prefix}\n </span>\n )}\n {(!label || labelInsideInput) && (\n <label\n htmlFor={uniqueId}\n className={classnames(\n styles.placeholder,\n { [styles['placeholder--with-prefix']]: prefix },\n { [styles['placeholder--with-error']]: error }\n )}\n >\n {labelInsideInput ? label : placeholder}\n </label>\n )}\n </div>\n {error && (\n <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>\n {error}\n </p>\n )}\n </div>\n );\n }\n);\n"],"names":["React","_jsxs","_jsx","classnames"],"mappings":";;;;;;;;;;;IAiBa,KAAK,GAAGA,mBAAK,CAAC,UAAU,CACnC,UACE,EAWa,EACb,GAA0C;;IAXxC,IAAA,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,EAAE,QAAA,EACF,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACrB,KAAK,cAVV,2GAWC,CADS;IAIH,IAAA,QAAQ,GAAI,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,EAAE,CAAC,GAAhC,CAAiC;IAEhD,QACEC,cAAK,SAAS,EAAE,UAAG,MAAM,CAAC,SAAS,cAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,aACrD,KAAK,IAAI,CAAC,gBAAgB,KACzBC,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACvC,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,KAAK;oBACpC,aAAS,GAAE,SAAS;wBACpB,YAED,KAAK,GACA,CACT,EACDF,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAClCC,wBACE,EAAE,EAAE,QAAQ,iBACA,gBAAgB,EAC5B,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAU,CACnB,KAAK,GAAG,gBAAgB,GAAG,SAAS,EACpC,CAAC,CAAC,KAAK,IAAI,gBAAgB,KAAK,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;8BACjE,MAAM,CAAC,KAAK;8BACZ,MAAM,CAAC,uBAAuB,CAAC;4BAEjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM;4BACtC,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,gBAAgB;gCAEzD,EACD,WAAW,EAAE,KAAK,IAAI,gBAAgB,GAAG,WAAW,GAAG,GAAG,EAC1D,QAAQ,EAAE,QAAQ,IACd,KAAK,EACT,EACD,MAAM,KACLD,cACE,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,iBACrC,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,MACzC,YAEA,MAAM,GACF,CACR,EACA,CAAC,CAAC,KAAK,IAAI,gBAAgB,MAC1BD,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,WAAW,YAChB,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,iBAC5C,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,KAAK,MAC7C,YAEA,gBAAgB,GAAG,KAAK,GAAG,WAAW,GACjC,CACT,IACG,EACL,KAAK,KACJD,WAAG,SAAS,EAAE,qCAA8B,MAAM,CAAC,KAAK,CAAE,YACvD,KAAK,GACJ,CACL,IACG,EACN;AACJ,CAAC;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps = Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {\n error?: string | boolean;\n prefix?: string;\n label?: string;\n id?: string;\n hideLabel?: boolean;\n labelInsideInput?: boolean;\n};\n\nexport const Input = React.forwardRef(\n (\n {\n className,\n placeholder,\n label,\n id,\n prefix,\n error,\n disabled,\n hideLabel = false,\n labelInsideInput = false,\n ...props\n }: InputProps,\n ref?: React.ForwardedRef<HTMLInputElement>\n ) => {\n const [uniqueId] = useState(id ?? generateId());\n\n return (\n <div className={`${styles.container} ${className ?? ''}`}>\n {label && !labelInsideInput && (\n <label\n htmlFor={uniqueId}\n className={classnames('p-p', styles.label, {\n [styles['label--with-error']]: error,\n 'sr-only': hideLabel,\n })}\n >\n {label}\n </label>\n )}\n <div style={{ position: 'relative' }}>\n <input\n id={uniqueId}\n data-testid=\"ds-input-input\"\n type=\"text\"\n ref={ref}\n className={classnames(\n error ? 'p-input--error' : 'p-input',\n (!label || labelInsideInput) && placeholder && placeholder.length > 0\n ? styles.input\n : styles['input--no-placeholder'],\n {\n [styles['input--with-prefix']]: prefix, \n [styles['input--with-inside-label']]: labelInsideInput\n }\n )}\n placeholder={label || labelInsideInput ? placeholder : ' '}\n disabled={disabled}\n {...props}\n />\n {prefix && (\n <span\n className={classnames(\n styles.prefix,\n { [styles['prefix--with-error']]: error },\n { [styles['prefix--disabled']]: disabled }\n )}\n >\n {prefix}\n </span>\n )}\n {(!label || labelInsideInput) && (\n <label\n htmlFor={uniqueId}\n className={classnames(\n styles.placeholder,\n { [styles['placeholder--with-prefix']]: prefix },\n { [styles['placeholder--with-error']]: error }\n )}\n >\n {labelInsideInput ? label : placeholder}\n </label>\n )}\n </div>\n {error && (\n <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>\n {error}\n </p>\n )}\n </div>\n );\n }\n);\n"],"names":["React","_jsxs","_jsx","classnames"],"mappings":";;;;;;;;;;;IAiBa,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,UACE,EAWa,EACb,GAA0C;;IAXxC,IAAA,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,EAAE,QAAA,EACF,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACrB,KAAK,cAVV,2GAWC,CADS;IAIH,IAAA,QAAQ,GAAI,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,EAAE,CAAC,GAAhC,CAAiC;IAEhD,QACEC,cAAK,SAAS,EAAE,UAAG,MAAM,CAAC,SAAS,cAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,aACrD,KAAK,IAAI,CAAC,gBAAgB,KACzBC,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACvC,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,KAAK;oBACpC,aAAS,GAAE,SAAS;wBACpB,YAED,KAAK,GACA,CACT,EACDF,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAClCC,wBACE,EAAE,EAAE,QAAQ,iBACA,gBAAgB,EAC5B,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAU,CACnB,KAAK,GAAG,gBAAgB,GAAG,SAAS,EACpC,CAAC,CAAC,KAAK,IAAI,gBAAgB,KAAK,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;8BACjE,MAAM,CAAC,KAAK;8BACZ,MAAM,CAAC,uBAAuB,CAAC;4BAEjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM;4BACtC,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,gBAAgB;gCAEzD,EACD,WAAW,EAAE,KAAK,IAAI,gBAAgB,GAAG,WAAW,GAAG,GAAG,EAC1D,QAAQ,EAAE,QAAQ,IACd,KAAK,EACT,EACD,MAAM,KACLD,cACE,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,iBACrC,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,MACzC,YAEA,MAAM,GACF,CACR,EACA,CAAC,CAAC,KAAK,IAAI,gBAAgB,MAC1BD,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,WAAW,YAChB,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,iBAC5C,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,KAAK,MAC7C,YAEA,gBAAgB,GAAG,KAAK,GAAG,WAAW,GACjC,CACT,IACG,EACL,KAAK,KACJD,WAAG,SAAS,EAAE,qCAA8B,MAAM,CAAC,KAAK,CAAE,YACvD,KAAK,GACJ,CACL,IACG,EACN;AACJ,CAAC;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { c as __awaiter, d as __generator } from '../../../tslib.es6-a39f91fc.js';
2
2
  import { jsx } from 'react/jsx-runtime';
3
- import { c as customRender } from '../../../customRender-d03c10b6.js';
3
+ import { c as customRender } from '../../../customRender-be47569b.js';
4
4
  import { Radio } from './index.js';
5
5
  import 'react';
6
6
  import 'react-dom';
@@ -1,6 +1,6 @@
1
1
  import { c as __awaiter, d as __generator } from '../../../tslib.es6-a39f91fc.js';
2
2
  import { jsx } from 'react/jsx-runtime';
3
- import { c as customRender } from '../../../customRender-d03c10b6.js';
3
+ import { c as customRender } from '../../../customRender-be47569b.js';
4
4
  import { Toggle } from './index.js';
5
5
  import 'react';
6
6
  import 'react-dom';
@@ -7,6 +7,8 @@ import 'react';
7
7
  import '../../button/index.js';
8
8
  import '../../icon/icons/X.js';
9
9
  import '../../icon/IconWrapper/IconWrapper.js';
10
+ import '../../../index-171a0108.js';
11
+ import '../../../index-dd80248b.js';
10
12
 
11
13
  var css_248z = "@keyframes style-module_appear-in__3U2lu {\n 0% {\n transform: translateY(100%);\n }\n 80% {\n transform: translateY(-2%);\n }\n 100% {\n transform: translateY(0);\n }\n}\n@keyframes style-module_disappear-out__6pOVr {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(100%);\n }\n}\n.style-module_wrapper__200Xu {\n position: relative;\n top: 0;\n overflow: hidden;\n}\n\n.style-module_container__aOENo {\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n overflow: auto;\n max-height: 90vh;\n bottom: 0;\n position: fixed;\n animation-name: style-module_appear-in__3U2lu;\n animation-duration: 0.4s;\n animation-fill-mode: both;\n animation-timing-function: ease-in;\n}\n.style-module_containerClose__3-nqc {\n animation-name: style-module_disappear-out__6pOVr;\n animation-duration: 0.4s;\n animation-delay: 0s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n}\n\n@media (max-width: 34rem) {\n .style-module_body__3yNly {\n padding-bottom: 48px;\n }\n}";
12
14
  var styles = {"wrapper":"style-module_wrapper__200Xu","container":"style-module_container__aOENo","appear-in":"style-module_appear-in__3U2lu","containerClose":"style-module_containerClose__3-nqc","disappear-out":"style-module_disappear-out__6pOVr","body":"style-module_body__3yNly"};
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/modal/bottomModal/index.tsx"],"sourcesContent":["import { Props } from '..';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\nimport { GenericModal } from '../genericModal';\n\nconst BottomModal = ({ className, ...rest }: Props) => (\n <GenericModal\n titleSize='small'\n classNames={{\n wrapper: classNames('w100', styles.wrapper),\n container: ({ isClosing }) => classNames(\n 'bg-white d-flex fd-column w100',\n className,\n styles.container, {\n [styles.containerClose]: isClosing, \n }\n ),\n body: styles.body,\n }}\n {...rest}\n />\n);\n\nexport { BottomModal };"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;IAKM,WAAW,GAAG,UAAC,EAA6B;IAA3B,IAAA,SAAS,eAAA,EAAK,IAAI,cAApB,aAAsB,CAAF;IAAc,QACrDA,IAAC,YAAY,aACX,SAAS,EAAC,OAAO,EACjB,UAAU,EAAE;YACV,OAAO,EAAE,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC;YAC3C,SAAS,EAAE,UAAC,EAAa;;oBAAX,SAAS,eAAA;gBAAO,OAAA,UAAU,CACtC,gCAAgC,EAChC,SAAS,EACT,MAAM,CAAC,SAAS;oBACd,GAAC,MAAM,CAAC,cAAc,IAAG,SAAS;wBAErC;aAAA;YACD,IAAI,EAAE,MAAM,CAAC,IAAI;SAClB,IACG,IAAI,EACR,EACH;;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/modal/bottomModal/index.tsx"],"sourcesContent":["import { Props } from '..';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\nimport { GenericModal } from '../genericModal';\n\nconst BottomModal = ({ className, ...rest }: Props) => (\n <GenericModal\n titleSize='small'\n classNames={{\n wrapper: classNames('w100', styles.wrapper),\n container: ({ isClosing }) => classNames(\n 'bg-white d-flex fd-column w100',\n className,\n styles.container, {\n [styles.containerClose]: isClosing, \n }\n ),\n body: styles.body,\n }}\n {...rest}\n />\n);\n\nexport { BottomModal };"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;IAKM,WAAW,GAAG,UAAC,EAA6B;IAA3B,IAAA,SAAS,eAAA,EAAK,IAAI,cAApB,aAAsB,CAAF;IAAc,QACrDA,IAAC,YAAY,aACX,SAAS,EAAC,OAAO,EACjB,UAAU,EAAE;YACV,OAAO,EAAE,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC;YAC3C,SAAS,EAAE,UAAC,EAAa;;oBAAX,SAAS,eAAA;gBAAO,OAAA,UAAU,CACtC,gCAAgC,EAChC,SAAS,EACT,MAAM,CAAC,SAAS;oBACd,GAAC,MAAM,CAAC,cAAc,IAAG,SAAS;wBAErC;aAAA;YACD,IAAI,EAAE,MAAM,CAAC,IAAI;SAClB,IACG,IAAI,EACR,EACH;;;;;"}
@@ -9,6 +9,8 @@ import '../genericModal/index.js';
9
9
  import '../../button/index.js';
10
10
  import '../../icon/icons/X.js';
11
11
  import '../../icon/IconWrapper/IconWrapper.js';
12
+ import '../../../index-171a0108.js';
13
+ import '../../../index-dd80248b.js';
12
14
 
13
15
  var css_248z = "@media (min-width: 34rem) {\n .style-module_mobile__3k175 {\n display: none;\n }\n}\n@media (max-width: 34rem) {\n .style-module_mobile__3k175 {\n display: block !important;\n }\n}\n\n@media (max-width: 34rem) {\n .style-module_desktop__2lclr {\n display: none;\n }\n}";
14
16
  var styles = {"mobile":"style-module_mobile__3k175","desktop":"style-module_desktop__2lclr"};
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/modal/bottomOrRegularModal/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport { Props, RegularModal } from '..';\nimport { BottomModal } from '../bottomModal';\n\nimport styles from './style.module.scss';\n\nexport const BottomOrRegularModal = ({ isOpen, ...props }: Props) => {\n const mobileRef = useRef<HTMLDivElement>(null);\n const [visibleSize, setVisibleSize] = useState<'desktop' | 'mobile'>(\n 'desktop'\n );\n\n const handleResize = () => {\n setVisibleSize(\n mobileRef.current !== null &&\n window.getComputedStyle(mobileRef.current).display !== 'none'\n ? 'mobile'\n : 'desktop'\n );\n };\n\n useEffect(() => {\n window.addEventListener('resize', handleResize);\n handleResize();\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n return (\n <>\n <div className={styles.mobile} ref={mobileRef}>\n {visibleSize === 'mobile' && <BottomModal {...props} isOpen={isOpen} />}\n </div>\n {visibleSize === 'desktop' && (\n <div className={styles.desktop}>\n <RegularModal {...props} isOpen={isOpen} />\n </div>\n )}\n </>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;IAOa,oBAAoB,GAAG,UAAC,EAA2B;IAAzB,IAAA,MAAM,YAAA,EAAK,KAAK,cAAlB,UAAoB,CAAF;IACrD,IAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,IAAA,KAAgC,QAAQ,CAC5C,SAAS,CACV,EAFM,WAAW,QAAA,EAAE,cAAc,QAEjC,CAAC;IAEF,IAAM,YAAY,GAAG;QACnB,cAAc,CACZ,SAAS,CAAC,OAAO,KAAK,IAAI;YACxB,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,MAAM;cAC3D,QAAQ;cACR,SAAS,CACd,CAAC;KACH,CAAC;IAEF,SAAS,CAAC;QACR,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,YAAY,EAAE,CAAC;QACf,OAAO;YACL,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;SACpD,CAAC;KACH,EAAE,EAAE,CAAC,CAAC;IAEP,QACEA,4BACEC,aAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,EAAE,SAAS,YAC1C,WAAW,KAAK,QAAQ,IAAIA,IAAC,WAAW,eAAK,KAAK,IAAE,MAAM,EAAE,MAAM,IAAI,GACnE,EACL,WAAW,KAAK,SAAS,KACxBA,aAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAC5BA,IAAC,YAAY,eAAK,KAAK,IAAE,MAAM,EAAE,MAAM,IAAI,GACvC,CACP,IACA,EACH;AACJ;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/modal/bottomOrRegularModal/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport { Props, RegularModal } from '..';\nimport { BottomModal } from '../bottomModal';\n\nimport styles from './style.module.scss';\n\nexport const BottomOrRegularModal = ({ isOpen, ...props }: Props) => {\n const mobileRef = useRef<HTMLDivElement>(null);\n const [visibleSize, setVisibleSize] = useState<'desktop' | 'mobile'>(\n 'desktop'\n );\n\n const handleResize = () => {\n setVisibleSize(\n mobileRef.current !== null &&\n window.getComputedStyle(mobileRef.current).display !== 'none'\n ? 'mobile'\n : 'desktop'\n );\n };\n\n useEffect(() => {\n window.addEventListener('resize', handleResize);\n handleResize();\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n return (\n <>\n <div className={styles.mobile} ref={mobileRef}>\n {visibleSize === 'mobile' && <BottomModal {...props} isOpen={isOpen} />}\n </div>\n {visibleSize === 'desktop' && (\n <div className={styles.desktop}>\n <RegularModal {...props} isOpen={isOpen} />\n </div>\n )}\n </>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;IAOa,oBAAoB,GAAG,UAAC,EAA2B;IAAzB,IAAA,MAAM,YAAA,EAAK,KAAK,cAAlB,UAAoB,CAAF;IACrD,IAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,IAAA,KAAgC,QAAQ,CAC5C,SAAS,CACV,EAFM,WAAW,QAAA,EAAE,cAAc,QAEjC,CAAC;IAEF,IAAM,YAAY,GAAG;QACnB,cAAc,CACZ,SAAS,CAAC,OAAO,KAAK,IAAI;YACxB,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,MAAM;cAC3D,QAAQ;cACR,SAAS,CACd,CAAC;KACH,CAAC;IAEF,SAAS,CAAC;QACR,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,YAAY,EAAE,CAAC;QACf,OAAO;YACL,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;SACpD,CAAC;KACH,EAAE,EAAE,CAAC,CAAC;IAEP,QACEA,4BACEC,aAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,EAAE,SAAS,YAC1C,WAAW,KAAK,QAAQ,IAAIA,IAAC,WAAW,eAAK,KAAK,IAAE,MAAM,EAAE,MAAM,IAAI,GACnE,EACL,WAAW,KAAK,SAAS,KACxBA,aAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAC5BA,IAAC,YAAY,eAAK,KAAK,IAAE,MAAM,EAAE,MAAM,IAAI,GACvC,CACP,IACA,EACH;AACJ;;;;"}
@@ -0,0 +1,33 @@
1
+ import { b as __rest, a as __assign } from '../../../tslib.es6-a39f91fc.js';
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
4
+ import { c as classNames } from '../../../index-6ea95111.js';
5
+ import { GenericModal } from '../genericModal/index.js';
6
+ import 'react';
7
+ import '../../button/index.js';
8
+ import '../../icon/icons/X.js';
9
+ import '../../icon/IconWrapper/IconWrapper.js';
10
+ import '../../../index-171a0108.js';
11
+ import '../../../index-dd80248b.js';
12
+
13
+ var css_248z = "@keyframes style-module_appear-in__5YBuA {\n 0% {\n opacity: 0;\n visibility: hidden;\n }\n 100% {\n opacity: 1;\n visibility: visible;\n }\n}\n@keyframes style-module_disappear-out__33q3c {\n 0% {\n opacity: 1;\n visibility: visible;\n }\n 100% {\n opacity: 0;\n visibility: hidden;\n }\n}\n.style-module_container__dyFzK {\n max-height: 100vh;\n top: 0;\n bottom: 0;\n position: fixed;\n animation-name: style-module_appear-in__5YBuA;\n animation-duration: 0.4s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n}\n.style-module_containerClose__39rB7 {\n animation-name: style-module_disappear-out__33q3c;\n animation-duration: 0.4s;\n animation-delay: 0s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n}\n\n@media (max-width: 34rem) {\n .style-module_body__3Fuui {\n padding-bottom: 48px;\n }\n}";
14
+ var styles = {"container":"style-module_container__dyFzK","appear-in":"style-module_appear-in__5YBuA","containerClose":"style-module_containerClose__39rB7","disappear-out":"style-module_disappear-out__33q3c","body":"style-module_body__3Fuui"};
15
+ styleInject(css_248z);
16
+
17
+ var FullScreenModal = function (_a) {
18
+ var className = _a.className, rest = __rest(_a, ["className"]);
19
+ return (jsx(GenericModal, __assign({ titleSize: "small", classNames: {
20
+ wrapper: "w100",
21
+ container: function (_a) {
22
+ var _b;
23
+ var isClosing = _a.isClosing;
24
+ return classNames("bg-white d-flex fd-column w100", className, styles.container, (_b = {},
25
+ _b[styles.containerClose] = isClosing,
26
+ _b));
27
+ },
28
+ body: styles.body,
29
+ } }, rest)));
30
+ };
31
+
32
+ export { FullScreenModal };
33
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/modal/fullScreenModal/index.tsx"],"sourcesContent":["import { Props } from \"..\";\nimport styles from \"./style.module.scss\";\nimport classNames from \"classnames\";\nimport { GenericModal } from \"../genericModal\";\n\nconst FullScreenModal = ({ className, ...rest }: Props) => (\n <GenericModal\n titleSize=\"small\"\n classNames={{\n wrapper: \"w100\",\n container: ({ isClosing }) => classNames(\n \"bg-white d-flex fd-column w100\",\n className,\n styles.container, {\n [styles.containerClose]: isClosing, \n }\n ),\n body: styles.body,\n }}\n {...rest}\n />\n);\n\nexport { FullScreenModal };"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;IAKM,eAAe,GAAG,UAAC,EAA6B;IAA3B,IAAA,SAAS,eAAA,EAAK,IAAI,cAApB,aAAsB,CAAF;IAAc,QACzDA,IAAC,YAAY,aACX,SAAS,EAAC,OAAO,EACjB,UAAU,EAAE;YACV,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,UAAC,EAAa;;oBAAX,SAAS,eAAA;gBAAO,OAAA,UAAU,CACtC,gCAAgC,EAChC,SAAS,EACT,MAAM,CAAC,SAAS;oBACd,GAAC,MAAM,CAAC,cAAc,IAAG,SAAS;wBAErC;aAAA;YACD,IAAI,EAAE,MAAM,CAAC,IAAI;SAClB,IACG,IAAI,EACR,EACH;;;;;"}