npm - @protonradio/proton-ui - Versions diffs - 0.12.4 → 0.12.6 - Mend

@protonradio/proton-ui 0.12.4 → 0.12.6

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 (61) hide show

package/dist/components/ScreenOverlay/ScreenOverlay.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScreenOverlay.es.js","sources":["../../../src/components/ScreenOverlay/ScreenOverlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect } from \"react\";\nimport \"./ScreenOverlay.css\";\nimport { csx } from \"../../utils\";\nimport { Portal } from \"radix-ui\";\nimport { useTheme, ThemeProvider } from \"../ThemeProvider\";\n\ninterface ScreenOverlayProps {\n /*\n Children to render inside the overlay.\n /\n children?: React.ReactNode;\n\n /\n Whether to fade in the overlay.\n /\n fadeIn?: boolean;\n\n /\n Callback function to handle events (click or ESC key).\n /\n onClose?: () => void;\n\n /\n Ref to the overlay element.\n /\n ref?: React.RefObject<HTMLDivElement>;\n}\n\n/\n Base Overlay component for creating modal-like backgrounds.\n \n API:\n * - {@link ScreenOverlayProps}\n */\nexport const ScreenOverlay = forwardRef<HTMLDivElement, ScreenOverlayProps>(\n ({ fadeIn = false, onClose, children }, ref) => {\n const { theme, palette } = useTheme();\n\n useEffect(() => {\n if (!onClose) return;\n\n const handleEscKey = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") onClose();\n };\n\n document.addEventListener(\"keydown\", handleEscKey);\n return () => {\n document.removeEventListener(\"keydown\", handleEscKey);\n };\n }, [onClose]);\n\n return (\n <Portal.Root>\n <ThemeProvider theme={theme} palette={palette}>\n <div\n ref={ref}\n id=\"background\"\n aria-label=\"Background overlay\"\n data-testid=\"screen-overlay\"\n className={csx(\n \"proton-ScreenOverlay__background\",\n \"proton-ScreenOverlay__z-index\",\n fadeIn && \"proton-ScreenOverlay__fade-in\"\n )}\n onClick={(event: ~~React.~~MouseEvent) => {\n if (!onClose) return;\n\n // Only trigger onClose if the click was directly on the background element\n if (event.target === event.currentTarget) {\n onClose();\n }\n }}\n >\n {children}\n </div>\n </ThemeProvider>\n </Portal.Root>\n );\n }\n);\n\nScreenOverlay.displayName = \"ProtonUIScreenOverlay\";\n"],"names":["ScreenOverlay","forwardRef","fadeIn","onClose","children","ref","theme","palette","useTheme","useEffect","handleEscKey","event","Portal","jsx","ThemeProvider","csx"],"mappings":";;;;;;AAoCO,MAAMA,IAAgBC;AAAA,EAC3B,CAAC,EAAE,QAAAC,IAAS,IAAO,SAAAC,GAAS,UAAAC,EAAA,GAAYC,MAAQ;AAC9C,UAAM,EAAE,OAAAC,GAAO,SAAAC,EAAA,IAAYC,EAAA;AAE3B,WAAAC,EAAU,MAAM;AACd,UAAI,CAACN,EAAS;AAEd,YAAMO,IAAe,CAACC,MAAyB;AAC7C,QAAIA,EAAM,QAAQ,YAAUR,EAAA;AAAA,MAC9B;AAEA,sBAAS,iBAAiB,WAAWO,CAAY,GAC1C,MAAM;AACX,iBAAS,oBAAoB,WAAWA,CAAY;AAAA,MACtD;AAAA,IACF,GAAG,CAACP,CAAO,CAAC,yBAGTS,EAAO,MAAP,EACC,UAAAC,gBAAAA,MAACC,GAAA,EAAc,OAAAR,GAAc,SAAAC,GAC3B,UAAAM,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,IAAG;AAAA,QACH,cAAW;AAAA,QACX,eAAY;AAAA,QACZ,WAAWU;AAAA,UACT;AAAA,UACA;AAAA,UACAb,KAAU;AAAA,QAAA;AAAA,QAEZ,SAAS,CAACS,~~MAA4B~~;~~AACpC~~,UAAKR,KAGDQ,EAAM,WAAWA,EAAM,iBACzBR,EAAA;AAAA,QAEJ;AAAA,QAEC,UAAAC;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,EAEJ;AACF;AAEAJ,EAAc,cAAc;"}
1	+ {"version":3,"file":"ScreenOverlay.es.js","sources":["../../../src/components/ScreenOverlay/ScreenOverlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, type MouseEvent } from \"react\";\nimport \"./ScreenOverlay.css\";\nimport { csx } from \"../../utils\";\nimport { Portal } from \"radix-ui\";\nimport { useTheme, ThemeProvider } from \"../ThemeProvider\";\n\ninterface ScreenOverlayProps {\n /*\n Children to render inside the overlay.\n /\n children?: React.ReactNode;\n\n /\n Whether to fade in the overlay.\n /\n fadeIn?: boolean;\n\n /\n Callback function to handle events (click or ESC key).\n /\n onClose?: () => void;\n\n /\n Ref to the overlay element.\n /\n ref?: React.RefObject<HTMLDivElement>;\n}\n\n/\n Base Overlay component for creating modal-like backgrounds.\n \n API:\n * - {@link ScreenOverlayProps}\n */\nexport const ScreenOverlay = forwardRef<HTMLDivElement, ScreenOverlayProps>(\n ({ fadeIn = false, onClose, children }, ref) => {\n const { theme, palette } = useTheme();\n\n useEffect(() => {\n if (!onClose) return;\n\n const handleEscKey = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") onClose();\n };\n\n document.addEventListener(\"keydown\", handleEscKey);\n return () => {\n document.removeEventListener(\"keydown\", handleEscKey);\n };\n }, [onClose]);\n\n return (\n <Portal.Root>\n <ThemeProvider theme={theme} palette={palette}>\n <div\n ref={ref}\n id=\"background\"\n aria-label=\"Background overlay\"\n data-testid=\"screen-overlay\"\n className={csx(\n \"proton-ScreenOverlay__background\",\n \"proton-ScreenOverlay__z-index\",\n fadeIn && \"proton-ScreenOverlay__fade-in\"\n )}\n onClick={(event: MouseEvent) => {\n if (!onClose) return;\n\n // Only trigger onClose if the click was directly on the background element\n if (event.target === event.currentTarget) {\n onClose();\n }\n }}\n >\n {children}\n </div>\n </ThemeProvider>\n </Portal.Root>\n );\n }\n);\n\nScreenOverlay.displayName = \"ProtonUIScreenOverlay\";\n"],"names":["ScreenOverlay","forwardRef","fadeIn","onClose","children","ref","theme","palette","useTheme","useEffect","handleEscKey","event","Portal","jsx","ThemeProvider","csx"],"mappings":";;;;;;AAoCO,MAAMA,IAAgBC;AAAA,EAC3B,CAAC,EAAE,QAAAC,IAAS,IAAO,SAAAC,GAAS,UAAAC,EAAA,GAAYC,MAAQ;AAC9C,UAAM,EAAE,OAAAC,GAAO,SAAAC,EAAA,IAAYC,EAAA;AAE3B,WAAAC,EAAU,MAAM;AACd,UAAI,CAACN,EAAS;AAEd,YAAMO,IAAe,CAACC,MAAyB;AAC7C,QAAIA,EAAM,QAAQ,YAAUR,EAAA;AAAA,MAC9B;AAEA,sBAAS,iBAAiB,WAAWO,CAAY,GAC1C,MAAM;AACX,iBAAS,oBAAoB,WAAWA,CAAY;AAAA,MACtD;AAAA,IACF,GAAG,CAACP,CAAO,CAAC,yBAGTS,EAAO,MAAP,EACC,UAAAC,gBAAAA,MAACC,GAAA,EAAc,OAAAR,GAAc,SAAAC,GAC3B,UAAAM,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,IAAG;AAAA,QACH,cAAW;AAAA,QACX,eAAY;AAAA,QACZ,WAAWU;AAAA,UACT;AAAA,UACA;AAAA,UACAb,KAAU;AAAA,QAAA;AAAA,QAEZ,SAAS,CAACS,MAAsB;AAC9B,UAAKR,KAGDQ,EAAM,WAAWA,EAAM,iBACzBR,EAAA;AAAA,QAEJ;AAAA,QAEC,UAAAC;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,EAEJ;AACF;AAEAJ,EAAc,cAAc;"}

package/dist/components/Select/Select.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.cjs.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n forwardRef,\n ReactNode,\n useEffect,\n useRef,\n useState,\n type ForwardedRef,\n type CSSProperties,\n} from \"react\";\nimport { Select as RadixSelect } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { csx } from \"../../utils\";\n\nimport { ActionMenu, type ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { CaretDown as CaretDownIcon } from \"../Icon\";\n\nimport \"./Select.css\";\nimport \"../Menu/Menu.css\";\nimport \"../Elevation/Elevation.css\";\n\ninterface SelectButtonProps {\n disabled?: boolean;\n isOpen?: boolean;\n selectedItem?: SelectItem;\n onClick?: () => void;\n isRounded?: boolean;\n ariaLabel?: string;\n \"data-testid\"?: string;\n}\n\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\n (\n {\n disabled,\n isOpen,\n onClick,\n isRounded,\n selectedItem,\n ariaLabel,\n \"data-testid\": testId,\n },\n ref: ForwardedRef<HTMLButtonElement>,\n ) => {\n return (\n <button\n ref={ref}\n type=\"button\"\n role=\"combobox\"\n aria-label={ariaLabel}\n aria-expanded={isOpen}\n aria-autocomplete=\"none\"\n data-state={isOpen ? \"open\" : \"closed\"}\n data-testid={testId}\n disabled={disabled}\n onClick={onClick}\n className={csx(\n \"proton-Select__trigger\",\n \"proton-Elevation--glass\",\n disabled && \"proton-Select__trigger--disabled\",\n !isOpen && \"proton-Select__trigger--closed\",\n isOpen && \"proton-Select__trigger--opened\",\n isRounded && \"proton-Select__trigger--rounded\",\n )}\n >\n <span className=\"proton-Select__value\">\n {selectedItem ? selectedItem.label : \"Select an option\"}\n </span>\n <span\n className={csx(\n \"proton-Select__trigger_icon\",\n isOpen && \"proton-Select__trigger_icon--flipped\",\n )}\n >\n <CaretDownIcon size={16} />\n </span>\n </button>\n );\n },\n);\n\nSelectButton.displayName = \"ProtonUISelectButton\";\n\nexport interface SelectItem {\n /** The label to display for the item /\n label: string;\n\n /* The key of the item /\n key: string;\n\n /* The URL to navigate to when the item is clicked, turns item into an a tag /\n to?: string;\n}\n\nexport interface SelectProps {\n /* Array of keys that should be disabled\n * @example [\"Thing 1\", \"Thing 2\"]\n /\n disabledKeys?: string[];\n\n /* The key of the default selected item /\n defaultSelectedKey?: string;\n\n /* Test ID for the select /\n \"data-testid\"?: string;\n\n /* Whether the select is disabled /\n isDisabled?: boolean;\n\n /* Array of items to display\n * @example [{ key: \"thing-1\", label: \"Thing 1\" }, { key: \"thing-2\", label: \"Thing 2\" }]\n * @see {@link SelectItem}\n /\n items: SelectItem[];\n\n /* Whether the select button is rounded\n * @default false\n /\n isRounded?: boolean;\n\n /* Label to display above the select\n * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#text\n /\n label?: string;\n\n /* The name of the select field /\n name: string;\n\n /* Callback fired when the menu closes /\n onClose?: () => void;\n\n /* Callback fired when the menu opens /\n onOpen?: () => void;\n\n /* Callback fired when selection changes /\n onSelectionChange?: (key: string) => void;\n\n /* Currently selected key /\n selectedKey?: string;\n}\n\n/\n A dropdown select menu that opens a popover on desktop and an action menu on mobile/touch devices.\n * Supports controlled and uncontrolled modes.\n \n API:\n * - {@link SelectProps}\n /\nexport function Select({\n label,\n name,\n isDisabled,\n disabledKeys,\n selectedKey,\n onSelectionChange,\n defaultSelectedKey,\n onOpen,\n onClose,\n items,\n isRounded = false,\n \"data-testid\": testId,\n}: SelectProps) {\n const [isOpen, setIsOpen] = useState(false);\n const isControlled = selectedKey !== undefined;\n const [internalSelectedKey, setInternalSelectedKey] = useState(\n defaultSelectedKey ?? \"\",\n );\n const { className: themeClass, style: themeStyle } = useTheme();\n const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const hiddenInputRef = useRef<HTMLInputElement>(null);\n\n // Handle controlled vs uncontrolled state\n const currentSelectedKey = isControlled\n ? (selectedKey as string)\n : internalSelectedKey;\n const selectedItem = items.find((item) => item.key === currentSelectedKey);\n\n const handleValueChange = (value: string) => {\n if (!isControlled) {\n setInternalSelectedKey(value);\n }\n onSelectionChange?.(value);\n\n // Update hidden input for form submission\n if (hiddenInputRef.current) {\n hiddenInputRef.current.value = value;\n hiddenInputRef.current.dispatchEvent(\n new Event(\"change\", { bubbles: true }),\n );\n }\n };\n\n const handleOpenChange = (open: boolean) => {\n setIsOpen(open);\n if (open) {\n onOpen?.();\n } else {\n onClose?.();\n }\n };\n\n // Update internal state when controlled selectedKey changes\n useEffect(() => {\n if (isControlled) {\n setInternalSelectedKey(selectedKey);\n }\n }, [isControlled]);\n\n const actionItems: ActionMenuAction[] = items.map((item) => ({\n key: item.key,\n label: item.label,\n to: item.to,\n onAction: () => {\n handleValueChange(item.key);\n setIsOpen(false);\n },\n }));\n\n if (isMobile) {\n return (\n <div\n className=\"proton-Select\"\n aria-label={label \|\| name}\n aria-disabled={isDisabled}\n >\n {label && (\n <div className=\"proton-Select__label\" data-testid=\"select-label\">\n {label}\n </div>\n )}\n\n {/ Hidden input for form submission /}\n <input\n ref={hiddenInputRef}\n type=\"hidden\"\n name={name}\n value={currentSelectedKey}\n data-testid=\"hidden-select-container\"\n />\n\n <SelectButton\n isOpen={isOpen}\n isRounded={isRounded}\n ref={triggerRef}\n disabled={isDisabled}\n ariaLabel={label \|\| name}\n data-testid={testId}\n onClick={() => setIsOpen(true)}\n selectedItem={selectedItem}\n />\n\n <ActionMenu\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n actions={actionItems}\n selectedKeys={[currentSelectedKey]}\n disabledKeys={disabledKeys}\n />\n </div>\n );\n }\n\n return (\n <div\n className=\"proton-Select\"\n aria-label={label \|\| name}\n aria-disabled={isDisabled}\n >\n {label && (\n <div className=\"proton-Select__label\" data-testid=\"select-label\">\n {label}\n </div>\n )}\n\n {/ Hidden input for form submission */}\n <input\n ref={hiddenInputRef}\n type=\"hidden\"\n name={name}\n value={currentSelectedKey}\n data-testid=\"hidden-select-container\"\n />\n\n <RadixSelect.Root\n value={currentSelectedKey}\n onValueChange={handleValueChange}\n onOpenChange={handleOpenChange}\n disabled={isDisabled}\n >\n <RadixSelect.Trigger asChild>\n <SelectButton\n isRounded={isRounded}\n isOpen={isOpen}\n ref={triggerRef}\n disabled={isDisabled}\n ariaLabel={label \|\| name}\n data-testid={testId}\n selectedItem={selectedItem}\n />\n </RadixSelect.Trigger>\n\n <RadixSelect.Portal>\n <RadixSelect.Content\n className={csx(\n \"proton-Menu\",\n \"proton-MenuTrigger__menu\",\n \"proton-Elevation--glass\",\n themeClass,\n )}\n style={themeStyle as CSSProperties}\n position=\"popper\"\n >\n <RadixSelect.Viewport>\n {items.map((item) => (\n <RadixSelect.Item\n key={item.key}\n value={item.key}\n disabled={disabledKeys?.includes(item.key)}\n className=\"proton-Menu__item\"\n >\n <RadixSelect.ItemText>{item.label}</RadixSelect.ItemText>\n </RadixSelect.Item>\n ))}\n </RadixSelect.Viewport>\n </RadixSelect.Content>\n </RadixSelect.Portal>\n </RadixSelect.Root>\n </div>\n );\n}\n\nSelect.displayName = \"ProtonUISelect\";\n"],"names":["SelectButton","forwardRef","disabled","isOpen","onClick","isRounded","selectedItem","ariaLabel","testId","ref","jsxs","csx","jsx","CaretDownIcon","Select","label","name","isDisabled","disabledKeys","selectedKey","onSelectionChange","defaultSelectedKey","onOpen","onClose","items","setIsOpen","useState","isControlled","internalSelectedKey","setInternalSelectedKey","themeClass","themeStyle","useTheme","isMobile","useBreakpoint","BREAKPOINTS","triggerRef","useRef","hiddenInputRef","currentSelectedKey","item","handleValueChange","value","handleOpenChange","open","useEffect","actionItems","ActionMenu","RadixSelect"],"mappings":"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"}
1	+ {"version":3,"file":"Select.cjs.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n forwardRef,\n useEffect,\n useRef,\n useState,\n type ForwardedRef,\n type CSSProperties,\n} from \"react\";\nimport { Select as RadixSelect } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { csx } from \"../../utils\";\n\nimport { ActionMenu, type ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { CaretDown as CaretDownIcon } from \"../Icon\";\n\nimport \"./Select.css\";\nimport \"../Menu/Menu.css\";\nimport \"../Elevation/Elevation.css\";\n\ninterface SelectButtonProps {\n disabled?: boolean;\n isOpen?: boolean;\n selectedItem?: SelectItem;\n onClick?: () => void;\n isRounded?: boolean;\n ariaLabel?: string;\n \"data-testid\"?: string;\n}\n\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\n (\n {\n disabled,\n isOpen,\n onClick,\n isRounded,\n selectedItem,\n ariaLabel,\n \"data-testid\": testId,\n },\n ref: ForwardedRef<HTMLButtonElement>,\n ) => {\n return (\n <button\n ref={ref}\n type=\"button\"\n role=\"combobox\"\n aria-label={ariaLabel}\n aria-expanded={isOpen}\n aria-autocomplete=\"none\"\n data-state={isOpen ? \"open\" : \"closed\"}\n data-testid={testId}\n disabled={disabled}\n onClick={onClick}\n className={csx(\n \"proton-Select__trigger\",\n \"proton-Elevation--glass\",\n disabled && \"proton-Select__trigger--disabled\",\n !isOpen && \"proton-Select__trigger--closed\",\n isOpen && \"proton-Select__trigger--opened\",\n isRounded && \"proton-Select__trigger--rounded\",\n )}\n >\n <span className=\"proton-Select__value\">\n {selectedItem ? selectedItem.label : \"Select an option\"}\n </span>\n <span\n className={csx(\n \"proton-Select__trigger_icon\",\n isOpen && \"proton-Select__trigger_icon--flipped\",\n )}\n >\n <CaretDownIcon size={16} />\n </span>\n </button>\n );\n },\n);\n\nSelectButton.displayName = \"ProtonUISelectButton\";\n\nexport interface SelectItem {\n /** The label to display for the item /\n label: string;\n\n /* The key of the item /\n key: string;\n\n /* The URL to navigate to when the item is clicked, turns item into an a tag /\n to?: string;\n}\n\nexport interface SelectProps {\n /* Array of keys that should be disabled\n * @example [\"Thing 1\", \"Thing 2\"]\n /\n disabledKeys?: string[];\n\n /* The key of the default selected item /\n defaultSelectedKey?: string;\n\n /* Test ID for the select /\n \"data-testid\"?: string;\n\n /* Whether the select is disabled /\n isDisabled?: boolean;\n\n /* Array of items to display\n * @example [{ key: \"thing-1\", label: \"Thing 1\" }, { key: \"thing-2\", label: \"Thing 2\" }]\n * @see {@link SelectItem}\n /\n items: SelectItem[];\n\n /* Whether the select button is rounded\n * @default false\n /\n isRounded?: boolean;\n\n /* Label to display above the select\n * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#text\n /\n label?: string;\n\n /* The name of the select field /\n name: string;\n\n /* Callback fired when the menu closes /\n onClose?: () => void;\n\n /* Callback fired when the menu opens /\n onOpen?: () => void;\n\n /* Callback fired when selection changes /\n onSelectionChange?: (key: string) => void;\n\n /* Currently selected key /\n selectedKey?: string;\n}\n\n/\n A dropdown select menu that opens a popover on desktop and an action menu on mobile/touch devices.\n * Supports controlled and uncontrolled modes.\n \n API:\n * - {@link SelectProps}\n /\nexport function Select({\n label,\n name,\n isDisabled,\n disabledKeys,\n selectedKey,\n onSelectionChange,\n defaultSelectedKey,\n onOpen,\n onClose,\n items,\n isRounded = false,\n \"data-testid\": testId,\n}: SelectProps) {\n const [isOpen, setIsOpen] = useState(false);\n const isControlled = selectedKey !== undefined;\n const [internalSelectedKey, setInternalSelectedKey] = useState(\n defaultSelectedKey ?? \"\",\n );\n const { className: themeClass, style: themeStyle } = useTheme();\n const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const hiddenInputRef = useRef<HTMLInputElement>(null);\n\n // Handle controlled vs uncontrolled state\n const currentSelectedKey = isControlled\n ? (selectedKey as string)\n : internalSelectedKey;\n const selectedItem = items.find((item) => item.key === currentSelectedKey);\n\n const handleValueChange = (value: string) => {\n if (!isControlled) {\n setInternalSelectedKey(value);\n }\n onSelectionChange?.(value);\n\n // Update hidden input for form submission\n if (hiddenInputRef.current) {\n hiddenInputRef.current.value = value;\n hiddenInputRef.current.dispatchEvent(\n new Event(\"change\", { bubbles: true }),\n );\n }\n };\n\n const handleOpenChange = (open: boolean) => {\n setIsOpen(open);\n if (open) {\n onOpen?.();\n } else {\n onClose?.();\n }\n };\n\n // Update internal state when controlled selectedKey changes\n useEffect(() => {\n if (isControlled) {\n setInternalSelectedKey(selectedKey);\n }\n }, [isControlled]);\n\n const actionItems: ActionMenuAction[] = items.map((item) => ({\n key: item.key,\n label: item.label,\n to: item.to,\n onAction: () => {\n handleValueChange(item.key);\n setIsOpen(false);\n },\n }));\n\n if (isMobile) {\n return (\n <div\n className=\"proton-Select\"\n aria-label={label \|\| name}\n aria-disabled={isDisabled}\n >\n {label && (\n <div className=\"proton-Select__label\" data-testid=\"select-label\">\n {label}\n </div>\n )}\n\n {/ Hidden input for form submission /}\n <input\n ref={hiddenInputRef}\n type=\"hidden\"\n name={name}\n value={currentSelectedKey}\n data-testid=\"hidden-select-container\"\n />\n\n <SelectButton\n isOpen={isOpen}\n isRounded={isRounded}\n ref={triggerRef}\n disabled={isDisabled}\n ariaLabel={label \|\| name}\n data-testid={testId}\n onClick={() => setIsOpen(true)}\n selectedItem={selectedItem}\n />\n\n <ActionMenu\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n actions={actionItems}\n selectedKeys={[currentSelectedKey]}\n disabledKeys={disabledKeys}\n />\n </div>\n );\n }\n\n return (\n <div\n className=\"proton-Select\"\n aria-label={label \|\| name}\n aria-disabled={isDisabled}\n >\n {label && (\n <div className=\"proton-Select__label\" data-testid=\"select-label\">\n {label}\n </div>\n )}\n\n {/ Hidden input for form submission */}\n <input\n ref={hiddenInputRef}\n type=\"hidden\"\n name={name}\n value={currentSelectedKey}\n data-testid=\"hidden-select-container\"\n />\n\n <RadixSelect.Root\n value={currentSelectedKey}\n onValueChange={handleValueChange}\n onOpenChange={handleOpenChange}\n disabled={isDisabled}\n >\n <RadixSelect.Trigger asChild>\n <SelectButton\n isRounded={isRounded}\n isOpen={isOpen}\n ref={triggerRef}\n disabled={isDisabled}\n ariaLabel={label \|\| name}\n data-testid={testId}\n selectedItem={selectedItem}\n />\n </RadixSelect.Trigger>\n\n <RadixSelect.Portal>\n <RadixSelect.Content\n className={csx(\n \"proton-Menu\",\n \"proton-MenuTrigger__menu\",\n \"proton-Elevation--glass\",\n themeClass,\n )}\n style={themeStyle as CSSProperties}\n position=\"popper\"\n >\n <RadixSelect.Viewport>\n {items.map((item) => (\n <RadixSelect.Item\n key={item.key}\n value={item.key}\n disabled={disabledKeys?.includes(item.key)}\n className=\"proton-Menu__item\"\n >\n <RadixSelect.ItemText>{item.label}</RadixSelect.ItemText>\n </RadixSelect.Item>\n ))}\n </RadixSelect.Viewport>\n </RadixSelect.Content>\n </RadixSelect.Portal>\n </RadixSelect.Root>\n </div>\n );\n}\n\nSelect.displayName = \"ProtonUISelect\";\n"],"names":["SelectButton","forwardRef","disabled","isOpen","onClick","isRounded","selectedItem","ariaLabel","testId","ref","jsxs","csx","jsx","CaretDownIcon","Select","label","name","isDisabled","disabledKeys","selectedKey","onSelectionChange","defaultSelectedKey","onOpen","onClose","items","setIsOpen","useState","isControlled","internalSelectedKey","setInternalSelectedKey","themeClass","themeStyle","useTheme","isMobile","useBreakpoint","BREAKPOINTS","triggerRef","useRef","hiddenInputRef","currentSelectedKey","item","handleValueChange","value","handleOpenChange","open","useEffect","actionItems","ActionMenu","RadixSelect"],"mappings":"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"}

package/dist/components/Select/Select.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.es.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n forwardRef,\n ReactNode,\n useEffect,\n useRef,\n useState,\n type ForwardedRef,\n type CSSProperties,\n} from \"react\";\nimport { Select as RadixSelect } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { csx } from \"../../utils\";\n\nimport { ActionMenu, type ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { CaretDown as CaretDownIcon } from \"../Icon\";\n\nimport \"./Select.css\";\nimport \"../Menu/Menu.css\";\nimport \"../Elevation/Elevation.css\";\n\ninterface SelectButtonProps {\n disabled?: boolean;\n isOpen?: boolean;\n selectedItem?: SelectItem;\n onClick?: () => void;\n isRounded?: boolean;\n ariaLabel?: string;\n \"data-testid\"?: string;\n}\n\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\n (\n {\n disabled,\n isOpen,\n onClick,\n isRounded,\n selectedItem,\n ariaLabel,\n \"data-testid\": testId,\n },\n ref: ForwardedRef<HTMLButtonElement>,\n ) => {\n return (\n <button\n ref={ref}\n type=\"button\"\n role=\"combobox\"\n aria-label={ariaLabel}\n aria-expanded={isOpen}\n aria-autocomplete=\"none\"\n data-state={isOpen ? \"open\" : \"closed\"}\n data-testid={testId}\n disabled={disabled}\n onClick={onClick}\n className={csx(\n \"proton-Select__trigger\",\n \"proton-Elevation--glass\",\n disabled && \"proton-Select__trigger--disabled\",\n !isOpen && \"proton-Select__trigger--closed\",\n isOpen && \"proton-Select__trigger--opened\",\n isRounded && \"proton-Select__trigger--rounded\",\n )}\n >\n <span className=\"proton-Select__value\">\n {selectedItem ? selectedItem.label : \"Select an option\"}\n </span>\n <span\n className={csx(\n \"proton-Select__trigger_icon\",\n isOpen && \"proton-Select__trigger_icon--flipped\",\n )}\n >\n <CaretDownIcon size={16} />\n </span>\n </button>\n );\n },\n);\n\nSelectButton.displayName = \"ProtonUISelectButton\";\n\nexport interface SelectItem {\n /** The label to display for the item /\n label: string;\n\n /* The key of the item /\n key: string;\n\n /* The URL to navigate to when the item is clicked, turns item into an a tag /\n to?: string;\n}\n\nexport interface SelectProps {\n /* Array of keys that should be disabled\n * @example [\"Thing 1\", \"Thing 2\"]\n /\n disabledKeys?: string[];\n\n /* The key of the default selected item /\n defaultSelectedKey?: string;\n\n /* Test ID for the select /\n \"data-testid\"?: string;\n\n /* Whether the select is disabled /\n isDisabled?: boolean;\n\n /* Array of items to display\n * @example [{ key: \"thing-1\", label: \"Thing 1\" }, { key: \"thing-2\", label: \"Thing 2\" }]\n * @see {@link SelectItem}\n /\n items: SelectItem[];\n\n /* Whether the select button is rounded\n * @default false\n /\n isRounded?: boolean;\n\n /* Label to display above the select\n * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#text\n /\n label?: string;\n\n /* The name of the select field /\n name: string;\n\n /* Callback fired when the menu closes /\n onClose?: () => void;\n\n /* Callback fired when the menu opens /\n onOpen?: () => void;\n\n /* Callback fired when selection changes /\n onSelectionChange?: (key: string) => void;\n\n /* Currently selected key /\n selectedKey?: string;\n}\n\n/\n A dropdown select menu that opens a popover on desktop and an action menu on mobile/touch devices.\n * Supports controlled and uncontrolled modes.\n \n API:\n * - {@link SelectProps}\n /\nexport function Select({\n label,\n name,\n isDisabled,\n disabledKeys,\n selectedKey,\n onSelectionChange,\n defaultSelectedKey,\n onOpen,\n onClose,\n items,\n isRounded = false,\n \"data-testid\": testId,\n}: SelectProps) {\n const [isOpen, setIsOpen] = useState(false);\n const isControlled = selectedKey !== undefined;\n const [internalSelectedKey, setInternalSelectedKey] = useState(\n defaultSelectedKey ?? \"\",\n );\n const { className: themeClass, style: themeStyle } = useTheme();\n const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const hiddenInputRef = useRef<HTMLInputElement>(null);\n\n // Handle controlled vs uncontrolled state\n const currentSelectedKey = isControlled\n ? (selectedKey as string)\n : internalSelectedKey;\n const selectedItem = items.find((item) => item.key === currentSelectedKey);\n\n const handleValueChange = (value: string) => {\n if (!isControlled) {\n setInternalSelectedKey(value);\n }\n onSelectionChange?.(value);\n\n // Update hidden input for form submission\n if (hiddenInputRef.current) {\n hiddenInputRef.current.value = value;\n hiddenInputRef.current.dispatchEvent(\n new Event(\"change\", { bubbles: true }),\n );\n }\n };\n\n const handleOpenChange = (open: boolean) => {\n setIsOpen(open);\n if (open) {\n onOpen?.();\n } else {\n onClose?.();\n }\n };\n\n // Update internal state when controlled selectedKey changes\n useEffect(() => {\n if (isControlled) {\n setInternalSelectedKey(selectedKey);\n }\n }, [isControlled]);\n\n const actionItems: ActionMenuAction[] = items.map((item) => ({\n key: item.key,\n label: item.label,\n to: item.to,\n onAction: () => {\n handleValueChange(item.key);\n setIsOpen(false);\n },\n }));\n\n if (isMobile) {\n return (\n <div\n className=\"proton-Select\"\n aria-label={label \|\| name}\n aria-disabled={isDisabled}\n >\n {label && (\n <div className=\"proton-Select__label\" data-testid=\"select-label\">\n {label}\n </div>\n )}\n\n {/ Hidden input for form submission /}\n <input\n ref={hiddenInputRef}\n type=\"hidden\"\n name={name}\n value={currentSelectedKey}\n data-testid=\"hidden-select-container\"\n />\n\n <SelectButton\n isOpen={isOpen}\n isRounded={isRounded}\n ref={triggerRef}\n disabled={isDisabled}\n ariaLabel={label \|\| name}\n data-testid={testId}\n onClick={() => setIsOpen(true)}\n selectedItem={selectedItem}\n />\n\n <ActionMenu\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n actions={actionItems}\n selectedKeys={[currentSelectedKey]}\n disabledKeys={disabledKeys}\n />\n </div>\n );\n }\n\n return (\n <div\n className=\"proton-Select\"\n aria-label={label \|\| name}\n aria-disabled={isDisabled}\n >\n {label && (\n <div className=\"proton-Select__label\" data-testid=\"select-label\">\n {label}\n </div>\n )}\n\n {/ Hidden input for form submission */}\n <input\n ref={hiddenInputRef}\n type=\"hidden\"\n name={name}\n value={currentSelectedKey}\n data-testid=\"hidden-select-container\"\n />\n\n <RadixSelect.Root\n value={currentSelectedKey}\n onValueChange={handleValueChange}\n onOpenChange={handleOpenChange}\n disabled={isDisabled}\n >\n <RadixSelect.Trigger asChild>\n <SelectButton\n isRounded={isRounded}\n isOpen={isOpen}\n ref={triggerRef}\n disabled={isDisabled}\n ariaLabel={label \|\| name}\n data-testid={testId}\n selectedItem={selectedItem}\n />\n </RadixSelect.Trigger>\n\n <RadixSelect.Portal>\n <RadixSelect.Content\n className={csx(\n \"proton-Menu\",\n \"proton-MenuTrigger__menu\",\n \"proton-Elevation--glass\",\n themeClass,\n )}\n style={themeStyle as CSSProperties}\n position=\"popper\"\n >\n <RadixSelect.Viewport>\n {items.map((item) => (\n <RadixSelect.Item\n key={item.key}\n value={item.key}\n disabled={disabledKeys?.includes(item.key)}\n className=\"proton-Menu__item\"\n >\n <RadixSelect.ItemText>{item.label}</RadixSelect.ItemText>\n </RadixSelect.Item>\n ))}\n </RadixSelect.Viewport>\n </RadixSelect.Content>\n </RadixSelect.Portal>\n </RadixSelect.Root>\n </div>\n );\n}\n\nSelect.displayName = \"ProtonUISelect\";\n"],"names":["SelectButton","forwardRef","disabled","isOpen","onClick","isRounded","selectedItem","ariaLabel","testId","ref","jsxs","csx","jsx","CaretDownIcon","Select","label","name","isDisabled","disabledKeys","selectedKey","onSelectionChange","defaultSelectedKey","onOpen","onClose","items","setIsOpen","useState","isControlled","internalSelectedKey","setInternalSelectedKey","themeClass","themeStyle","useTheme","isMobile","useBreakpoint","BREAKPOINTS","triggerRef","useRef","hiddenInputRef","currentSelectedKey","item","handleValueChange","value","handleOpenChange","open","useEffect","actionItems","ActionMenu","RadixSelect"],"mappings":"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"}
1	+ {"version":3,"file":"Select.es.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n forwardRef,\n useEffect,\n useRef,\n useState,\n type ForwardedRef,\n type CSSProperties,\n} from \"react\";\nimport { Select as RadixSelect } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { csx } from \"../../utils\";\n\nimport { ActionMenu, type ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { CaretDown as CaretDownIcon } from \"../Icon\";\n\nimport \"./Select.css\";\nimport \"../Menu/Menu.css\";\nimport \"../Elevation/Elevation.css\";\n\ninterface SelectButtonProps {\n disabled?: boolean;\n isOpen?: boolean;\n selectedItem?: SelectItem;\n onClick?: () => void;\n isRounded?: boolean;\n ariaLabel?: string;\n \"data-testid\"?: string;\n}\n\nconst SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(\n (\n {\n disabled,\n isOpen,\n onClick,\n isRounded,\n selectedItem,\n ariaLabel,\n \"data-testid\": testId,\n },\n ref: ForwardedRef<HTMLButtonElement>,\n ) => {\n return (\n <button\n ref={ref}\n type=\"button\"\n role=\"combobox\"\n aria-label={ariaLabel}\n aria-expanded={isOpen}\n aria-autocomplete=\"none\"\n data-state={isOpen ? \"open\" : \"closed\"}\n data-testid={testId}\n disabled={disabled}\n onClick={onClick}\n className={csx(\n \"proton-Select__trigger\",\n \"proton-Elevation--glass\",\n disabled && \"proton-Select__trigger--disabled\",\n !isOpen && \"proton-Select__trigger--closed\",\n isOpen && \"proton-Select__trigger--opened\",\n isRounded && \"proton-Select__trigger--rounded\",\n )}\n >\n <span className=\"proton-Select__value\">\n {selectedItem ? selectedItem.label : \"Select an option\"}\n </span>\n <span\n className={csx(\n \"proton-Select__trigger_icon\",\n isOpen && \"proton-Select__trigger_icon--flipped\",\n )}\n >\n <CaretDownIcon size={16} />\n </span>\n </button>\n );\n },\n);\n\nSelectButton.displayName = \"ProtonUISelectButton\";\n\nexport interface SelectItem {\n /** The label to display for the item /\n label: string;\n\n /* The key of the item /\n key: string;\n\n /* The URL to navigate to when the item is clicked, turns item into an a tag /\n to?: string;\n}\n\nexport interface SelectProps {\n /* Array of keys that should be disabled\n * @example [\"Thing 1\", \"Thing 2\"]\n /\n disabledKeys?: string[];\n\n /* The key of the default selected item /\n defaultSelectedKey?: string;\n\n /* Test ID for the select /\n \"data-testid\"?: string;\n\n /* Whether the select is disabled /\n isDisabled?: boolean;\n\n /* Array of items to display\n * @example [{ key: \"thing-1\", label: \"Thing 1\" }, { key: \"thing-2\", label: \"Thing 2\" }]\n * @see {@link SelectItem}\n /\n items: SelectItem[];\n\n /* Whether the select button is rounded\n * @default false\n /\n isRounded?: boolean;\n\n /* Label to display above the select\n * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#text\n /\n label?: string;\n\n /* The name of the select field /\n name: string;\n\n /* Callback fired when the menu closes /\n onClose?: () => void;\n\n /* Callback fired when the menu opens /\n onOpen?: () => void;\n\n /* Callback fired when selection changes /\n onSelectionChange?: (key: string) => void;\n\n /* Currently selected key /\n selectedKey?: string;\n}\n\n/\n A dropdown select menu that opens a popover on desktop and an action menu on mobile/touch devices.\n * Supports controlled and uncontrolled modes.\n \n API:\n * - {@link SelectProps}\n /\nexport function Select({\n label,\n name,\n isDisabled,\n disabledKeys,\n selectedKey,\n onSelectionChange,\n defaultSelectedKey,\n onOpen,\n onClose,\n items,\n isRounded = false,\n \"data-testid\": testId,\n}: SelectProps) {\n const [isOpen, setIsOpen] = useState(false);\n const isControlled = selectedKey !== undefined;\n const [internalSelectedKey, setInternalSelectedKey] = useState(\n defaultSelectedKey ?? \"\",\n );\n const { className: themeClass, style: themeStyle } = useTheme();\n const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const hiddenInputRef = useRef<HTMLInputElement>(null);\n\n // Handle controlled vs uncontrolled state\n const currentSelectedKey = isControlled\n ? (selectedKey as string)\n : internalSelectedKey;\n const selectedItem = items.find((item) => item.key === currentSelectedKey);\n\n const handleValueChange = (value: string) => {\n if (!isControlled) {\n setInternalSelectedKey(value);\n }\n onSelectionChange?.(value);\n\n // Update hidden input for form submission\n if (hiddenInputRef.current) {\n hiddenInputRef.current.value = value;\n hiddenInputRef.current.dispatchEvent(\n new Event(\"change\", { bubbles: true }),\n );\n }\n };\n\n const handleOpenChange = (open: boolean) => {\n setIsOpen(open);\n if (open) {\n onOpen?.();\n } else {\n onClose?.();\n }\n };\n\n // Update internal state when controlled selectedKey changes\n useEffect(() => {\n if (isControlled) {\n setInternalSelectedKey(selectedKey);\n }\n }, [isControlled]);\n\n const actionItems: ActionMenuAction[] = items.map((item) => ({\n key: item.key,\n label: item.label,\n to: item.to,\n onAction: () => {\n handleValueChange(item.key);\n setIsOpen(false);\n },\n }));\n\n if (isMobile) {\n return (\n <div\n className=\"proton-Select\"\n aria-label={label \|\| name}\n aria-disabled={isDisabled}\n >\n {label && (\n <div className=\"proton-Select__label\" data-testid=\"select-label\">\n {label}\n </div>\n )}\n\n {/ Hidden input for form submission /}\n <input\n ref={hiddenInputRef}\n type=\"hidden\"\n name={name}\n value={currentSelectedKey}\n data-testid=\"hidden-select-container\"\n />\n\n <SelectButton\n isOpen={isOpen}\n isRounded={isRounded}\n ref={triggerRef}\n disabled={isDisabled}\n ariaLabel={label \|\| name}\n data-testid={testId}\n onClick={() => setIsOpen(true)}\n selectedItem={selectedItem}\n />\n\n <ActionMenu\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n actions={actionItems}\n selectedKeys={[currentSelectedKey]}\n disabledKeys={disabledKeys}\n />\n </div>\n );\n }\n\n return (\n <div\n className=\"proton-Select\"\n aria-label={label \|\| name}\n aria-disabled={isDisabled}\n >\n {label && (\n <div className=\"proton-Select__label\" data-testid=\"select-label\">\n {label}\n </div>\n )}\n\n {/ Hidden input for form submission */}\n <input\n ref={hiddenInputRef}\n type=\"hidden\"\n name={name}\n value={currentSelectedKey}\n data-testid=\"hidden-select-container\"\n />\n\n <RadixSelect.Root\n value={currentSelectedKey}\n onValueChange={handleValueChange}\n onOpenChange={handleOpenChange}\n disabled={isDisabled}\n >\n <RadixSelect.Trigger asChild>\n <SelectButton\n isRounded={isRounded}\n isOpen={isOpen}\n ref={triggerRef}\n disabled={isDisabled}\n ariaLabel={label \|\| name}\n data-testid={testId}\n selectedItem={selectedItem}\n />\n </RadixSelect.Trigger>\n\n <RadixSelect.Portal>\n <RadixSelect.Content\n className={csx(\n \"proton-Menu\",\n \"proton-MenuTrigger__menu\",\n \"proton-Elevation--glass\",\n themeClass,\n )}\n style={themeStyle as CSSProperties}\n position=\"popper\"\n >\n <RadixSelect.Viewport>\n {items.map((item) => (\n <RadixSelect.Item\n key={item.key}\n value={item.key}\n disabled={disabledKeys?.includes(item.key)}\n className=\"proton-Menu__item\"\n >\n <RadixSelect.ItemText>{item.label}</RadixSelect.ItemText>\n </RadixSelect.Item>\n ))}\n </RadixSelect.Viewport>\n </RadixSelect.Content>\n </RadixSelect.Portal>\n </RadixSelect.Root>\n </div>\n );\n}\n\nSelect.displayName = \"ProtonUISelect\";\n"],"names":["SelectButton","forwardRef","disabled","isOpen","onClick","isRounded","selectedItem","ariaLabel","testId","ref","jsxs","csx","jsx","CaretDownIcon","Select","label","name","isDisabled","disabledKeys","selectedKey","onSelectionChange","defaultSelectedKey","onOpen","onClose","items","setIsOpen","useState","isControlled","internalSelectedKey","setInternalSelectedKey","themeClass","themeStyle","useTheme","isMobile","useBreakpoint","BREAKPOINTS","triggerRef","useRef","hiddenInputRef","currentSelectedKey","item","handleValueChange","value","handleOpenChange","open","useEffect","actionItems","ActionMenu","RadixSelect"],"mappings":"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"}

package/dist/components/Text/TextEllipsis/TextEllipsis.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextEllipsis.cjs.js","sources":["../../../../src/components/Text/TextEllipsis/TextEllipsis.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../../utils\";\nimport \"./TextEllipsis.css\";\n\ninterface TextEllipsisProps {\n /*\n The content to display within the text ellipsis.\n /\n children: ReactNode;\n\n /\n The maximum width of the text container in any valid CSS unit (px, rem, em, %, etc.).\n * When the container width is less than this value, text will be truncated with an ellipsis.\n /\n maxWidth?: string \| number;\n\n /\n Whether to truncate the text to a single line. Default is true.\n * If false, the text will wrap to multiple lines.\n /\n singleLine?: boolean;\n\n /\n The number of lines to show before truncating with an ellipsis.\n * Only applies when singleLine is false.\n /\n lines?: number;\n\n /\n The title attribute to show on hover. If not provided and singleLine is true,\n * the children will be used as the title (if children is a string).\n /\n title?: string;\n\n /\n A ~~test~~ ID.\n /\n \"data-testid\"?: string;\n}\n\n/\n A component that displays text with an ellipsis when it overflows its container.\n \n API:\n * - {@link TextEllipsisProps}\n */\nexport const TextEllipsis = ({\n children,\n maxWidth,\n singleLine = true,\n lines = 1,\n title,\n \"data-testid\": testId,\n}: TextEllipsisProps) => {\n return (\n <div\n className={csx(\n \"proton-TextEllipsis\",\n singleLine \|\| lines === 1\n ? \"proton-TextEllipsis--single-line\"\n : lines > 1\n ? \"proton-TextEllipsis--multi-line\"\n : \"\"\n )}\n style={{\n maxWidth: maxWidth,\n WebkitLineClamp: lines,\n }}\n title={title}\n data-testid={testId}\n >\n {children}\n </div>\n );\n};\n"],"names":["TextEllipsis","children","maxWidth","singleLine","lines","title","testId","jsx","csx"],"mappings":"uOAgDaA,EAAe,CAAC,CAC3B,SAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,MAAAC,EAAQ,EACR,MAAAC,EACA,cAAeC,CACjB,IAEIC,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,IACT,sBACAL,GAAcC,IAAU,EACpB,mCACAA,EAAQ,EACN,kCACA,EAAA,EAER,MAAO,CACL,SAAAF,EACA,gBAAiBE,CAAA,EAEnB,MAAAC,EACA,cAAaC,EAEZ,SAAAL,CAAA,CAAA"}
1	+ {"version":3,"file":"TextEllipsis.cjs.js","sources":["../../../../src/components/Text/TextEllipsis/TextEllipsis.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../../utils\";\nimport \"./TextEllipsis.css\";\n\ninterface TextEllipsisProps {\n /*\n The content to display within the text ellipsis.\n /\n children: ReactNode;\n\n /\n The maximum width of the text container in any valid CSS unit (px, rem, em, %, etc.).\n * When the container width is less than this value, text will be truncated with an ellipsis.\n /\n maxWidth?: string \| number;\n\n /\n Whether to truncate the text to a single line. Default is true.\n * If false, the text will wrap to multiple lines.\n /\n singleLine?: boolean;\n\n /\n The number of lines to show before truncating with an ellipsis.\n * Only applies when singleLine is false.\n /\n lines?: number;\n\n /\n The title attribute to show on hover. If not provided and singleLine is true,\n * the children will be used as the title (if children is a string).\n /\n title?: string;\n\n /\n Test id for the component.\n /\n \"data-testid\"?: string;\n}\n\n/\n A component that displays text with an ellipsis when it overflows its container.\n \n API:\n * - {@link TextEllipsisProps}\n */\nexport const TextEllipsis = ({\n children,\n maxWidth,\n singleLine = true,\n lines = 1,\n title,\n \"data-testid\": testId,\n}: TextEllipsisProps) => {\n return (\n <div\n className={csx(\n \"proton-TextEllipsis\",\n singleLine \|\| lines === 1\n ? \"proton-TextEllipsis--single-line\"\n : lines > 1\n ? \"proton-TextEllipsis--multi-line\"\n : \"\"\n )}\n style={{\n maxWidth: maxWidth,\n WebkitLineClamp: lines,\n }}\n title={title}\n data-testid={testId}\n >\n {children}\n </div>\n );\n};\n"],"names":["TextEllipsis","children","maxWidth","singleLine","lines","title","testId","jsx","csx"],"mappings":"uOAgDaA,EAAe,CAAC,CAC3B,SAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,MAAAC,EAAQ,EACR,MAAAC,EACA,cAAeC,CACjB,IAEIC,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,IACT,sBACAL,GAAcC,IAAU,EACpB,mCACAA,EAAQ,EACN,kCACA,EAAA,EAER,MAAO,CACL,SAAAF,EACA,gBAAiBE,CAAA,EAEnB,MAAAC,EACA,cAAaC,EAEZ,SAAAL,CAAA,CAAA"}

package/dist/components/Text/TextEllipsis/TextEllipsis.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextEllipsis.es.js","sources":["../../../../src/components/Text/TextEllipsis/TextEllipsis.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../../utils\";\nimport \"./TextEllipsis.css\";\n\ninterface TextEllipsisProps {\n /*\n The content to display within the text ellipsis.\n /\n children: ReactNode;\n\n /\n The maximum width of the text container in any valid CSS unit (px, rem, em, %, etc.).\n * When the container width is less than this value, text will be truncated with an ellipsis.\n /\n maxWidth?: string \| number;\n\n /\n Whether to truncate the text to a single line. Default is true.\n * If false, the text will wrap to multiple lines.\n /\n singleLine?: boolean;\n\n /\n The number of lines to show before truncating with an ellipsis.\n * Only applies when singleLine is false.\n /\n lines?: number;\n\n /\n The title attribute to show on hover. If not provided and singleLine is true,\n * the children will be used as the title (if children is a string).\n /\n title?: string;\n\n /\n A ~~test~~ ID.\n /\n \"data-testid\"?: string;\n}\n\n/\n A component that displays text with an ellipsis when it overflows its container.\n \n API:\n * - {@link TextEllipsisProps}\n */\nexport const TextEllipsis = ({\n children,\n maxWidth,\n singleLine = true,\n lines = 1,\n title,\n \"data-testid\": testId,\n}: TextEllipsisProps) => {\n return (\n <div\n className={csx(\n \"proton-TextEllipsis\",\n singleLine \|\| lines === 1\n ? \"proton-TextEllipsis--single-line\"\n : lines > 1\n ? \"proton-TextEllipsis--multi-line\"\n : \"\"\n )}\n style={{\n maxWidth: maxWidth,\n WebkitLineClamp: lines,\n }}\n title={title}\n data-testid={testId}\n >\n {children}\n </div>\n );\n};\n"],"names":["TextEllipsis","children","maxWidth","singleLine","lines","title","testId","jsx","csx"],"mappings":";;;AAgDO,MAAMA,IAAe,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,eAAeC;AACjB,MAEIC,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAL,KAAcC,MAAU,IACpB,qCACAA,IAAQ,IACN,oCACA;AAAA,IAAA;AAAA,IAER,OAAO;AAAA,MACL,UAAAF;AAAA,MACA,iBAAiBE;AAAA,IAAA;AAAA,IAEnB,OAAAC;AAAA,IACA,eAAaC;AAAA,IAEZ,UAAAL;AAAA,EAAA;AAAA;"}
1	+ {"version":3,"file":"TextEllipsis.es.js","sources":["../../../../src/components/Text/TextEllipsis/TextEllipsis.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../../utils\";\nimport \"./TextEllipsis.css\";\n\ninterface TextEllipsisProps {\n /*\n The content to display within the text ellipsis.\n /\n children: ReactNode;\n\n /\n The maximum width of the text container in any valid CSS unit (px, rem, em, %, etc.).\n * When the container width is less than this value, text will be truncated with an ellipsis.\n /\n maxWidth?: string \| number;\n\n /\n Whether to truncate the text to a single line. Default is true.\n * If false, the text will wrap to multiple lines.\n /\n singleLine?: boolean;\n\n /\n The number of lines to show before truncating with an ellipsis.\n * Only applies when singleLine is false.\n /\n lines?: number;\n\n /\n The title attribute to show on hover. If not provided and singleLine is true,\n * the children will be used as the title (if children is a string).\n /\n title?: string;\n\n /\n Test id for the component.\n /\n \"data-testid\"?: string;\n}\n\n/\n A component that displays text with an ellipsis when it overflows its container.\n \n API:\n * - {@link TextEllipsisProps}\n */\nexport const TextEllipsis = ({\n children,\n maxWidth,\n singleLine = true,\n lines = 1,\n title,\n \"data-testid\": testId,\n}: TextEllipsisProps) => {\n return (\n <div\n className={csx(\n \"proton-TextEllipsis\",\n singleLine \|\| lines === 1\n ? \"proton-TextEllipsis--single-line\"\n : lines > 1\n ? \"proton-TextEllipsis--multi-line\"\n : \"\"\n )}\n style={{\n maxWidth: maxWidth,\n WebkitLineClamp: lines,\n }}\n title={title}\n data-testid={testId}\n >\n {children}\n </div>\n );\n};\n"],"names":["TextEllipsis","children","maxWidth","singleLine","lines","title","testId","jsx","csx"],"mappings":";;;AAgDO,MAAMA,IAAe,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,eAAeC;AACjB,MAEIC,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAL,KAAcC,MAAU,IACpB,qCACAA,IAAQ,IACN,oCACA;AAAA,IAAA;AAAA,IAER,OAAO;AAAA,MACL,UAAAF;AAAA,MACA,iBAAiBE;AAAA,IAAA;AAAA,IAEnB,OAAAC;AAAA,IACA,eAAaC;AAAA,IAEZ,UAAAL;AAAA,EAAA;AAAA;"}

package/dist/components/Tooltip/ResponsiveTooltip.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResponsiveTooltip.cjs.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps, ~~TooltipPlacement~~ } from \"./Tooltip\";\nimport { Popover, PopoverProps } from \"../Popover/Popover\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps\n extends Omit<TooltipProps, \"placement\">,\n Omit<PopoverProps, \"trigger\" \| \"children\" \| \"side\"> {\n /*\n Placement/side of the tooltip/popover.\n * @default \"top\"\n /\n placement?: ~~TooltipPlacement~~;\n /\n Force a specific component type.\n * @default \"auto\"\n /\n forceComponent?: \"tooltip\" \| \"popover\" \| \"auto\";\n}\n\n/\n A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile devices.\n \n API:\n * - {@link ResponsiveTooltipProps}\n * - @extends {@link TooltipProps} \n * - @extends {@link PopoverProps}\n */\nexport function ResponsiveTooltip({\n children,\n content,\n placement = \"top\",\n align = \"center\",\n arrow,\n delay = 100,\n isDisabled,\n open,\n defaultOpen,\n onOpenChange,\n constrainWidth,\n disableTriggerClick,\n forceComponent = \"auto\",\n \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n if (content === \"\") return null;\n\n let usePopover: boolean;\n switch (forceComponent) {\n case \"popover\":\n usePopover = true;\n break;\n case \"tooltip\":\n usePopover = false;\n break;\n default:\n usePopover = isMobile;\n break;\n }\n\n if (!usePopover) {\n return (\n <Tooltip\n children={children}\n content={content}\n placement={placement}\n align={align}\n arrow={arrow}\n delay={delay}\n isDisabled={isDisabled}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n disableTriggerClick={disableTriggerClick}\n data-testid={testId}\n />\n );\n }\n\n return (\n <Popover\n trigger={children}\n side={placement}\n align={align}\n arrow={arrow}\n constrainWidth={constrainWidth}\n isDisabled={isDisabled}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n data-testid={testId}\n >\n {content}\n </Popover>\n );\n}\n\nResponsiveTooltip.displayName = \"ProtonUIResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","jsx","Popover","Tooltip"],"mappings":"iTA+BO,SAASA,EAAkB,CAChC,SAAAC,EACA,QAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EAAQ,SACR,MAAAC,EACA,MAAAC,EAAQ,IACR,WAAAC,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,eAAAC,EACA,oBAAAC,EACA,eAAAC,EAAiB,OACjB,cAAeC,CACjB,EAA2B,CACzB,MAAMC,EAAWC,EAAAA,cAAcC,EAAAA,YAAY,KAAK,EAEhD,GAAIf,IAAY,GAAI,OAAO,KAE3B,IAAIgB,EACJ,OAAQL,EAAA,CACN,IAAK,UACHK,EAAa,GACb,MACF,IAAK,UACHA,EAAa,GACb,MACF,QACEA,EAAaH,EACb,KAAA,CAGJ,OAAKG,EAmBHC,EAAAA,kBAAAA,IAACC,EAAAA,QAAA,CACC,QAASnB,EACT,KAAME,EACN,MAAAC,EACA,MAAAC,EACA,eAAAM,EACA,WAAAJ,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,cAAaI,EAEZ,SAAAZ,CAAA,CAAA,EA7BDiB,EAAAA,kBAAAA,IAACE,EAAAA,QAAA,CACC,SAAApB,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,YAAAE,EACA,aAAAC,EACA,oBAAAE,EACA,cAAaE,CAAA,CAAA,CAqBrB,CAEAd,EAAkB,YAAc"}
1	+ {"version":3,"file":"ResponsiveTooltip.cjs.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps } from \"./Tooltip\";\nimport { Popover, PopoverProps } from \"../Popover/Popover\";\nimport { BREAKPOINTS, type RadixSide } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps\n extends Omit<TooltipProps, \"placement\">,\n Omit<PopoverProps, \"trigger\" \| \"children\" \| \"side\"> {\n /*\n Placement/side of the tooltip/popover.\n * @default \"top\"\n /\n placement?: RadixSide;\n /\n Force a specific component type.\n * @default \"auto\"\n /\n forceComponent?: \"tooltip\" \| \"popover\" \| \"auto\";\n}\n\n/\n A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile devices.\n \n API:\n * - {@link ResponsiveTooltipProps}\n * - @extends {@link TooltipProps} \n * - @extends {@link PopoverProps}\n */\nexport function ResponsiveTooltip({\n children,\n content,\n placement = \"top\",\n align = \"center\",\n arrow,\n delay = 100,\n isDisabled,\n open,\n defaultOpen,\n onOpenChange,\n constrainWidth,\n disableTriggerClick,\n forceComponent = \"auto\",\n \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n if (content === \"\") return null;\n\n let usePopover: boolean;\n switch (forceComponent) {\n case \"popover\":\n usePopover = true;\n break;\n case \"tooltip\":\n usePopover = false;\n break;\n default:\n usePopover = isMobile;\n break;\n }\n\n if (!usePopover) {\n return (\n <Tooltip\n children={children}\n content={content}\n placement={placement}\n align={align}\n arrow={arrow}\n delay={delay}\n isDisabled={isDisabled}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n disableTriggerClick={disableTriggerClick}\n data-testid={testId}\n />\n );\n }\n\n return (\n <Popover\n trigger={children}\n side={placement}\n align={align}\n arrow={arrow}\n constrainWidth={constrainWidth}\n isDisabled={isDisabled}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n data-testid={testId}\n >\n {content}\n </Popover>\n );\n}\n\nResponsiveTooltip.displayName = \"ProtonUIResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","jsx","Popover","Tooltip"],"mappings":"iTA+BO,SAASA,EAAkB,CAChC,SAAAC,EACA,QAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EAAQ,SACR,MAAAC,EACA,MAAAC,EAAQ,IACR,WAAAC,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,eAAAC,EACA,oBAAAC,EACA,eAAAC,EAAiB,OACjB,cAAeC,CACjB,EAA2B,CACzB,MAAMC,EAAWC,EAAAA,cAAcC,EAAAA,YAAY,KAAK,EAEhD,GAAIf,IAAY,GAAI,OAAO,KAE3B,IAAIgB,EACJ,OAAQL,EAAA,CACN,IAAK,UACHK,EAAa,GACb,MACF,IAAK,UACHA,EAAa,GACb,MACF,QACEA,EAAaH,EACb,KAAA,CAGJ,OAAKG,EAmBHC,EAAAA,kBAAAA,IAACC,EAAAA,QAAA,CACC,QAASnB,EACT,KAAME,EACN,MAAAC,EACA,MAAAC,EACA,eAAAM,EACA,WAAAJ,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,cAAaI,EAEZ,SAAAZ,CAAA,CAAA,EA7BDiB,EAAAA,kBAAAA,IAACE,EAAAA,QAAA,CACC,SAAApB,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,YAAAE,EACA,aAAAC,EACA,oBAAAE,EACA,cAAaE,CAAA,CAAA,CAqBrB,CAEAd,EAAkB,YAAc"}

package/dist/components/Tooltip/ResponsiveTooltip.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResponsiveTooltip.es.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps, ~~TooltipPlacement~~ } from \"./Tooltip\";\nimport { Popover, PopoverProps } from \"../Popover/Popover\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps\n extends Omit<TooltipProps, \"placement\">,\n Omit<PopoverProps, \"trigger\" \| \"children\" \| \"side\"> {\n /*\n Placement/side of the tooltip/popover.\n * @default \"top\"\n /\n placement?: ~~TooltipPlacement~~;\n /\n Force a specific component type.\n * @default \"auto\"\n /\n forceComponent?: \"tooltip\" \| \"popover\" \| \"auto\";\n}\n\n/\n A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile devices.\n \n API:\n * - {@link ResponsiveTooltipProps}\n * - @extends {@link TooltipProps} \n * - @extends {@link PopoverProps}\n */\nexport function ResponsiveTooltip({\n children,\n content,\n placement = \"top\",\n align = \"center\",\n arrow,\n delay = 100,\n isDisabled,\n open,\n defaultOpen,\n onOpenChange,\n constrainWidth,\n disableTriggerClick,\n forceComponent = \"auto\",\n \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n if (content === \"\") return null;\n\n let usePopover: boolean;\n switch (forceComponent) {\n case \"popover\":\n usePopover = true;\n break;\n case \"tooltip\":\n usePopover = false;\n break;\n default:\n usePopover = isMobile;\n break;\n }\n\n if (!usePopover) {\n return (\n <Tooltip\n children={children}\n content={content}\n placement={placement}\n align={align}\n arrow={arrow}\n delay={delay}\n isDisabled={isDisabled}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n disableTriggerClick={disableTriggerClick}\n data-testid={testId}\n />\n );\n }\n\n return (\n <Popover\n trigger={children}\n side={placement}\n align={align}\n arrow={arrow}\n constrainWidth={constrainWidth}\n isDisabled={isDisabled}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n data-testid={testId}\n >\n {content}\n </Popover>\n );\n}\n\nResponsiveTooltip.displayName = \"ProtonUIResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","jsx","Popover","Tooltip"],"mappings":";;;;;AA+BO,SAASA,EAAkB;AAAA,EAChC,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,eAAeC;AACjB,GAA2B;AACzB,QAAMC,IAAWC,EAAcC,EAAY,KAAK;AAEhD,MAAIf,MAAY,GAAI,QAAO;AAE3B,MAAIgB;AACJ,UAAQL,GAAA;AAAA,IACN,KAAK;AACH,MAAAK,IAAa;AACb;AAAA,IACF,KAAK;AACH,MAAAA,IAAa;AACb;AAAA,IACF;AACE,MAAAA,IAAaH;AACb;AAAA,EAAA;AAGJ,SAAKG,IAmBHC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASnB;AAAA,MACT,MAAME;AAAA,MACN,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,gBAAAM;AAAA,MACA,YAAAJ;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAaI;AAAA,MAEZ,UAAAZ;AAAA,IAAA;AAAA,EAAA,IA7BDiB,gBAAAA,EAAAA;AAAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAApB;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,aAAAE;AAAA,MACA,cAAAC;AAAA,MACA,qBAAAE;AAAA,MACA,eAAaE;AAAA,IAAA;AAAA,EAAA;AAqBrB;AAEAd,EAAkB,cAAc;"}
1	+ {"version":3,"file":"ResponsiveTooltip.es.js","sources":["../../../src/components/Tooltip/ResponsiveTooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip, TooltipProps } from \"./Tooltip\";\nimport { Popover, PopoverProps } from \"../Popover/Popover\";\nimport { BREAKPOINTS, type RadixSide } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nexport interface ResponsiveTooltipProps\n extends Omit<TooltipProps, \"placement\">,\n Omit<PopoverProps, \"trigger\" \| \"children\" \| \"side\"> {\n /*\n Placement/side of the tooltip/popover.\n * @default \"top\"\n /\n placement?: RadixSide;\n /\n Force a specific component type.\n * @default \"auto\"\n /\n forceComponent?: \"tooltip\" \| \"popover\" \| \"auto\";\n}\n\n/\n A responsive component that automatically renders as Tooltip on desktop\n * and Popover on mobile devices.\n \n API:\n * - {@link ResponsiveTooltipProps}\n * - @extends {@link TooltipProps} \n * - @extends {@link PopoverProps}\n */\nexport function ResponsiveTooltip({\n children,\n content,\n placement = \"top\",\n align = \"center\",\n arrow,\n delay = 100,\n isDisabled,\n open,\n defaultOpen,\n onOpenChange,\n constrainWidth,\n disableTriggerClick,\n forceComponent = \"auto\",\n \"data-testid\": testId,\n}: ResponsiveTooltipProps) {\n const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n\n if (content === \"\") return null;\n\n let usePopover: boolean;\n switch (forceComponent) {\n case \"popover\":\n usePopover = true;\n break;\n case \"tooltip\":\n usePopover = false;\n break;\n default:\n usePopover = isMobile;\n break;\n }\n\n if (!usePopover) {\n return (\n <Tooltip\n children={children}\n content={content}\n placement={placement}\n align={align}\n arrow={arrow}\n delay={delay}\n isDisabled={isDisabled}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n disableTriggerClick={disableTriggerClick}\n data-testid={testId}\n />\n );\n }\n\n return (\n <Popover\n trigger={children}\n side={placement}\n align={align}\n arrow={arrow}\n constrainWidth={constrainWidth}\n isDisabled={isDisabled}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n data-testid={testId}\n >\n {content}\n </Popover>\n );\n}\n\nResponsiveTooltip.displayName = \"ProtonUIResponsiveTooltip\";\n"],"names":["ResponsiveTooltip","children","content","placement","align","arrow","delay","isDisabled","open","defaultOpen","onOpenChange","constrainWidth","disableTriggerClick","forceComponent","testId","isMobile","useBreakpoint","BREAKPOINTS","usePopover","jsx","Popover","Tooltip"],"mappings":";;;;;AA+BO,SAASA,EAAkB;AAAA,EAChC,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,eAAeC;AACjB,GAA2B;AACzB,QAAMC,IAAWC,EAAcC,EAAY,KAAK;AAEhD,MAAIf,MAAY,GAAI,QAAO;AAE3B,MAAIgB;AACJ,UAAQL,GAAA;AAAA,IACN,KAAK;AACH,MAAAK,IAAa;AACb;AAAA,IACF,KAAK;AACH,MAAAA,IAAa;AACb;AAAA,IACF;AACE,MAAAA,IAAaH;AACb;AAAA,EAAA;AAGJ,SAAKG,IAmBHC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASnB;AAAA,MACT,MAAME;AAAA,MACN,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,gBAAAM;AAAA,MACA,YAAAJ;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAaI;AAAA,MAEZ,UAAAZ;AAAA,IAAA;AAAA,EAAA,IA7BDiB,gBAAAA,EAAAA;AAAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAApB;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,aAAAE;AAAA,MACA,cAAAC;AAAA,MACA,qBAAAE;AAAA,MACA,eAAaE;AAAA,IAAA;AAAA,EAAA;AAqBrB;AAEAd,EAAkB,cAAc;"}

package/dist/constants/breakpoint.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breakpoint.cjs.js","sources":["../../src/constants/breakpoint.ts"],"sourcesContent":["export const BREAKPOINTS = {\n SMALL: 576,\n MEDIUM: 768,\n LARGE: 992,\n X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n"],"names":["BREAKPOINTS"],"mappings":"gFAAO,MAAMA,EAAc,CACzB,MAAO,IACP,OAAQ,IACR,MAAO,IACP,QAAS,IACX"}
1	+ {"version":3,"file":"breakpoint.cjs.js","sources":["../../src/constants/breakpoint.ts"],"sourcesContent":["export const BREAKPOINTS = {\n SMALL: 576,\n MEDIUM: 768,\n LARGE: 992,\n X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n\nexport type BreakpointDirection = \"up\" \| \"down\";\n"],"names":["BREAKPOINTS"],"mappings":"gFAAO,MAAMA,EAAc,CACzB,MAAO,IACP,OAAQ,IACR,MAAO,IACP,QAAS,IACX"}

package/dist/constants/breakpoint.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breakpoint.es.js","sources":["../../src/constants/breakpoint.ts"],"sourcesContent":["export const BREAKPOINTS = {\n SMALL: 576,\n MEDIUM: 768,\n LARGE: 992,\n X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n"],"names":["BREAKPOINTS"],"mappings":"AAAO,MAAMA,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX;"}
1	+ {"version":3,"file":"breakpoint.es.js","sources":["../../src/constants/breakpoint.ts"],"sourcesContent":["export const BREAKPOINTS = {\n SMALL: 576,\n MEDIUM: 768,\n LARGE: 992,\n X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n\nexport type BreakpointDirection = \"up\" \| \"down\";\n"],"names":["BREAKPOINTS"],"mappings":"AAAO,MAAMA,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX;"}

package/dist/constants.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 export declare type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];
+export declare type BreakpointDirection = "up" | "down";
 export declare const BREAKPOINTS: {
     SMALL: number;
     MEDIUM: number;

package/dist/dark.d.ts CHANGED Viewed

@@ -42,7 +42,6 @@ declare type ProtonPalette = {
     };
     PRIMARY: ProtonColorScale;
     SECONDARY: ProtonColorScale;
-    GRAYSCALE: ProtonColorScale;
 };
 declare interface ProtonStyleSheet {

package/dist/design/darkTheme/colors.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("../colors.cjs.js"),A="#f7f9fb",L=A,T="rgba(174, 175, 177, 0.21)",E={SUPER_DARK:"#111212",DARK:"#1e1f21",MEDIUM:"#232629",MEDIUM_LIGHT:"#2b2d30",LIGHT:"#43464a",LIGHTEST:"#63676b",SUPER_LIGHT:"#8a8e91",WHITE:A},D={SUPER_DARK:"#142736",DARK:"#22445d",MEDIUM:"#306082",MEDIUM_LIGHT:"#3e7ca8",LIGHT:"#5795c1",LIGHTEST:"#a2c4dd",SUPER_LIGHT:"#dae7f1",WHITE:A},I={BASE_COLOR:R.BACKGROUNDS.BLACK,BRAND:R.BRAND,GRAYSCALE:E,PRIMARY:R.BRAND_PRIMARY_SCALE,SECONDARY:D};exports.BORDER=L;exports.DARK_GRAYSCALE=E;exports.DARK_PALETTE=I;exports.DARK_SECONDARY=D;exports.ELEVATION=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("../colors.cjs.js"),A="#f7f9fb",D=A,T="rgba(174, 175, 177, 0.21)",I={SUPER_DARK:"#111212",DARK:"#1e1f21",MEDIUM:"#232629",MEDIUM_LIGHT:"#2b2d30",LIGHT:"#43464a",LIGHTEST:"#63676b",SUPER_LIGHT:"#8a8e91",WHITE:A},E={SUPER_DARK:"#142736",DARK:"#22445d",MEDIUM:"#306082",MEDIUM_LIGHT:"#3e7ca8",LIGHT:"#5795c1",LIGHTEST:"#a2c4dd",SUPER_LIGHT:"#dae7f1",WHITE:A},L={BASE_COLOR:R.BACKGROUNDS.BLACK,BRAND:R.BRAND,PRIMARY:R.BRAND_PRIMARY_SCALE,SECONDARY:E};exports.BORDER=D;exports.DARK_GRAYSCALE=I;exports.DARK_PALETTE=L;exports.DARK_SECONDARY=E;exports.ELEVATION=T;
 //# sourceMappingURL=colors.cjs.js.map

package/dist/design/darkTheme/colors.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"colors.cjs.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst WHITE = \"#f7f9fb\";\nexport const BORDER = WHITE;\nexport const ELEVATION = \"rgba(174, 175, 177, 0.21)\";\nexport const DARK_GRAYSCALE: ProtonColorScale = {\n SUPER_DARK: \"#111212\",\n DARK: \"#1e1f21\",\n MEDIUM: \"#232629\",\n MEDIUM_LIGHT: \"#2b2d30\",\n LIGHT: \"#43464a\",\n LIGHTEST: \"#63676b\",\n SUPER_LIGHT: \"#8a8e91\",\n WHITE: WHITE,\n};\n\nexport const DARK_SECONDARY = {\n SUPER_DARK: \"#142736\",\n DARK: \"#22445d\",\n MEDIUM: \"#306082\",\n MEDIUM_LIGHT: \"#3e7ca8\",\n LIGHT: \"#5795c1\",\n LIGHTEST: \"#a2c4dd\",\n SUPER_LIGHT: \"#dae7f1\",\n WHITE: WHITE,\n};\n\nexport const DARK_PALETTE: ProtonPalette = {\n BASE_COLOR: BACKGROUNDS.BLACK,\n BRAND,\n ~~GRAYSCALE: DARK_GRAYSCALE,\n~~ PRIMARY: BRAND_PRIMARY_SCALE,\n SECONDARY: DARK_SECONDARY,\n} as const;\n"],"names":["WHITE","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":"oHAGMA,EAAQ,UACDC,EAASD,EACTE,EAAY,4BACZC,EAAmC,CAC9C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAAH,CACF,EAEaI,EAAiB,CAC5B,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAAJ,CACF,EAEaK,EAA8B,CACzC,WAAYC,EAAAA,YAAY,MAAA,MACxBC,EAAAA,MACA,~~UAAWJ~~,~~EACX,QAASK,~~EAAAA,oBACT,UAAWJ,CACb"}
1	+ {"version":3,"file":"colors.cjs.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst WHITE = \"#f7f9fb\";\nexport const BORDER = WHITE;\nexport const ELEVATION = \"rgba(174, 175, 177, 0.21)\";\nexport const DARK_GRAYSCALE: ProtonColorScale = {\n SUPER_DARK: \"#111212\",\n DARK: \"#1e1f21\",\n MEDIUM: \"#232629\",\n MEDIUM_LIGHT: \"#2b2d30\",\n LIGHT: \"#43464a\",\n LIGHTEST: \"#63676b\",\n SUPER_LIGHT: \"#8a8e91\",\n WHITE: WHITE,\n};\n\nexport const DARK_SECONDARY = {\n SUPER_DARK: \"#142736\",\n DARK: \"#22445d\",\n MEDIUM: \"#306082\",\n MEDIUM_LIGHT: \"#3e7ca8\",\n LIGHT: \"#5795c1\",\n LIGHTEST: \"#a2c4dd\",\n SUPER_LIGHT: \"#dae7f1\",\n WHITE: WHITE,\n};\n\nexport const DARK_PALETTE: ProtonPalette = {\n BASE_COLOR: BACKGROUNDS.BLACK,\n BRAND,\n PRIMARY: BRAND_PRIMARY_SCALE,\n SECONDARY: DARK_SECONDARY,\n} as const;\n"],"names":["WHITE","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":"oHAGMA,EAAQ,UACDC,EAASD,EACTE,EAAY,4BACZC,EAAmC,CAC9C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAAH,CACF,EAEaI,EAAiB,CAC5B,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAAJ,CACF,EAEaK,EAA8B,CACzC,WAAYC,EAAAA,YAAY,MAAA,MACxBC,EAAAA,MACA,QAASC,EAAAA,oBACT,UAAWJ,CACb"}

package/dist/design/darkTheme/colors.es.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { BRAND_PRIMARY_SCALE as A, BRAND as E, BACKGROUNDS as D } from "../colors.es.js";
-const R = "#f7f9fb", S = R, _ = "rgba(174, 175, 177, 0.21)", I = {
+const R = "#f7f9fb", T = R, S = "rgba(174, 175, 177, 0.21)", _ = {
   SUPER_DARK: "#111212",
   DARK: "#1e1f21",
   MEDIUM: "#232629",
@@ -8,7 +8,7 @@ const R = "#f7f9fb", S = R, _ = "rgba(174, 175, 177, 0.21)", I = {
   LIGHTEST: "#63676b",
   SUPER_LIGHT: "#8a8e91",
   WHITE: R
-}, L = {
+}, I = {
   SUPER_DARK: "#142736",
   DARK: "#22445d",
   MEDIUM: "#306082",
@@ -20,15 +20,14 @@ const R = "#f7f9fb", S = R, _ = "rgba(174, 175, 177, 0.21)", I = {
 }, G = {
   BASE_COLOR: D.BLACK,
   BRAND: E,
-  GRAYSCALE: I,
   PRIMARY: A,
-  SECONDARY: L
+  SECONDARY: I
 };
 export {
-  S as BORDER,
-  I as DARK_GRAYSCALE,
+  T as BORDER,
+  _ as DARK_GRAYSCALE,
   G as DARK_PALETTE,
-  L as DARK_SECONDARY,
-  _ as ELEVATION
+  I as DARK_SECONDARY,
+  S as ELEVATION
 };
 //# sourceMappingURL=colors.es.js.map

package/dist/design/darkTheme/colors.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"colors.es.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst WHITE = \"#f7f9fb\";\nexport const BORDER = WHITE;\nexport const ELEVATION = \"rgba(174, 175, 177, 0.21)\";\nexport const DARK_GRAYSCALE: ProtonColorScale = {\n SUPER_DARK: \"#111212\",\n DARK: \"#1e1f21\",\n MEDIUM: \"#232629\",\n MEDIUM_LIGHT: \"#2b2d30\",\n LIGHT: \"#43464a\",\n LIGHTEST: \"#63676b\",\n SUPER_LIGHT: \"#8a8e91\",\n WHITE: WHITE,\n};\n\nexport const DARK_SECONDARY = {\n SUPER_DARK: \"#142736\",\n DARK: \"#22445d\",\n MEDIUM: \"#306082\",\n MEDIUM_LIGHT: \"#3e7ca8\",\n LIGHT: \"#5795c1\",\n LIGHTEST: \"#a2c4dd\",\n SUPER_LIGHT: \"#dae7f1\",\n WHITE: WHITE,\n};\n\nexport const DARK_PALETTE: ProtonPalette = {\n BASE_COLOR: BACKGROUNDS.BLACK,\n BRAND,\n ~~GRAYSCALE: DARK_GRAYSCALE,\n~~ PRIMARY: BRAND_PRIMARY_SCALE,\n SECONDARY: DARK_SECONDARY,\n} as const;\n"],"names":["WHITE","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":";AAGA,MAAMA,IAAQ,WACDC,IAASD,GACTE,IAAY,6BACZC,IAAmC;AAAA,EAC9C,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAAH;AACF,GAEaI,IAAiB;AAAA,EAC5B,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAAJ;AACF,GAEaK,IAA8B;AAAA,EACzC,YAAYC,EAAY;AAAA,EACxB,OAAAC;AAAA,EACA,~~WAAWJ~~;AAAA,~~EACX,SAASK;AAAA,~~EACT,WAAWJ;AACb;"}
1	+ {"version":3,"file":"colors.es.js","sources":["../../../src/design/darkTheme/colors.ts"],"sourcesContent":["import { BACKGROUNDS, BRAND, BRAND_PRIMARY_SCALE } from \"../colors\";\nimport type { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst WHITE = \"#f7f9fb\";\nexport const BORDER = WHITE;\nexport const ELEVATION = \"rgba(174, 175, 177, 0.21)\";\nexport const DARK_GRAYSCALE: ProtonColorScale = {\n SUPER_DARK: \"#111212\",\n DARK: \"#1e1f21\",\n MEDIUM: \"#232629\",\n MEDIUM_LIGHT: \"#2b2d30\",\n LIGHT: \"#43464a\",\n LIGHTEST: \"#63676b\",\n SUPER_LIGHT: \"#8a8e91\",\n WHITE: WHITE,\n};\n\nexport const DARK_SECONDARY = {\n SUPER_DARK: \"#142736\",\n DARK: \"#22445d\",\n MEDIUM: \"#306082\",\n MEDIUM_LIGHT: \"#3e7ca8\",\n LIGHT: \"#5795c1\",\n LIGHTEST: \"#a2c4dd\",\n SUPER_LIGHT: \"#dae7f1\",\n WHITE: WHITE,\n};\n\nexport const DARK_PALETTE: ProtonPalette = {\n BASE_COLOR: BACKGROUNDS.BLACK,\n BRAND,\n PRIMARY: BRAND_PRIMARY_SCALE,\n SECONDARY: DARK_SECONDARY,\n} as const;\n"],"names":["WHITE","BORDER","ELEVATION","DARK_GRAYSCALE","DARK_SECONDARY","DARK_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":";AAGA,MAAMA,IAAQ,WACDC,IAASD,GACTE,IAAY,6BACZC,IAAmC;AAAA,EAC9C,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAAH;AACF,GAEaI,IAAiB;AAAA,EAC5B,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAAJ;AACF,GAEaK,IAA8B;AAAA,EACzC,YAAYC,EAAY;AAAA,EACxB,OAAAC;AAAA,EACA,SAASC;AAAA,EACT,WAAWJ;AACb;"}

package/dist/design/generateStylesheet.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"generateStylesheet.cjs.js","sources":["../../src/design/generateStylesheet.ts"],"sourcesContent":["import { THEMES } from \"./theme\";\nimport { ProtonPalette } from \"./types\";\nimport { LIGHT_STYLESHEET } from \"./lightTheme/stylesheet\";\nimport { DARK_STYLESHEET } from \"./darkTheme/stylesheet\";\nimport { ProtonStyleSheet } from \"./types\";\n\nexport const generateStylesheet = (\n palette: ProtonPalette,\n theme: string\n): ProtonStyleSheet => {\n const themeVariables =\n theme === THEMES.DARK ? DARK_STYLESHEET : LIGHT_STYLESHEET;\n\n if (palette) {\n const customVars = generateCustomStylesheet(palette);\n return {\n ...themeVariables,\n ...customVars,\n };\n }\n\n return themeVariables;\n};\n\n//overrride theme colors in stylesheet\nconst generateCustomStylesheet = (\n palette: ProtonPalette\n): Partial<ProtonStyleSheet> => {\n return {\n \"--proton-color__primary\": palette.BRAND.PRIMARY,\n \"--proton-color__primary-light\": palette.BRAND.PRIMARY_LIGHT,\n \"--proton-color__primary-super-light\": palette.BRAND.PRIMARY_SUPER_LIGHT,\n \"--proton-color__secondary\": palette.BRAND.SECONDARY,\n \"--proton-color__secondary-light\": palette.BRAND.SECONDARY_LIGHT,\n \"--proton-color__secondary-super-light\":\n palette.BRAND.SECONDARY_SUPER_LIGHT,\n~~\n //TODO: add newly generated grayscale color scale\n~~ };\n};\n"],"names":["generateStylesheet","palette","theme","themeVariables","THEMES","DARK_STYLESHEET","LIGHT_STYLESHEET","customVars","generateCustomStylesheet"],"mappings":"yMAMaA,EAAqB,CAChCC,EACAC,IACqB,CACrB,MAAMC,EACJD,IAAUE,EAAAA,OAAO,KAAOC,EAAAA,gBAAkBC,EAAAA,iBAE5C,GAAIL,EAAS,CACX,MAAMM,EAAaC,EAAyBP,CAAO,EACnD,MAAO,CACL,GAAGE,EACH,GAAGI,CAAA,CAEP,CAEA,OAAOJ,CACT,EAGMK,EACJP,IAEO,CACL,0BAA2BA,EAAQ,MAAM,QACzC,gCAAiCA,EAAQ,MAAM,cAC/C,sCAAuCA,EAAQ,MAAM,oBACrD,4BAA6BA,EAAQ,MAAM,UAC3C,kCAAmCA,EAAQ,MAAM,gBACjD,wCACEA,EAAQ,MAAM,qBAAA"}
1	+ {"version":3,"file":"generateStylesheet.cjs.js","sources":["../../src/design/generateStylesheet.ts"],"sourcesContent":["import { THEMES } from \"./theme\";\nimport { ProtonPalette } from \"./types\";\nimport { LIGHT_STYLESHEET } from \"./lightTheme/stylesheet\";\nimport { DARK_STYLESHEET } from \"./darkTheme/stylesheet\";\nimport { ProtonStyleSheet } from \"./types\";\n\nexport const generateStylesheet = (\n palette: ProtonPalette,\n theme: string\n): ProtonStyleSheet => {\n const themeVariables =\n theme === THEMES.DARK ? DARK_STYLESHEET : LIGHT_STYLESHEET;\n\n if (palette) {\n const customVars = generateCustomStylesheet(palette);\n return {\n ...themeVariables,\n ...customVars,\n };\n }\n\n return themeVariables;\n};\n\n//overrride theme colors in stylesheet\nconst generateCustomStylesheet = (\n palette: ProtonPalette\n): Partial<ProtonStyleSheet> => {\n return {\n \"--proton-color__primary\": palette.BRAND.PRIMARY,\n \"--proton-color__primary-light\": palette.BRAND.PRIMARY_LIGHT,\n \"--proton-color__primary-super-light\": palette.BRAND.PRIMARY_SUPER_LIGHT,\n \"--proton-color__secondary\": palette.BRAND.SECONDARY,\n \"--proton-color__secondary-light\": palette.BRAND.SECONDARY_LIGHT,\n \"--proton-color__secondary-super-light\":\n palette.BRAND.SECONDARY_SUPER_LIGHT,\n };\n};\n"],"names":["generateStylesheet","palette","theme","themeVariables","THEMES","DARK_STYLESHEET","LIGHT_STYLESHEET","customVars","generateCustomStylesheet"],"mappings":"yMAMaA,EAAqB,CAChCC,EACAC,IACqB,CACrB,MAAMC,EACJD,IAAUE,EAAAA,OAAO,KAAOC,EAAAA,gBAAkBC,EAAAA,iBAE5C,GAAIL,EAAS,CACX,MAAMM,EAAaC,EAAyBP,CAAO,EACnD,MAAO,CACL,GAAGE,EACH,GAAGI,CAAA,CAEP,CAEA,OAAOJ,CACT,EAGMK,EACJP,IAEO,CACL,0BAA2BA,EAAQ,MAAM,QACzC,gCAAiCA,EAAQ,MAAM,cAC/C,sCAAuCA,EAAQ,MAAM,oBACrD,4BAA6BA,EAAQ,MAAM,UAC3C,kCAAmCA,EAAQ,MAAM,gBACjD,wCACEA,EAAQ,MAAM,qBAAA"}

package/dist/design/generateStylesheet.es.js CHANGED Viewed

@@ -18,7 +18,6 @@ const i = (o, _) => {
   "--proton-color__secondary": o.BRAND.SECONDARY,
   "--proton-color__secondary-light": o.BRAND.SECONDARY_LIGHT,
   "--proton-color__secondary-super-light": o.BRAND.SECONDARY_SUPER_LIGHT
-  //TODO: add newly generated grayscale color scale
 });
 export {
   i as generateStylesheet

package/dist/design/generateStylesheet.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"generateStylesheet.es.js","sources":["../../src/design/generateStylesheet.ts"],"sourcesContent":["import { THEMES } from \"./theme\";\nimport { ProtonPalette } from \"./types\";\nimport { LIGHT_STYLESHEET } from \"./lightTheme/stylesheet\";\nimport { DARK_STYLESHEET } from \"./darkTheme/stylesheet\";\nimport { ProtonStyleSheet } from \"./types\";\n\nexport const generateStylesheet = (\n palette: ProtonPalette,\n theme: string\n): ProtonStyleSheet => {\n const themeVariables =\n theme === THEMES.DARK ? DARK_STYLESHEET : LIGHT_STYLESHEET;\n\n if (palette) {\n const customVars = generateCustomStylesheet(palette);\n return {\n ...themeVariables,\n ...customVars,\n };\n }\n\n return themeVariables;\n};\n\n//overrride theme colors in stylesheet\nconst generateCustomStylesheet = (\n palette: ProtonPalette\n): Partial<ProtonStyleSheet> => {\n return {\n \"--proton-color__primary\": palette.BRAND.PRIMARY,\n \"--proton-color__primary-light\": palette.BRAND.PRIMARY_LIGHT,\n \"--proton-color__primary-super-light\": palette.BRAND.PRIMARY_SUPER_LIGHT,\n \"--proton-color__secondary\": palette.BRAND.SECONDARY,\n \"--proton-color__secondary-light\": palette.BRAND.SECONDARY_LIGHT,\n \"--proton-color__secondary-super-light\":\n palette.BRAND.SECONDARY_SUPER_LIGHT,\n~~\n //TODO: add newly generated grayscale color scale\n~~ };\n};\n"],"names":["generateStylesheet","palette","theme","themeVariables","THEMES","DARK_STYLESHEET","LIGHT_STYLESHEET","customVars","generateCustomStylesheet"],"mappings":";;;AAMO,MAAMA,IAAqB,CAChCC,GACAC,MACqB;AACrB,QAAMC,IACJD,MAAUE,EAAO,OAAOC,IAAkBC;AAE5C,MAAIL,GAAS;AACX,UAAMM,IAAaC,EAAyBP,CAAO;AACnD,WAAO;AAAA,MACL,GAAGE;AAAA,MACH,GAAGI;AAAA,IAAA;AAAA,EAEP;AAEA,SAAOJ;AACT,GAGMK,IAA2B,CAC/BP,OAEO;AAAA,EACL,2BAA2BA,EAAQ,MAAM;AAAA,EACzC,iCAAiCA,EAAQ,MAAM;AAAA,EAC/C,uCAAuCA,EAAQ,MAAM;AAAA,EACrD,6BAA6BA,EAAQ,MAAM;AAAA,EAC3C,mCAAmCA,EAAQ,MAAM;AAAA,EACjD,yCACEA,EAAQ,MAAM;AAAA;~~AAAA;~~"}
1	+ {"version":3,"file":"generateStylesheet.es.js","sources":["../../src/design/generateStylesheet.ts"],"sourcesContent":["import { THEMES } from \"./theme\";\nimport { ProtonPalette } from \"./types\";\nimport { LIGHT_STYLESHEET } from \"./lightTheme/stylesheet\";\nimport { DARK_STYLESHEET } from \"./darkTheme/stylesheet\";\nimport { ProtonStyleSheet } from \"./types\";\n\nexport const generateStylesheet = (\n palette: ProtonPalette,\n theme: string\n): ProtonStyleSheet => {\n const themeVariables =\n theme === THEMES.DARK ? DARK_STYLESHEET : LIGHT_STYLESHEET;\n\n if (palette) {\n const customVars = generateCustomStylesheet(palette);\n return {\n ...themeVariables,\n ...customVars,\n };\n }\n\n return themeVariables;\n};\n\n//overrride theme colors in stylesheet\nconst generateCustomStylesheet = (\n palette: ProtonPalette\n): Partial<ProtonStyleSheet> => {\n return {\n \"--proton-color__primary\": palette.BRAND.PRIMARY,\n \"--proton-color__primary-light\": palette.BRAND.PRIMARY_LIGHT,\n \"--proton-color__primary-super-light\": palette.BRAND.PRIMARY_SUPER_LIGHT,\n \"--proton-color__secondary\": palette.BRAND.SECONDARY,\n \"--proton-color__secondary-light\": palette.BRAND.SECONDARY_LIGHT,\n \"--proton-color__secondary-super-light\":\n palette.BRAND.SECONDARY_SUPER_LIGHT,\n };\n};\n"],"names":["generateStylesheet","palette","theme","themeVariables","THEMES","DARK_STYLESHEET","LIGHT_STYLESHEET","customVars","generateCustomStylesheet"],"mappings":";;;AAMO,MAAMA,IAAqB,CAChCC,GACAC,MACqB;AACrB,QAAMC,IACJD,MAAUE,EAAO,OAAOC,IAAkBC;AAE5C,MAAIL,GAAS;AACX,UAAMM,IAAaC,EAAyBP,CAAO;AACnD,WAAO;AAAA,MACL,GAAGE;AAAA,MACH,GAAGI;AAAA,IAAA;AAAA,EAEP;AAEA,SAAOJ;AACT,GAGMK,IAA2B,CAC/BP,OAEO;AAAA,EACL,2BAA2BA,EAAQ,MAAM;AAAA,EACzC,iCAAiCA,EAAQ,MAAM;AAAA,EAC/C,uCAAuCA,EAAQ,MAAM;AAAA,EACrD,6BAA6BA,EAAQ,MAAM;AAAA,EAC3C,mCAAmCA,EAAQ,MAAM;AAAA,EACjD,yCACEA,EAAQ,MAAM;AAAA;"}

package/dist/design/lightTheme/colors.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("../colors.cjs.js"),D="#DDDDDD",I=D,A="#F7F8F9",R={SUPER_DARK:"#141211",DARK:"#4D4D4D",MEDIUM:"#7D7D7D",MEDIUM_LIGHT:"#B1B1B1",LIGHT:D,LIGHTEST:"#F0F1F2",SUPER_LIGHT:A,WHITE:"#FFFFFF"},T={SUPER_DARK:"#032026",DARK:"#084657",MEDIUM:"#2085BA",MEDIUM_LIGHT:"#44A8EB",LIGHT:"#70B9F6",LIGHTEST:"#9DCBFC",SUPER_LIGHT:"#C8DFFF",WHITE:"#f5f9ff"},L={BASE_COLOR:E.BACKGROUNDS.WHITE,BRAND:E.BRAND,GRAYSCALE:R,PRIMARY:E.BRAND_PRIMARY_SCALE,SECONDARY:T};exports.BORDER=I;exports.ELEVATION=A;exports.LIGHT_GRAYSCALE=R;exports.LIGHT_PALETTE=L;exports.LIGHT_SECONDARY_SCALE=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("../colors.cjs.js"),D="#DDDDDD",T=D,A="#F7F8F9",I={SUPER_DARK:"#141211",DARK:"#4D4D4D",MEDIUM:"#7D7D7D",MEDIUM_LIGHT:"#B1B1B1",LIGHT:D,LIGHTEST:"#F0F1F2",SUPER_LIGHT:A,WHITE:"#FFFFFF"},R={SUPER_DARK:"#032026",DARK:"#084657",MEDIUM:"#2085BA",MEDIUM_LIGHT:"#44A8EB",LIGHT:"#70B9F6",LIGHTEST:"#9DCBFC",SUPER_LIGHT:"#C8DFFF",WHITE:"#f5f9ff"},L={BASE_COLOR:E.BACKGROUNDS.WHITE,BRAND:E.BRAND,PRIMARY:E.BRAND_PRIMARY_SCALE,SECONDARY:R};exports.BORDER=T;exports.ELEVATION=A;exports.LIGHT_GRAYSCALE=I;exports.LIGHT_PALETTE=L;exports.LIGHT_SECONDARY_SCALE=R;
 //# sourceMappingURL=colors.cjs.js.map

package/dist/design/lightTheme/colors.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"colors.cjs.js","sources":["../../../src/design/lightTheme/colors.ts"],"sourcesContent":["import {\n BACKGROUNDS,\n BRAND,\n BRAND_PRIMARY_SCALE,\n} from \"../colors\";\nimport { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst LIGHT_GRAY = \"#DDDDDD\";\nexport const BORDER = LIGHT_GRAY;\nexport const ELEVATION = \"#F7F8F9\";\nexport const LIGHT_GRAYSCALE: ProtonColorScale = {\n SUPER_DARK: \"#141211\",\n DARK: \"#4D4D4D\",\n MEDIUM: \"#7D7D7D\",\n MEDIUM_LIGHT: \"#B1B1B1\",\n LIGHT: LIGHT_GRAY,\n LIGHTEST: \"#F0F1F2\",\n SUPER_LIGHT: ELEVATION,\n WHITE: \"#FFFFFF\",\n};\n\nexport const LIGHT_SECONDARY_SCALE: ProtonColorScale = {\n SUPER_DARK: \"#032026\",\n DARK: \"#084657\",\n MEDIUM: \"#2085BA\",\n MEDIUM_LIGHT: \"#44A8EB\",\n LIGHT: \"#70B9F6\",\n LIGHTEST: \"#9DCBFC\",\n SUPER_LIGHT: \"#C8DFFF\",\n WHITE: \"#f5f9ff\",\n};\n\nexport const LIGHT_PALETTE: ProtonPalette = {\n BASE_COLOR: BACKGROUNDS.WHITE,\n BRAND,\n ~~GRAYSCALE: LIGHT_GRAYSCALE,\n~~ PRIMARY: BRAND_PRIMARY_SCALE,\n SECONDARY: LIGHT_SECONDARY_SCALE,\n};\n"],"names":["LIGHT_GRAY","BORDER","ELEVATION","LIGHT_GRAYSCALE","LIGHT_SECONDARY_SCALE","LIGHT_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":"oHAOMA,EAAa,UACNC,EAASD,EACTE,EAAY,UACZC,EAAoC,CAC/C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAOH,EACP,SAAU,UACV,YAAaE,EACb,MAAO,SACT,EAEaE,EAA0C,CACrD,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAO,SACT,EAEaC,EAA+B,CAC1C,WAAYC,EAAAA,YAAY,MAAA,MACxBC,EAAAA,MACA,~~UAAWJ~~,~~EACX,QAASK,~~EAAAA,oBACT,UAAWJ,CACb"}
1	+ {"version":3,"file":"colors.cjs.js","sources":["../../../src/design/lightTheme/colors.ts"],"sourcesContent":["import {\n BACKGROUNDS,\n BRAND,\n BRAND_PRIMARY_SCALE,\n} from \"../colors\";\nimport { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst LIGHT_GRAY = \"#DDDDDD\";\nexport const BORDER = LIGHT_GRAY;\nexport const ELEVATION = \"#F7F8F9\";\nexport const LIGHT_GRAYSCALE: ProtonColorScale = {\n SUPER_DARK: \"#141211\",\n DARK: \"#4D4D4D\",\n MEDIUM: \"#7D7D7D\",\n MEDIUM_LIGHT: \"#B1B1B1\",\n LIGHT: LIGHT_GRAY,\n LIGHTEST: \"#F0F1F2\",\n SUPER_LIGHT: ELEVATION,\n WHITE: \"#FFFFFF\",\n};\n\nexport const LIGHT_SECONDARY_SCALE: ProtonColorScale = {\n SUPER_DARK: \"#032026\",\n DARK: \"#084657\",\n MEDIUM: \"#2085BA\",\n MEDIUM_LIGHT: \"#44A8EB\",\n LIGHT: \"#70B9F6\",\n LIGHTEST: \"#9DCBFC\",\n SUPER_LIGHT: \"#C8DFFF\",\n WHITE: \"#f5f9ff\",\n};\n\nexport const LIGHT_PALETTE: ProtonPalette = {\n BASE_COLOR: BACKGROUNDS.WHITE,\n BRAND,\n PRIMARY: BRAND_PRIMARY_SCALE,\n SECONDARY: LIGHT_SECONDARY_SCALE,\n};\n"],"names":["LIGHT_GRAY","BORDER","ELEVATION","LIGHT_GRAYSCALE","LIGHT_SECONDARY_SCALE","LIGHT_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":"oHAOMA,EAAa,UACNC,EAASD,EACTE,EAAY,UACZC,EAAoC,CAC/C,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAOH,EACP,SAAU,UACV,YAAaE,EACb,MAAO,SACT,EAEaE,EAA0C,CACrD,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,aAAc,UACd,MAAO,UACP,SAAU,UACV,YAAa,UACb,MAAO,SACT,EAEaC,EAA+B,CAC1C,WAAYC,EAAAA,YAAY,MAAA,MACxBC,EAAAA,MACA,QAASC,EAAAA,oBACT,UAAWJ,CACb"}

package/dist/design/lightTheme/colors.es.js CHANGED Viewed

@@ -1,14 +1,14 @@
-import { BRAND_PRIMARY_SCALE as E, BRAND as A, BACKGROUNDS as R } from "../colors.es.js";
-const D = "#DDDDDD", G = D, I = "#F7F8F9", T = {
+import { BRAND_PRIMARY_SCALE as E, BRAND as I, BACKGROUNDS as R } from "../colors.es.js";
+const D = "#DDDDDD", F = D, A = "#F7F8F9", G = {
   SUPER_DARK: "#141211",
   DARK: "#4D4D4D",
   MEDIUM: "#7D7D7D",
   MEDIUM_LIGHT: "#B1B1B1",
   LIGHT: D,
   LIGHTEST: "#F0F1F2",
-  SUPER_LIGHT: I,
+  SUPER_LIGHT: A,
   WHITE: "#FFFFFF"
-}, L = {
+}, T = {
   SUPER_DARK: "#032026",
   DARK: "#084657",
   MEDIUM: "#2085BA",
@@ -19,16 +19,15 @@ const D = "#DDDDDD", G = D, I = "#F7F8F9", T = {
   WHITE: "#f5f9ff"
 }, H = {
   BASE_COLOR: R.WHITE,
-  BRAND: A,
-  GRAYSCALE: T,
+  BRAND: I,
   PRIMARY: E,
-  SECONDARY: L
+  SECONDARY: T
 };
 export {
-  G as BORDER,
-  I as ELEVATION,
-  T as LIGHT_GRAYSCALE,
+  F as BORDER,
+  A as ELEVATION,
+  G as LIGHT_GRAYSCALE,
   H as LIGHT_PALETTE,
-  L as LIGHT_SECONDARY_SCALE
+  T as LIGHT_SECONDARY_SCALE
 };
 //# sourceMappingURL=colors.es.js.map

package/dist/design/lightTheme/colors.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"colors.es.js","sources":["../../../src/design/lightTheme/colors.ts"],"sourcesContent":["import {\n BACKGROUNDS,\n BRAND,\n BRAND_PRIMARY_SCALE,\n} from \"../colors\";\nimport { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst LIGHT_GRAY = \"#DDDDDD\";\nexport const BORDER = LIGHT_GRAY;\nexport const ELEVATION = \"#F7F8F9\";\nexport const LIGHT_GRAYSCALE: ProtonColorScale = {\n SUPER_DARK: \"#141211\",\n DARK: \"#4D4D4D\",\n MEDIUM: \"#7D7D7D\",\n MEDIUM_LIGHT: \"#B1B1B1\",\n LIGHT: LIGHT_GRAY,\n LIGHTEST: \"#F0F1F2\",\n SUPER_LIGHT: ELEVATION,\n WHITE: \"#FFFFFF\",\n};\n\nexport const LIGHT_SECONDARY_SCALE: ProtonColorScale = {\n SUPER_DARK: \"#032026\",\n DARK: \"#084657\",\n MEDIUM: \"#2085BA\",\n MEDIUM_LIGHT: \"#44A8EB\",\n LIGHT: \"#70B9F6\",\n LIGHTEST: \"#9DCBFC\",\n SUPER_LIGHT: \"#C8DFFF\",\n WHITE: \"#f5f9ff\",\n};\n\nexport const LIGHT_PALETTE: ProtonPalette = {\n BASE_COLOR: BACKGROUNDS.WHITE,\n BRAND,\n ~~GRAYSCALE: LIGHT_GRAYSCALE,\n~~ PRIMARY: BRAND_PRIMARY_SCALE,\n SECONDARY: LIGHT_SECONDARY_SCALE,\n};\n"],"names":["LIGHT_GRAY","BORDER","ELEVATION","LIGHT_GRAYSCALE","LIGHT_SECONDARY_SCALE","LIGHT_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":";AAOA,MAAMA,IAAa,WACNC,IAASD,GACTE,IAAY,WACZC,IAAoC;AAAA,EAC/C,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAOH;AAAA,EACP,UAAU;AAAA,EACV,aAAaE;AAAA,EACb,OAAO;AACT,GAEaE,IAA0C;AAAA,EACrD,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAO;AACT,GAEaC,IAA+B;AAAA,EAC1C,YAAYC,EAAY;AAAA,EACxB,OAAAC;AAAA,EACA,~~WAAWJ~~;AAAA,~~EACX,SAASK;AAAA,~~EACT,WAAWJ;AACb;"}
1	+ {"version":3,"file":"colors.es.js","sources":["../../../src/design/lightTheme/colors.ts"],"sourcesContent":["import {\n BACKGROUNDS,\n BRAND,\n BRAND_PRIMARY_SCALE,\n} from \"../colors\";\nimport { ProtonColorScale, ProtonPalette } from \"../types\";\n\nconst LIGHT_GRAY = \"#DDDDDD\";\nexport const BORDER = LIGHT_GRAY;\nexport const ELEVATION = \"#F7F8F9\";\nexport const LIGHT_GRAYSCALE: ProtonColorScale = {\n SUPER_DARK: \"#141211\",\n DARK: \"#4D4D4D\",\n MEDIUM: \"#7D7D7D\",\n MEDIUM_LIGHT: \"#B1B1B1\",\n LIGHT: LIGHT_GRAY,\n LIGHTEST: \"#F0F1F2\",\n SUPER_LIGHT: ELEVATION,\n WHITE: \"#FFFFFF\",\n};\n\nexport const LIGHT_SECONDARY_SCALE: ProtonColorScale = {\n SUPER_DARK: \"#032026\",\n DARK: \"#084657\",\n MEDIUM: \"#2085BA\",\n MEDIUM_LIGHT: \"#44A8EB\",\n LIGHT: \"#70B9F6\",\n LIGHTEST: \"#9DCBFC\",\n SUPER_LIGHT: \"#C8DFFF\",\n WHITE: \"#f5f9ff\",\n};\n\nexport const LIGHT_PALETTE: ProtonPalette = {\n BASE_COLOR: BACKGROUNDS.WHITE,\n BRAND,\n PRIMARY: BRAND_PRIMARY_SCALE,\n SECONDARY: LIGHT_SECONDARY_SCALE,\n};\n"],"names":["LIGHT_GRAY","BORDER","ELEVATION","LIGHT_GRAYSCALE","LIGHT_SECONDARY_SCALE","LIGHT_PALETTE","BACKGROUNDS","BRAND","BRAND_PRIMARY_SCALE"],"mappings":";AAOA,MAAMA,IAAa,WACNC,IAASD,GACTE,IAAY,WACZC,IAAoC;AAAA,EAC/C,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAOH;AAAA,EACP,UAAU;AAAA,EACV,aAAaE;AAAA,EACb,OAAO;AACT,GAEaE,IAA0C;AAAA,EACrD,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,OAAO;AACT,GAEaC,IAA+B;AAAA,EAC1C,YAAYC,EAAY;AAAA,EACxB,OAAAC;AAAA,EACA,SAASC;AAAA,EACT,WAAWJ;AACb;"}

package/dist/hooks/useBreakpoint.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useBreakpoint.cjs.js","sources":["../../src/hooks/useBreakpoint.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\nimport { Breakpoint } from \"../constants\";\n\~~ntype BreakpointDirection = \"up\" \| \"down\";\n\~~nexport function useBreakpoint(\n breakpoint: Breakpoint,\n direction: BreakpointDirection = \"down\",\n): boolean {\n const query =\n direction === \"down\"\n ? `(max-width: ${breakpoint}px)`\n : `(min-width: ${breakpoint}px)`;\n\n const subscribe = useCallback(\n (callback: () => void) => {\n const mql = window.matchMedia(query);\n mql.addEventListener(\"change\", callback);\n return () => mql.removeEventListener(\"change\", callback);\n },\n [query],\n );\n\n const getSnapshot = useCallback(\n () => window.matchMedia(query).matches,\n [query],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, () => direction === \"up\");\n}\n"],"names":["useBreakpoint","breakpoint","direction","query","subscribe","useCallback","callback","mql","getSnapshot","useSyncExternalStore"],"mappings":"~~yGAKO~~,SAASA,EACdC,EACAC,EAAiC,OACxB,CACT,MAAMC,EACJD,IAAc,OACV,eAAeD,CAAU,MACzB,eAAeA,CAAU,MAEzBG,EAAYC,EAAAA,YACfC,GAAyB,CACxB,MAAMC,EAAM,OAAO,WAAWJ,CAAK,EACnC,OAAAI,EAAI,iBAAiB,SAAUD,CAAQ,EAChC,IAAMC,EAAI,oBAAoB,SAAUD,CAAQ,CACzD,EACA,CAACH,CAAK,CAAA,EAGFK,EAAcH,EAAAA,YAClB,IAAM,OAAO,WAAWF,CAAK,EAAE,QAC/B,CAACA,CAAK,CAAA,EAGR,OAAOM,EAAAA,qBAAqBL,EAAWI,EAAa,IAAMN,IAAc,IAAI,CAC9E"}
1	+ {"version":3,"file":"useBreakpoint.cjs.js","sources":["../../src/hooks/useBreakpoint.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\nimport type { Breakpoint, BreakpointDirection } from \"../constants\";\n\nexport function useBreakpoint(\n breakpoint: Breakpoint,\n direction: BreakpointDirection = \"down\",\n): boolean {\n const query =\n direction === \"down\"\n ? `(max-width: ${breakpoint}px)`\n : `(min-width: ${breakpoint}px)`;\n\n const subscribe = useCallback(\n (callback: () => void) => {\n const mql = window.matchMedia(query);\n mql.addEventListener(\"change\", callback);\n return () => mql.removeEventListener(\"change\", callback);\n },\n [query],\n );\n\n const getSnapshot = useCallback(\n () => window.matchMedia(query).matches,\n [query],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, () => direction === \"up\");\n}\n"],"names":["useBreakpoint","breakpoint","direction","query","subscribe","useCallback","callback","mql","getSnapshot","useSyncExternalStore"],"mappings":"yGAGO,SAASA,EACdC,EACAC,EAAiC,OACxB,CACT,MAAMC,EACJD,IAAc,OACV,eAAeD,CAAU,MACzB,eAAeA,CAAU,MAEzBG,EAAYC,EAAAA,YACfC,GAAyB,CACxB,MAAMC,EAAM,OAAO,WAAWJ,CAAK,EACnC,OAAAI,EAAI,iBAAiB,SAAUD,CAAQ,EAChC,IAAMC,EAAI,oBAAoB,SAAUD,CAAQ,CACzD,EACA,CAACH,CAAK,CAAA,EAGFK,EAAcH,EAAAA,YAClB,IAAM,OAAO,WAAWF,CAAK,EAAE,QAC/B,CAACA,CAAK,CAAA,EAGR,OAAOM,EAAAA,qBAAqBL,EAAWI,EAAa,IAAMN,IAAc,IAAI,CAC9E"}

package/dist/hooks/useBreakpoint.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useBreakpoint.es.js","sources":["../../src/hooks/useBreakpoint.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\nimport { Breakpoint } from \"../constants\";\n\~~ntype BreakpointDirection = \"up\" \| \"down\";\n\~~nexport function useBreakpoint(\n breakpoint: Breakpoint,\n direction: BreakpointDirection = \"down\",\n): boolean {\n const query =\n direction === \"down\"\n ? `(max-width: ${breakpoint}px)`\n : `(min-width: ${breakpoint}px)`;\n\n const subscribe = useCallback(\n (callback: () => void) => {\n const mql = window.matchMedia(query);\n mql.addEventListener(\"change\", callback);\n return () => mql.removeEventListener(\"change\", callback);\n },\n [query],\n );\n\n const getSnapshot = useCallback(\n () => window.matchMedia(query).matches,\n [query],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, () => direction === \"up\");\n}\n"],"names":["useBreakpoint","breakpoint","direction","query","subscribe","useCallback","callback","mql","getSnapshot","useSyncExternalStore"],"mappings":";~~AAKO~~,SAASA,EACdC,GACAC,IAAiC,QACxB;AACT,QAAMC,IACJD,MAAc,SACV,eAAeD,CAAU,QACzB,eAAeA,CAAU,OAEzBG,IAAYC;AAAA,IAChB,CAACC,MAAyB;AACxB,YAAMC,IAAM,OAAO,WAAWJ,CAAK;AACnC,aAAAI,EAAI,iBAAiB,UAAUD,CAAQ,GAChC,MAAMC,EAAI,oBAAoB,UAAUD,CAAQ;AAAA,IACzD;AAAA,IACA,CAACH,CAAK;AAAA,EAAA,GAGFK,IAAcH;AAAA,IAClB,MAAM,OAAO,WAAWF,CAAK,EAAE;AAAA,IAC/B,CAACA,CAAK;AAAA,EAAA;AAGR,SAAOM,EAAqBL,GAAWI,GAAa,MAAMN,MAAc,IAAI;AAC9E;"}
1	+ {"version":3,"file":"useBreakpoint.es.js","sources":["../../src/hooks/useBreakpoint.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\nimport type { Breakpoint, BreakpointDirection } from \"../constants\";\n\nexport function useBreakpoint(\n breakpoint: Breakpoint,\n direction: BreakpointDirection = \"down\",\n): boolean {\n const query =\n direction === \"down\"\n ? `(max-width: ${breakpoint}px)`\n : `(min-width: ${breakpoint}px)`;\n\n const subscribe = useCallback(\n (callback: () => void) => {\n const mql = window.matchMedia(query);\n mql.addEventListener(\"change\", callback);\n return () => mql.removeEventListener(\"change\", callback);\n },\n [query],\n );\n\n const getSnapshot = useCallback(\n () => window.matchMedia(query).matches,\n [query],\n );\n\n return useSyncExternalStore(subscribe, getSnapshot, () => direction === \"up\");\n}\n"],"names":["useBreakpoint","breakpoint","direction","query","subscribe","useCallback","callback","mql","getSnapshot","useSyncExternalStore"],"mappings":";AAGO,SAASA,EACdC,GACAC,IAAiC,QACxB;AACT,QAAMC,IACJD,MAAc,SACV,eAAeD,CAAU,QACzB,eAAeA,CAAU,OAEzBG,IAAYC;AAAA,IAChB,CAACC,MAAyB;AACxB,YAAMC,IAAM,OAAO,WAAWJ,CAAK;AACnC,aAAAI,EAAI,iBAAiB,UAAUD,CAAQ,GAChC,MAAMC,EAAI,oBAAoB,UAAUD,CAAQ;AAAA,IACzD;AAAA,IACA,CAACH,CAAK;AAAA,EAAA,GAGFK,IAAcH;AAAA,IAClB,MAAM,OAAO,WAAWF,CAAK,EAAE;AAAA,IAC/B,CAACA,CAAK;AAAA,EAAA;AAGR,SAAOM,EAAqBL,GAAWI,GAAa,MAAMN,MAAc,IAAI;AAC9E;"}

package/dist/hooks/useMergedRef.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useMergedRef.cjs.js","sources":["../../src/hooks/useMergedRef.ts"],"sourcesContent":["import {\n useCallback,\n type ForwardedRef,\n type ~~MutableRefObject~~,\n type RefCallback,\n} from \"react\";\n\n/*\n Combines a local ref (for instance access inside the component) with the ref\n * passed into `forwardRef` (object ref or callback ref).\n */\nexport function useMergedRef<T>(\n localRef: ~~MutableRefObject~~<T \| null>,\n forwardedRef: ForwardedRef<T>,\n): RefCallback<T> {\n return useCallback(\n (instance: T \| null) => {\n localRef.current = instance;\n if (typeof forwardedRef === \"function\") {\n forwardedRef(instance);\n } else if (forwardedRef != null) {\n forwardedRef.current = instance;\n }\n },\n [localRef, forwardedRef],\n );\n}\n"],"names":["useMergedRef","localRef","forwardedRef","useCallback","instance"],"mappings":"yGAWO,SAASA,EACdC,EACAC,EACgB,CAChB,OAAOC,EAAAA,YACJC,GAAuB,CACtBH,EAAS,QAAUG,EACf,OAAOF,GAAiB,WAC1BA,EAAaE,CAAQ,EACZF,GAAgB,OACzBA,EAAa,QAAUE,EAE3B,EACA,CAACH,EAAUC,CAAY,CAAA,CAE3B"}
1	+ {"version":3,"file":"useMergedRef.cjs.js","sources":["../../src/hooks/useMergedRef.ts"],"sourcesContent":["import {\n useCallback,\n type ForwardedRef,\n type RefObject,\n type RefCallback,\n} from \"react\";\n\n/*\n Combines a local ref (for instance access inside the component) with the ref\n * passed into `forwardRef` (object ref or callback ref).\n */\nexport function useMergedRef<T>(\n localRef: RefObject<T \| null>,\n forwardedRef: ForwardedRef<T>,\n): RefCallback<T> {\n return useCallback(\n (instance: T \| null) => {\n localRef.current = instance;\n if (typeof forwardedRef === \"function\") {\n forwardedRef(instance);\n } else if (forwardedRef != null) {\n forwardedRef.current = instance;\n }\n },\n [localRef, forwardedRef],\n );\n}\n"],"names":["useMergedRef","localRef","forwardedRef","useCallback","instance"],"mappings":"yGAWO,SAASA,EACdC,EACAC,EACgB,CAChB,OAAOC,EAAAA,YACJC,GAAuB,CACtBH,EAAS,QAAUG,EACf,OAAOF,GAAiB,WAC1BA,EAAaE,CAAQ,EACZF,GAAgB,OACzBA,EAAa,QAAUE,EAE3B,EACA,CAACH,EAAUC,CAAY,CAAA,CAE3B"}

package/dist/hooks/useMergedRef.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useMergedRef.es.js","sources":["../../src/hooks/useMergedRef.ts"],"sourcesContent":["import {\n useCallback,\n type ForwardedRef,\n type ~~MutableRefObject~~,\n type RefCallback,\n} from \"react\";\n\n/*\n Combines a local ref (for instance access inside the component) with the ref\n * passed into `forwardRef` (object ref or callback ref).\n */\nexport function useMergedRef<T>(\n localRef: ~~MutableRefObject~~<T \| null>,\n forwardedRef: ForwardedRef<T>,\n): RefCallback<T> {\n return useCallback(\n (instance: T \| null) => {\n localRef.current = instance;\n if (typeof forwardedRef === \"function\") {\n forwardedRef(instance);\n } else if (forwardedRef != null) {\n forwardedRef.current = instance;\n }\n },\n [localRef, forwardedRef],\n );\n}\n"],"names":["useMergedRef","localRef","forwardedRef","useCallback","instance"],"mappings":";AAWO,SAASA,EACdC,GACAC,GACgB;AAChB,SAAOC;AAAA,IACL,CAACC,MAAuB;AACtB,MAAAH,EAAS,UAAUG,GACf,OAAOF,KAAiB,aAC1BA,EAAaE,CAAQ,IACZF,KAAgB,SACzBA,EAAa,UAAUE;AAAA,IAE3B;AAAA,IACA,CAACH,GAAUC,CAAY;AAAA,EAAA;AAE3B;"}
1	+ {"version":3,"file":"useMergedRef.es.js","sources":["../../src/hooks/useMergedRef.ts"],"sourcesContent":["import {\n useCallback,\n type ForwardedRef,\n type RefObject,\n type RefCallback,\n} from \"react\";\n\n/*\n Combines a local ref (for instance access inside the component) with the ref\n * passed into `forwardRef` (object ref or callback ref).\n */\nexport function useMergedRef<T>(\n localRef: RefObject<T \| null>,\n forwardedRef: ForwardedRef<T>,\n): RefCallback<T> {\n return useCallback(\n (instance: T \| null) => {\n localRef.current = instance;\n if (typeof forwardedRef === \"function\") {\n forwardedRef(instance);\n } else if (forwardedRef != null) {\n forwardedRef.current = instance;\n }\n },\n [localRef, forwardedRef],\n );\n}\n"],"names":["useMergedRef","localRef","forwardedRef","useCallback","instance"],"mappings":";AAWO,SAASA,EACdC,GACAC,GACgB;AAChB,SAAOC;AAAA,IACL,CAACC,MAAuB;AACtB,MAAAH,EAAS,UAAUG,GACf,OAAOF,KAAiB,aAC1BA,EAAaE,CAAQ,IACZF,KAAgB,SACzBA,EAAa,UAAUE;AAAA,IAE3B;AAAA,IACA,CAACH,GAAUC,CAAY;AAAA,EAAA;AAE3B;"}

package/dist/hooks.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { ForwardedRef } from 'react';
-import { MutableRefObject } from 'react';
 import { RefCallback } from 'react';
 import { RefObject } from 'react';
@@ -37,7 +36,6 @@ declare type ProtonPalette = {
     };
     PRIMARY: ProtonColorScale;
     SECONDARY: ProtonColorScale;
-    GRAYSCALE: ProtonColorScale;
 };
 export declare function useBreakpoint(breakpoint: Breakpoint, direction?: BreakpointDirection): boolean;
@@ -80,7 +78,7 @@ export declare function useLockBodyScroll(isActive?: boolean): void;
  * Combines a local ref (for instance access inside the component) with the ref
  * passed into `forwardRef` (object ref or callback ref).
  */
-export declare function useMergedRef<T>(localRef: MutableRefObject<T | null>, forwardedRef: ForwardedRef<T>): RefCallback<T>;
+export declare function useMergedRef<T>(localRef: RefObject<T | null>, forwardedRef: ForwardedRef<T>): RefCallback<T>;
 /**
  * Generates a palette based on a background image or theme.