@navikt/ds-react 7.40.0 → 8.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/accordion/Accordion.d.ts +15 -7
- package/cjs/accordion/Accordion.js +4 -4
- package/cjs/accordion/Accordion.js.map +1 -1
- package/cjs/accordion/AccordionContent.js +3 -2
- package/cjs/accordion/AccordionContent.js.map +1 -1
- package/cjs/accordion/AccordionContext.d.ts +1 -2
- package/cjs/accordion/AccordionContext.js +0 -1
- package/cjs/accordion/AccordionContext.js.map +1 -1
- package/cjs/accordion/AccordionHeader.js +2 -9
- package/cjs/accordion/AccordionHeader.js.map +1 -1
- package/cjs/accordion/AccordionItem.js +0 -1
- package/cjs/accordion/AccordionItem.js.map +1 -1
- package/cjs/alert/base-alert/root/BaseAlertRoot.d.ts +3 -1
- package/cjs/alert/base-alert/root/BaseAlertRoot.js.map +1 -1
- package/cjs/alert/global-alert/root/GlobalAlertRoot.d.ts +4 -0
- package/cjs/alert/global-alert/root/GlobalAlertRoot.js.map +1 -1
- package/cjs/alert/local-alert/root/LocalAlertRoot.d.ts +4 -0
- package/cjs/alert/local-alert/root/LocalAlertRoot.js.map +1 -1
- package/cjs/button/Button.d.ts +14 -1
- package/cjs/button/Button.js +1 -1
- package/cjs/button/Button.js.map +1 -1
- package/cjs/chat/Chat.d.ts +11 -3
- package/cjs/chat/Chat.js.map +1 -1
- package/cjs/chips/Chips.d.ts +17 -17
- package/cjs/chips/Chips.js +17 -17
- package/cjs/chips/Removable.d.ts +8 -2
- package/cjs/chips/Removable.js +1 -11
- package/cjs/chips/Removable.js.map +1 -1
- package/cjs/chips/Toggle.d.ts +8 -2
- package/cjs/chips/Toggle.js +2 -11
- package/cjs/chips/Toggle.js.map +1 -1
- package/cjs/collapsible/Collapsible.d.ts +1 -1
- package/cjs/collapsible/Collapsible.js +1 -1
- package/cjs/copybutton/CopyButton.d.ts +13 -2
- package/cjs/copybutton/CopyButton.js +12 -27
- package/cjs/copybutton/CopyButton.js.map +1 -1
- package/cjs/date/Date.Dialog.js +1 -1
- package/cjs/date/Date.Dialog.js.map +1 -1
- package/cjs/dropdown/Menu/index.js +1 -1
- package/cjs/dropdown/Menu/index.js.map +1 -1
- package/cjs/expansion-card/ExpansionCard.d.ts +7 -0
- package/cjs/expansion-card/ExpansionCard.js +0 -1
- package/cjs/expansion-card/ExpansionCard.js.map +1 -1
- package/cjs/expansion-card/ExpansionCardHeader.js +1 -1
- package/cjs/expansion-card/ExpansionCardHeader.js.map +1 -1
- package/cjs/form/checkbox/Checkbox.js +32 -73
- package/cjs/form/checkbox/Checkbox.js.map +1 -1
- package/cjs/form/combobox/FilteredOptions/FilteredOptions.js +2 -4
- package/cjs/form/combobox/FilteredOptions/FilteredOptions.js.map +1 -1
- package/cjs/form/combobox/SelectedOptions/SelectedOptions.js +1 -1
- package/cjs/form/combobox/SelectedOptions/SelectedOptions.js.map +1 -1
- package/cjs/form/file-upload/parts/dropzone/Dropzone.js +2 -2
- package/cjs/form/file-upload/parts/dropzone/Dropzone.js.map +1 -1
- package/cjs/form/file-upload/parts/item/Item.js +5 -20
- package/cjs/form/file-upload/parts/item/Item.js.map +1 -1
- package/cjs/form/file-upload/parts/item/ItemActionField.d.ts +13 -0
- package/cjs/form/file-upload/parts/item/ItemActionField.js +39 -0
- package/cjs/form/file-upload/parts/item/ItemActionField.js.map +1 -0
- package/cjs/form/file-upload/parts/item/{ItemName.d.ts → ItemHeader.d.ts} +2 -2
- package/cjs/form/file-upload/parts/item/ItemHeader.js +46 -0
- package/cjs/form/file-upload/parts/item/ItemHeader.js.map +1 -0
- package/cjs/form/file-upload/parts/item/ItemIcon.d.ts +1 -3
- package/cjs/form/file-upload/parts/item/ItemIcon.js +1 -10
- package/cjs/form/file-upload/parts/item/ItemIcon.js.map +1 -1
- package/cjs/form/form-summary/FormSummaryAnswer.js +2 -1
- package/cjs/form/form-summary/FormSummaryAnswer.js.map +1 -1
- package/cjs/form/form-summary/FormSummaryAnswers.js +5 -2
- package/cjs/form/form-summary/FormSummaryAnswers.js.map +1 -1
- package/cjs/form/form-summary/FormSummaryFooter.js +1 -1
- package/cjs/form/form-summary/FormSummaryFooter.js.map +1 -1
- package/cjs/form/radio/Radio.js +5 -18
- package/cjs/form/radio/Radio.js.map +1 -1
- package/cjs/form/search/Search.d.ts +6 -0
- package/cjs/form/search/Search.js +1 -4
- package/cjs/form/search/Search.js.map +1 -1
- package/cjs/guide-panel/GuidePanel.js +5 -10
- package/cjs/guide-panel/GuidePanel.js.map +1 -1
- package/cjs/guide-panel/Illustration.d.ts +1 -1
- package/cjs/guide-panel/Illustration.js +20 -15
- package/cjs/guide-panel/Illustration.js.map +1 -1
- package/cjs/help-text/HelpText.d.ts +10 -0
- package/cjs/help-text/HelpText.js +1 -2
- package/cjs/help-text/HelpText.js.map +1 -1
- package/cjs/help-text/HelpTextIcon.js +1 -3
- package/cjs/help-text/HelpTextIcon.js.map +1 -1
- package/cjs/inline-message/root/InlineMessage.d.ts +4 -0
- package/cjs/inline-message/root/InlineMessage.js.map +1 -1
- package/cjs/internal-header/InternalHeader.js +2 -6
- package/cjs/internal-header/InternalHeader.js.map +1 -1
- package/cjs/layout/base/BasePrimitive.d.ts +11 -11
- package/cjs/layout/base/BasePrimitive.js +1 -3
- package/cjs/layout/base/BasePrimitive.js.map +1 -1
- package/cjs/layout/bleed/Bleed.d.ts +7 -7
- package/cjs/layout/bleed/Bleed.js +3 -5
- package/cjs/layout/bleed/Bleed.js.map +1 -1
- package/cjs/layout/box/Box.d.ts +22 -12
- package/cjs/layout/box/Box.darkside.d.ts +16 -14
- package/cjs/layout/box/Box.darkside.js +11 -7
- package/cjs/layout/box/Box.darkside.js.map +1 -1
- package/cjs/layout/box/Box.js +14 -32
- package/cjs/layout/box/Box.js.map +1 -1
- package/cjs/layout/grid/HGrid.d.ts +4 -4
- package/cjs/layout/grid/HGrid.js +4 -6
- package/cjs/layout/grid/HGrid.js.map +1 -1
- package/cjs/layout/page/Page.d.ts +4 -8
- package/cjs/layout/page/Page.js +3 -9
- package/cjs/layout/page/Page.js.map +1 -1
- package/cjs/layout/stack/Stack.d.ts +1 -1
- package/cjs/layout/stack/Stack.js +1 -3
- package/cjs/layout/stack/Stack.js.map +1 -1
- package/cjs/layout/utilities/css.d.ts +2 -2
- package/cjs/layout/utilities/css.js +13 -53
- package/cjs/layout/utilities/css.js.map +1 -1
- package/cjs/layout/utilities/types.d.ts +3 -7
- package/cjs/link/Link.d.ts +11 -2
- package/cjs/link/Link.js +1 -14
- package/cjs/link/Link.js.map +1 -1
- package/cjs/link-card/LinkCard.d.ts +9 -0
- package/cjs/link-card/LinkCard.js.map +1 -1
- package/cjs/list/List.js +1 -21
- package/cjs/list/List.js.map +1 -1
- package/cjs/list/List.types.d.ts +2 -14
- package/cjs/loader/Loader.d.ts +4 -1
- package/cjs/loader/Loader.js.map +1 -1
- package/cjs/modal/Modal.js +0 -5
- package/cjs/modal/Modal.js.map +1 -1
- package/cjs/modal/ModalUtils.d.ts +1 -3
- package/cjs/modal/ModalUtils.js +1 -38
- package/cjs/modal/ModalUtils.js.map +1 -1
- package/cjs/overlays/action-menu/ActionMenu.js +14 -24
- package/cjs/overlays/action-menu/ActionMenu.js.map +1 -1
- package/cjs/overlays/floating/Floating.js +5 -5
- package/cjs/overlays/floating/Floating.js.map +1 -1
- package/cjs/pagination/Pagination.d.ts +12 -5
- package/cjs/pagination/Pagination.js +3 -10
- package/cjs/pagination/Pagination.js.map +1 -1
- package/cjs/pagination/PaginationItem.js +1 -2
- package/cjs/pagination/PaginationItem.js.map +1 -1
- package/cjs/panel/Panel.d.ts +2 -2
- package/cjs/panel/Panel.js +2 -2
- package/cjs/popover/Popover.d.ts +2 -3
- package/cjs/popover/Popover.js +6 -18
- package/cjs/popover/Popover.js.map +1 -1
- package/cjs/portal/Portal.js +2 -5
- package/cjs/portal/Portal.js.map +1 -1
- package/cjs/progress-bar/ProgressBar.d.ts +7 -0
- package/cjs/progress-bar/ProgressBar.js +2 -2
- package/cjs/progress-bar/ProgressBar.js.map +1 -1
- package/cjs/read-more/ReadMore.d.ts +11 -0
- package/cjs/read-more/ReadMore.js.map +1 -1
- package/cjs/stepper/Stepper.js +2 -7
- package/cjs/stepper/Stepper.js.map +1 -1
- package/cjs/tag/Tag.d.ts +12 -1
- package/cjs/tag/Tag.js +5 -2
- package/cjs/tag/Tag.js.map +1 -1
- package/cjs/theme/Theme.d.ts +9 -9
- package/cjs/theme/Theme.js +10 -10
- package/cjs/theme/Theme.js.map +1 -1
- package/cjs/timeline/period/index.d.ts +8 -0
- package/cjs/timeline/period/index.js.map +1 -1
- package/cjs/toggle-group/ToggleGroup.js +2 -10
- package/cjs/toggle-group/ToggleGroup.js.map +1 -1
- package/cjs/toggle-group/ToggleGroup.types.d.ts +11 -2
- package/cjs/typography/BodyLong.d.ts +9 -0
- package/cjs/typography/BodyLong.js.map +1 -1
- package/cjs/typography/BodyShort.d.ts +9 -0
- package/cjs/typography/BodyShort.js.map +1 -1
- package/cjs/typography/Detail.d.ts +9 -0
- package/cjs/typography/Detail.js.map +1 -1
- package/cjs/typography/Heading.d.ts +9 -0
- package/cjs/typography/Heading.js.map +1 -1
- package/cjs/typography/Label.d.ts +9 -0
- package/cjs/typography/Label.js.map +1 -1
- package/cjs/typography/types.d.ts +1 -1
- package/cjs/util/TextareaAutoSize.js +1 -3
- package/cjs/util/TextareaAutoSize.js.map +1 -1
- package/esm/accordion/Accordion.d.ts +15 -7
- package/esm/accordion/Accordion.js +4 -4
- package/esm/accordion/Accordion.js.map +1 -1
- package/esm/accordion/AccordionContent.js +3 -2
- package/esm/accordion/AccordionContent.js.map +1 -1
- package/esm/accordion/AccordionContext.d.ts +1 -2
- package/esm/accordion/AccordionContext.js +0 -1
- package/esm/accordion/AccordionContext.js.map +1 -1
- package/esm/accordion/AccordionHeader.js +3 -10
- package/esm/accordion/AccordionHeader.js.map +1 -1
- package/esm/accordion/AccordionItem.js +0 -1
- package/esm/accordion/AccordionItem.js.map +1 -1
- package/esm/alert/base-alert/root/BaseAlertRoot.d.ts +3 -1
- package/esm/alert/base-alert/root/BaseAlertRoot.js.map +1 -1
- package/esm/alert/global-alert/root/GlobalAlertRoot.d.ts +4 -0
- package/esm/alert/global-alert/root/GlobalAlertRoot.js.map +1 -1
- package/esm/alert/local-alert/root/LocalAlertRoot.d.ts +4 -0
- package/esm/alert/local-alert/root/LocalAlertRoot.js.map +1 -1
- package/esm/button/Button.d.ts +14 -1
- package/esm/button/Button.js +1 -1
- package/esm/button/Button.js.map +1 -1
- package/esm/chat/Chat.d.ts +11 -3
- package/esm/chat/Chat.js.map +1 -1
- package/esm/chips/Chips.d.ts +17 -17
- package/esm/chips/Chips.js +17 -17
- package/esm/chips/Removable.d.ts +8 -2
- package/esm/chips/Removable.js +2 -12
- package/esm/chips/Removable.js.map +1 -1
- package/esm/chips/Toggle.d.ts +8 -2
- package/esm/chips/Toggle.js +3 -12
- package/esm/chips/Toggle.js.map +1 -1
- package/esm/collapsible/Collapsible.d.ts +1 -1
- package/esm/collapsible/Collapsible.js +1 -1
- package/esm/copybutton/CopyButton.d.ts +13 -2
- package/esm/copybutton/CopyButton.js +13 -28
- package/esm/copybutton/CopyButton.js.map +1 -1
- package/esm/date/Date.Dialog.js +1 -1
- package/esm/date/Date.Dialog.js.map +1 -1
- package/esm/dropdown/Menu/index.js +1 -1
- package/esm/dropdown/Menu/index.js.map +1 -1
- package/esm/expansion-card/ExpansionCard.d.ts +7 -0
- package/esm/expansion-card/ExpansionCard.js +0 -1
- package/esm/expansion-card/ExpansionCard.js.map +1 -1
- package/esm/expansion-card/ExpansionCardHeader.js +1 -1
- package/esm/expansion-card/ExpansionCardHeader.js.map +1 -1
- package/esm/form/checkbox/Checkbox.js +33 -74
- package/esm/form/checkbox/Checkbox.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js +3 -5
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js.map +1 -1
- package/esm/form/combobox/SelectedOptions/SelectedOptions.js +1 -1
- package/esm/form/combobox/SelectedOptions/SelectedOptions.js.map +1 -1
- package/esm/form/file-upload/parts/dropzone/Dropzone.js +2 -2
- package/esm/form/file-upload/parts/dropzone/Dropzone.js.map +1 -1
- package/esm/form/file-upload/parts/item/Item.js +6 -18
- package/esm/form/file-upload/parts/item/Item.js.map +1 -1
- package/esm/form/file-upload/parts/item/ItemActionField.d.ts +13 -0
- package/esm/form/file-upload/parts/item/ItemActionField.js +34 -0
- package/esm/form/file-upload/parts/item/ItemActionField.js.map +1 -0
- package/esm/form/file-upload/parts/item/{ItemName.d.ts → ItemHeader.d.ts} +2 -2
- package/esm/form/file-upload/parts/item/ItemHeader.js +40 -0
- package/esm/form/file-upload/parts/item/ItemHeader.js.map +1 -0
- package/esm/form/file-upload/parts/item/ItemIcon.d.ts +1 -3
- package/esm/form/file-upload/parts/item/ItemIcon.js +2 -11
- package/esm/form/file-upload/parts/item/ItemIcon.js.map +1 -1
- package/esm/form/form-summary/FormSummaryAnswer.js +3 -2
- package/esm/form/form-summary/FormSummaryAnswer.js.map +1 -1
- package/esm/form/form-summary/FormSummaryAnswers.js +5 -2
- package/esm/form/form-summary/FormSummaryAnswers.js.map +1 -1
- package/esm/form/form-summary/FormSummaryFooter.js +1 -1
- package/esm/form/form-summary/FormSummaryFooter.js.map +1 -1
- package/esm/form/radio/Radio.js +6 -19
- package/esm/form/radio/Radio.js.map +1 -1
- package/esm/form/search/Search.d.ts +6 -0
- package/esm/form/search/Search.js +2 -5
- package/esm/form/search/Search.js.map +1 -1
- package/esm/guide-panel/GuidePanel.js +6 -11
- package/esm/guide-panel/GuidePanel.js.map +1 -1
- package/esm/guide-panel/Illustration.d.ts +1 -1
- package/esm/guide-panel/Illustration.js +18 -13
- package/esm/guide-panel/Illustration.js.map +1 -1
- package/esm/help-text/HelpText.d.ts +10 -0
- package/esm/help-text/HelpText.js +2 -3
- package/esm/help-text/HelpText.js.map +1 -1
- package/esm/help-text/HelpTextIcon.js +1 -3
- package/esm/help-text/HelpTextIcon.js.map +1 -1
- package/esm/inline-message/root/InlineMessage.d.ts +4 -0
- package/esm/inline-message/root/InlineMessage.js.map +1 -1
- package/esm/internal-header/InternalHeader.js +3 -7
- package/esm/internal-header/InternalHeader.js.map +1 -1
- package/esm/layout/base/BasePrimitive.d.ts +11 -11
- package/esm/layout/base/BasePrimitive.js +2 -4
- package/esm/layout/base/BasePrimitive.js.map +1 -1
- package/esm/layout/bleed/Bleed.d.ts +7 -7
- package/esm/layout/bleed/Bleed.js +4 -6
- package/esm/layout/bleed/Bleed.js.map +1 -1
- package/esm/layout/box/Box.d.ts +22 -12
- package/esm/layout/box/Box.darkside.d.ts +16 -14
- package/esm/layout/box/Box.darkside.js +11 -7
- package/esm/layout/box/Box.darkside.js.map +1 -1
- package/esm/layout/box/Box.js +15 -33
- package/esm/layout/box/Box.js.map +1 -1
- package/esm/layout/grid/HGrid.d.ts +4 -4
- package/esm/layout/grid/HGrid.js +5 -7
- package/esm/layout/grid/HGrid.js.map +1 -1
- package/esm/layout/page/Page.d.ts +4 -8
- package/esm/layout/page/Page.js +4 -10
- package/esm/layout/page/Page.js.map +1 -1
- package/esm/layout/stack/Stack.d.ts +1 -1
- package/esm/layout/stack/Stack.js +2 -4
- package/esm/layout/stack/Stack.js.map +1 -1
- package/esm/layout/utilities/css.d.ts +2 -2
- package/esm/layout/utilities/css.js +13 -53
- package/esm/layout/utilities/css.js.map +1 -1
- package/esm/layout/utilities/types.d.ts +3 -7
- package/esm/link/Link.d.ts +11 -2
- package/esm/link/Link.js +2 -15
- package/esm/link/Link.js.map +1 -1
- package/esm/link-card/LinkCard.d.ts +9 -0
- package/esm/link-card/LinkCard.js.map +1 -1
- package/esm/list/List.js +3 -23
- package/esm/list/List.js.map +1 -1
- package/esm/list/List.types.d.ts +2 -14
- package/esm/loader/Loader.d.ts +4 -1
- package/esm/loader/Loader.js.map +1 -1
- package/esm/modal/Modal.js +1 -6
- package/esm/modal/Modal.js.map +1 -1
- package/esm/modal/ModalUtils.d.ts +1 -3
- package/esm/modal/ModalUtils.js +1 -37
- package/esm/modal/ModalUtils.js.map +1 -1
- package/esm/overlays/action-menu/ActionMenu.js +15 -25
- package/esm/overlays/action-menu/ActionMenu.js.map +1 -1
- package/esm/overlays/floating/Floating.js +5 -5
- package/esm/overlays/floating/Floating.js.map +1 -1
- package/esm/pagination/Pagination.d.ts +12 -5
- package/esm/pagination/Pagination.js +3 -10
- package/esm/pagination/Pagination.js.map +1 -1
- package/esm/pagination/PaginationItem.js +2 -3
- package/esm/pagination/PaginationItem.js.map +1 -1
- package/esm/panel/Panel.d.ts +2 -2
- package/esm/panel/Panel.js +2 -2
- package/esm/popover/Popover.d.ts +2 -3
- package/esm/popover/Popover.js +9 -21
- package/esm/popover/Popover.js.map +1 -1
- package/esm/portal/Portal.js +2 -5
- package/esm/portal/Portal.js.map +1 -1
- package/esm/progress-bar/ProgressBar.d.ts +7 -0
- package/esm/progress-bar/ProgressBar.js +2 -2
- package/esm/progress-bar/ProgressBar.js.map +1 -1
- package/esm/read-more/ReadMore.d.ts +11 -0
- package/esm/read-more/ReadMore.js.map +1 -1
- package/esm/stepper/Stepper.js +2 -7
- package/esm/stepper/Stepper.js.map +1 -1
- package/esm/tag/Tag.d.ts +12 -1
- package/esm/tag/Tag.js +5 -2
- package/esm/tag/Tag.js.map +1 -1
- package/esm/theme/Theme.d.ts +9 -9
- package/esm/theme/Theme.js +9 -9
- package/esm/theme/Theme.js.map +1 -1
- package/esm/timeline/period/index.d.ts +8 -0
- package/esm/timeline/period/index.js.map +1 -1
- package/esm/toggle-group/ToggleGroup.js +3 -11
- package/esm/toggle-group/ToggleGroup.js.map +1 -1
- package/esm/toggle-group/ToggleGroup.types.d.ts +11 -2
- package/esm/types/theme.d.ts +1 -1
- package/esm/typography/BodyLong.d.ts +9 -0
- package/esm/typography/BodyLong.js.map +1 -1
- package/esm/typography/BodyShort.d.ts +9 -0
- package/esm/typography/BodyShort.js.map +1 -1
- package/esm/typography/Detail.d.ts +9 -0
- package/esm/typography/Detail.js.map +1 -1
- package/esm/typography/Heading.d.ts +9 -0
- package/esm/typography/Heading.js.map +1 -1
- package/esm/typography/Label.d.ts +9 -0
- package/esm/typography/Label.js.map +1 -1
- package/esm/typography/types.d.ts +1 -1
- package/esm/util/TextareaAutoSize.js +1 -3
- package/esm/util/TextareaAutoSize.js.map +1 -1
- package/package.json +3 -3
- package/src/accordion/Accordion.tsx +19 -18
- package/src/accordion/AccordionContent.tsx +3 -6
- package/src/accordion/AccordionContext.tsx +1 -3
- package/src/accordion/AccordionHeader.tsx +5 -11
- package/src/accordion/AccordionItem.tsx +0 -1
- package/src/alert/base-alert/root/BaseAlertRoot.tsx +3 -1
- package/src/alert/global-alert/root/GlobalAlertRoot.tsx +4 -0
- package/src/alert/local-alert/root/LocalAlertRoot.tsx +4 -0
- package/src/button/Button.tsx +23 -20
- package/src/chat/Chat.tsx +10 -3
- package/src/chips/Chips.tsx +17 -17
- package/src/chips/Removable.tsx +9 -16
- package/src/chips/Toggle.tsx +10 -14
- package/src/collapsible/Collapsible.tsx +1 -1
- package/src/copybutton/CopyButton.tsx +51 -88
- package/src/date/Date.Dialog.tsx +0 -1
- package/src/dropdown/Menu/index.tsx +0 -1
- package/src/expansion-card/ExpansionCard.tsx +7 -1
- package/src/expansion-card/ExpansionCardHeader.tsx +1 -3
- package/src/form/checkbox/Checkbox.tsx +66 -155
- package/src/form/combobox/FilteredOptions/FilteredOptions.tsx +3 -6
- package/src/form/combobox/SelectedOptions/SelectedOptions.tsx +1 -6
- package/src/form/file-upload/parts/dropzone/Dropzone.tsx +2 -0
- package/src/form/file-upload/parts/item/Item.tsx +11 -35
- package/src/form/file-upload/parts/item/ItemActionField.tsx +89 -0
- package/src/form/file-upload/parts/item/ItemHeader.tsx +81 -0
- package/src/form/file-upload/parts/item/ItemIcon.tsx +1 -22
- package/src/form/form-summary/FormSummaryAnswer.tsx +3 -1
- package/src/form/form-summary/FormSummaryAnswers.tsx +12 -16
- package/src/form/form-summary/FormSummaryFooter.tsx +0 -1
- package/src/form/radio/Radio.tsx +25 -64
- package/src/form/search/Search.tsx +8 -14
- package/src/guide-panel/GuidePanel.tsx +32 -45
- package/src/guide-panel/Illustration.tsx +75 -66
- package/src/help-text/HelpText.tsx +11 -4
- package/src/help-text/HelpTextIcon.tsx +1 -5
- package/src/inline-message/root/InlineMessage.tsx +4 -0
- package/src/internal-header/InternalHeader.tsx +8 -20
- package/src/layout/base/BasePrimitive.tsx +37 -39
- package/src/layout/bleed/Bleed.tsx +12 -22
- package/src/layout/box/Box.darkside.tsx +22 -22
- package/src/layout/box/Box.tsx +44 -60
- package/src/layout/grid/HGrid.tsx +8 -10
- package/src/layout/page/Page.tsx +7 -30
- package/src/layout/stack/Stack.tsx +6 -8
- package/src/layout/utilities/css.ts +14 -71
- package/src/layout/utilities/types.ts +2 -15
- package/src/link/Link.tsx +12 -19
- package/src/link-card/LinkCard.tsx +9 -0
- package/src/list/List.tsx +2 -57
- package/src/list/List.types.ts +2 -14
- package/src/loader/Loader.tsx +4 -1
- package/src/modal/Modal.tsx +0 -7
- package/src/modal/ModalUtils.ts +1 -47
- package/src/overlays/action-menu/ActionMenu.tsx +30 -71
- package/src/overlays/floating/Floating.tsx +5 -5
- package/src/pagination/Pagination.tsx +15 -11
- package/src/pagination/PaginationItem.tsx +3 -4
- package/src/panel/Panel.tsx +2 -2
- package/src/popover/Popover.tsx +10 -37
- package/src/portal/Portal.tsx +10 -14
- package/src/progress-bar/ProgressBar.tsx +9 -2
- package/src/react-css.d.ts +0 -3
- package/src/read-more/ReadMore.tsx +11 -0
- package/src/stepper/Stepper.tsx +3 -11
- package/src/tag/Tag.tsx +45 -41
- package/src/theme/Theme.tsx +19 -19
- package/src/timeline/period/index.tsx +8 -0
- package/src/toggle-group/ToggleGroup.tsx +2 -12
- package/src/toggle-group/ToggleGroup.types.ts +11 -2
- package/src/types/theme.d.ts +1 -1
- package/src/typography/BodyLong.tsx +9 -0
- package/src/typography/BodyShort.tsx +9 -0
- package/src/typography/Detail.tsx +9 -0
- package/src/typography/Heading.tsx +9 -0
- package/src/typography/Label.tsx +9 -0
- package/src/typography/types.ts +1 -1
- package/src/util/TextareaAutoSize.tsx +0 -3
- package/cjs/form/file-upload/parts/item/ItemName.js +0 -32
- package/cjs/form/file-upload/parts/item/ItemName.js.map +0 -1
- package/cjs/guide-panel/Illustration.darkside.d.ts +0 -2
- package/cjs/guide-panel/Illustration.darkside.js +0 -30
- package/cjs/guide-panel/Illustration.darkside.js.map +0 -1
- package/esm/form/file-upload/parts/item/ItemName.js +0 -27
- package/esm/form/file-upload/parts/item/ItemName.js.map +0 -1
- package/esm/guide-panel/Illustration.darkside.d.ts +0 -2
- package/esm/guide-panel/Illustration.darkside.js +0 -23
- package/esm/guide-panel/Illustration.darkside.js.map +0 -1
- package/src/form/file-upload/parts/item/ItemName.tsx +0 -58
- package/src/guide-panel/Illustration.darkside.tsx +0 -91
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineMessage.js","sourceRoot":"","sources":["../../../src/inline-message/root/InlineMessage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,6CAAmE;AACnE,iDAA6C;AAC7C,qCAA8D;AAC9D,2DAAqD;AACrD,iEAA8D;
|
|
1
|
+
{"version":3,"file":"InlineMessage.js","sourceRoot":"","sources":["../../../src/inline-message/root/InlineMessage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,6CAAmE;AACnE,iDAA6C;AAC7C,qCAA8D;AAC9D,2DAAqD;AACrD,iEAA8D;AAkB9D;;;;;;;;;;;;;;;;;;;GAmBG;AACU,QAAA,aAAa,GAGtB,IAAA,kBAAU,EACZ,CACE,EAOkD,EAClD,YAAY,EACZ,EAAE;QATF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,IAAI,GAAG,QAAQ,OAEiC,EAD7C,SAAS,cANd,iDAOC,CADa;IAId,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAC9B,MAAM,YAAY,GAAG,IAAA,wBAAgB,GAAE,CAAC;IAExC,MAAM,SAAS,GAAG,IAAA,oBAAO,EAAC,QAAQ,CAAC,CAAC;IACpC,MAAM,QAAQ,GAAG,IAAA,YAAK,GAAE,CAAC;IACzB,MAAM,SAAS,GAAG,IAAA,YAAK,GAAE,CAAC;IAE1B,OAAO,CACL,8BAAC,sBAAS,kBACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,gBACpC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,IAC9C,SAAS,IACb,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,SAAS,eACF,IAAI;QAEf,8BAAC,qCAAiB,IAAC,MAAM,EAAE,MAAM,GAAI;QACpC,MAAM,IAAI,CACT,8BAAC,sBAAS,IAAC,EAAE,EAAE,QAAQ,uBAAc,cAAc,UAChD,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,CACf,CACb;QAED,sDACc,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,EAC/B,EAAE,EAAE,SAAS,qBACI,IAAA,cAAE,EAAC,QAAQ,EAAE,SAAS,CAAC,IAEvC,QAAQ,CACJ,CACG,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,qBAAa,CAAC"}
|
|
@@ -85,16 +85,12 @@ const InternalHeaderUserButton_1 = __importDefault(require("./InternalHeaderUser
|
|
|
85
85
|
*/
|
|
86
86
|
exports.InternalHeader = (0, react_1.forwardRef)((_a, ref) => {
|
|
87
87
|
var { className } = _a, rest = __rest(_a, ["className"]);
|
|
88
|
-
const themeContext = (0, Theme_1.useThemeInternal)();
|
|
89
88
|
const { cn } = (0, Theme_1.useRenameCSS)();
|
|
90
89
|
/*
|
|
91
90
|
* Component is always in "dark" mode, so we manually override global theme.
|
|
92
91
|
*/
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
react_1.default.createElement("header", Object.assign({}, rest, { ref: ref, className: cn("navds-internalheader", className) }))));
|
|
96
|
-
}
|
|
97
|
-
return (react_1.default.createElement("header", Object.assign({ "data-theme": "dark" }, rest, { ref: ref, className: cn("navds-internalheader", className) })));
|
|
92
|
+
return (react_1.default.createElement(Theme_1.Theme, { theme: "dark", asChild: true, hasBackground: false },
|
|
93
|
+
react_1.default.createElement("header", Object.assign({}, rest, { ref: ref, className: cn("navds-internalheader", className) }))));
|
|
98
94
|
});
|
|
99
95
|
exports.InternalHeader.Title = InternalHeaderTitle_1.default;
|
|
100
96
|
exports.InternalHeader.User = InternalHeaderUser_1.default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InternalHeader.js","sourceRoot":"","sources":["../../src/internal-header/InternalHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0D;AAC1D,
|
|
1
|
+
{"version":3,"file":"InternalHeader.js","sourceRoot":"","sources":["../../src/internal-header/InternalHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0D;AAC1D,0CAAqD;AAErD,kFAEgC;AAChC,gFAE+B;AAC/B,8EAE8B;AAC9B,0FAEoC;AAoCpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACU,QAAA,cAAc,GAAG,IAAA,kBAAU,EAAC,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAC5D,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAE9B;;OAEG;IACH,OAAO,CACL,8BAAC,aAAK,IAAC,KAAK,EAAC,MAAM,EAAC,OAAO,QAAC,aAAa,EAAE,KAAK;QAC9C,0DACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,IAChD,CACI,CACT,CAAC;AACJ,CAAC,CAA4B,CAAC;AAE9B,sBAAc,CAAC,KAAK,GAAG,6BAAmB,CAAC;AAC3C,sBAAc,CAAC,IAAI,GAAG,4BAAkB,CAAC;AACzC,sBAAc,CAAC,MAAM,GAAG,8BAAoB,CAAC;AAC7C,sBAAc,CAAC,UAAU,GAAG,kCAAwB,CAAC;AAErD,kBAAe,sBAAc,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { ResponsiveProp, SpacingScale } from "../utilities/types";
|
|
|
3
3
|
export type PrimitiveProps = {
|
|
4
4
|
/**
|
|
5
5
|
* Padding around children.
|
|
6
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
6
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
|
|
7
7
|
* or an object of spacing tokens for different breakpoints.
|
|
8
8
|
* @example
|
|
9
9
|
* padding='space-16'
|
|
@@ -12,7 +12,7 @@ export type PrimitiveProps = {
|
|
|
12
12
|
padding?: ResponsiveProp<SpacingScale>;
|
|
13
13
|
/**
|
|
14
14
|
* Horizontal padding around children.
|
|
15
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
15
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
|
|
16
16
|
* or an object of spacing tokens for different breakpoints.
|
|
17
17
|
* @example
|
|
18
18
|
* paddingInline='space-16'
|
|
@@ -22,7 +22,7 @@ export type PrimitiveProps = {
|
|
|
22
22
|
paddingInline?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
|
|
23
23
|
/**
|
|
24
24
|
* Vertical padding around children.
|
|
25
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
25
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
|
|
26
26
|
* or an object of spacing tokens for different breakpoints.
|
|
27
27
|
* @example
|
|
28
28
|
* paddingBlock='space-16'
|
|
@@ -32,7 +32,7 @@ export type PrimitiveProps = {
|
|
|
32
32
|
paddingBlock?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
|
|
33
33
|
/**
|
|
34
34
|
* Margin around element.
|
|
35
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
35
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
|
|
36
36
|
* or an object of spacing tokens for different breakpoints.
|
|
37
37
|
* @example
|
|
38
38
|
* margin='space-16'
|
|
@@ -41,7 +41,7 @@ export type PrimitiveProps = {
|
|
|
41
41
|
margin?: ResponsiveProp<SpacingScale>;
|
|
42
42
|
/**
|
|
43
43
|
* Horizontal margin around element.
|
|
44
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
44
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
|
|
45
45
|
* or an object of spacing tokens for different breakpoints.
|
|
46
46
|
* @example
|
|
47
47
|
* marginInline='space-16'
|
|
@@ -51,7 +51,7 @@ export type PrimitiveProps = {
|
|
|
51
51
|
marginInline?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}` | "auto" | `auto ${SpacingScale}` | `${SpacingScale} auto`>;
|
|
52
52
|
/**
|
|
53
53
|
* Vertical margin around element.
|
|
54
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
54
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
|
|
55
55
|
* or an object of spacing tokens for different breakpoints.
|
|
56
56
|
* @example
|
|
57
57
|
* marginBlock='space-16'
|
|
@@ -89,7 +89,7 @@ export type PrimitiveProps = {
|
|
|
89
89
|
position?: ResponsiveProp<"static" | "relative" | "absolute" | "fixed" | "sticky">;
|
|
90
90
|
/**
|
|
91
91
|
* CSS `inset`.
|
|
92
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
92
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
|
|
93
93
|
* or an object of spacing tokens for different breakpoints.
|
|
94
94
|
* @example
|
|
95
95
|
* inset='space-16'
|
|
@@ -99,7 +99,7 @@ export type PrimitiveProps = {
|
|
|
99
99
|
inset?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
|
|
100
100
|
/**
|
|
101
101
|
* CSS `top`
|
|
102
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
102
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
|
|
103
103
|
* or an object of spacing tokens for different breakpoints.
|
|
104
104
|
* @example
|
|
105
105
|
* top='space-16'
|
|
@@ -108,7 +108,7 @@ export type PrimitiveProps = {
|
|
|
108
108
|
top?: ResponsiveProp<SpacingScale>;
|
|
109
109
|
/**
|
|
110
110
|
* CSS `right`
|
|
111
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
111
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
|
|
112
112
|
* or an object of spacing tokens for different breakpoints.
|
|
113
113
|
* @example
|
|
114
114
|
* right='space-16'
|
|
@@ -117,7 +117,7 @@ export type PrimitiveProps = {
|
|
|
117
117
|
right?: ResponsiveProp<SpacingScale>;
|
|
118
118
|
/**
|
|
119
119
|
* CSS `bottom`
|
|
120
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
120
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
|
|
121
121
|
* or an object of spacing tokens for different breakpoints.
|
|
122
122
|
* @example
|
|
123
123
|
* bottom='space-16'
|
|
@@ -126,7 +126,7 @@ export type PrimitiveProps = {
|
|
|
126
126
|
bottom?: ResponsiveProp<SpacingScale>;
|
|
127
127
|
/**
|
|
128
128
|
* CSS `left`
|
|
129
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
129
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
|
|
130
130
|
* or an object of spacing tokens for different breakpoints.
|
|
131
131
|
* @example
|
|
132
132
|
* left='space-16'
|
|
@@ -36,10 +36,8 @@ exports.PRIMITIVE_PROPS = [
|
|
|
36
36
|
"gridColumn",
|
|
37
37
|
];
|
|
38
38
|
const BasePrimitive = ({ children, className, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink, gridColumn, }) => {
|
|
39
|
-
const themeContext = (0, Theme_1.useThemeInternal)();
|
|
40
39
|
const { cn } = (0, Theme_1.useRenameCSS)();
|
|
41
|
-
const
|
|
42
|
-
const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, css_1.getResponsiveProps)(prefix, "r", "p", "spacing", padding)), (0, css_1.getResponsiveProps)(prefix, "r", "pi", "spacing", paddingInline)), (0, css_1.getResponsiveProps)(prefix, "r", "pb", "spacing", paddingBlock)), (0, css_1.getResponsiveProps)(prefix, "r", "m", "spacing", margin)), (0, css_1.getResponsiveProps)(prefix, "r", "mi", "spacing", marginInline)), (0, css_1.getResponsiveProps)(prefix, "r", "mb", "spacing", marginBlock)), (0, css_1.getResponsiveValue)(prefix, "r", "w", width)), (0, css_1.getResponsiveValue)(prefix, "r", "minw", minWidth)), (0, css_1.getResponsiveValue)(prefix, "r", "maxw", maxWidth)), (0, css_1.getResponsiveValue)(prefix, "r", "h", height)), (0, css_1.getResponsiveValue)(prefix, "r", "minh", minHeight)), (0, css_1.getResponsiveValue)(prefix, "r", "maxh", maxHeight)), (0, css_1.getResponsiveValue)(prefix, "r", "position", position)), (0, css_1.getResponsiveProps)(prefix, "r", "inset", "spacing", inset)), (0, css_1.getResponsiveProps)(prefix, "r", "top", "spacing", top)), (0, css_1.getResponsiveProps)(prefix, "r", "right", "spacing", right)), (0, css_1.getResponsiveProps)(prefix, "r", "bottom", "spacing", bottom)), (0, css_1.getResponsiveProps)(prefix, "r", "left", "spacing", left)), (0, css_1.getResponsiveValue)(prefix, "r", "overflow", overflow)), (0, css_1.getResponsiveValue)(prefix, "r", "overflowx", overflowX)), (0, css_1.getResponsiveValue)(prefix, "r", "overflowy", overflowY)), (0, css_1.getResponsiveValue)(prefix, "r", "flex-basis", flexBasis)), (0, css_1.getResponsiveValue)(prefix, "r", "flex-grow", flexGrow)), (0, css_1.getResponsiveValue)(prefix, "r", "flex-shrink", flexShrink)), (0, css_1.getResponsiveValue)(prefix, "r", "grid-column", gridColumn));
|
|
40
|
+
const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, css_1.getResponsiveProps)("r", "p", "space", padding)), (0, css_1.getResponsiveProps)("r", "pi", "space", paddingInline)), (0, css_1.getResponsiveProps)("r", "pb", "space", paddingBlock)), (0, css_1.getResponsiveProps)("r", "m", "space", margin)), (0, css_1.getResponsiveProps)("r", "mi", "space", marginInline)), (0, css_1.getResponsiveProps)("r", "mb", "space", marginBlock)), (0, css_1.getResponsiveValue)("r", "w", width)), (0, css_1.getResponsiveValue)("r", "minw", minWidth)), (0, css_1.getResponsiveValue)("r", "maxw", maxWidth)), (0, css_1.getResponsiveValue)("r", "h", height)), (0, css_1.getResponsiveValue)("r", "minh", minHeight)), (0, css_1.getResponsiveValue)("r", "maxh", maxHeight)), (0, css_1.getResponsiveValue)("r", "position", position)), (0, css_1.getResponsiveProps)("r", "inset", "space", inset)), (0, css_1.getResponsiveProps)("r", "top", "space", top)), (0, css_1.getResponsiveProps)("r", "right", "space", right)), (0, css_1.getResponsiveProps)("r", "bottom", "space", bottom)), (0, css_1.getResponsiveProps)("r", "left", "space", left)), (0, css_1.getResponsiveValue)("r", "overflow", overflow)), (0, css_1.getResponsiveValue)("r", "overflowx", overflowX)), (0, css_1.getResponsiveValue)("r", "overflowy", overflowY)), (0, css_1.getResponsiveValue)("r", "flex-basis", flexBasis)), (0, css_1.getResponsiveValue)("r", "flex-grow", flexGrow)), (0, css_1.getResponsiveValue)("r", "flex-shrink", flexShrink)), (0, css_1.getResponsiveValue)("r", "grid-column", gridColumn));
|
|
43
41
|
return (react_1.default.createElement(Slot_1.Slot, { className: cn({
|
|
44
42
|
className,
|
|
45
43
|
"navds-r-p": padding,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BasePrimitive.js","sourceRoot":"","sources":["../../../src/layout/base/BasePrimitive.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,0CAAuC;AACvC,
|
|
1
|
+
{"version":3,"file":"BasePrimitive.js","sourceRoot":"","sources":["../../../src/layout/base/BasePrimitive.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ResponsiveProp, SpacingScale } from "../utilities/types";
|
|
3
|
-
export type BleedSpacingInline = "
|
|
4
|
-
export type BleedSpacingBlock =
|
|
3
|
+
export type BleedSpacingInline = "full" | SpacingScale;
|
|
4
|
+
export type BleedSpacingBlock = SpacingScale;
|
|
5
5
|
export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
6
6
|
/**
|
|
7
7
|
* **Negative** horizontal margin around children.
|
|
8
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
8
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
|
|
9
9
|
* or an object of spacing tokens for different breakpoints.
|
|
10
10
|
*
|
|
11
11
|
* The `px` value is useful to nudge by just 1px.
|
|
@@ -14,12 +14,12 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
14
14
|
* @example
|
|
15
15
|
* marginInline='space-16'
|
|
16
16
|
* marginInline='space-16 space-20'
|
|
17
|
-
* marginInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}
|
|
17
|
+
* marginInline={{xs: 'space-0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}
|
|
18
18
|
*/
|
|
19
19
|
marginInline?: ResponsiveProp<BleedSpacingInline | `${BleedSpacingInline} ${BleedSpacingInline}`>;
|
|
20
20
|
/**
|
|
21
21
|
* **Negative** vertical margin around children.
|
|
22
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
22
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
|
|
23
23
|
* or an object of spacing tokens for different breakpoints.
|
|
24
24
|
*
|
|
25
25
|
* The `px` value is useful to nudge by just 1px.
|
|
@@ -28,7 +28,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
28
28
|
* @example
|
|
29
29
|
* marginBlock='space-16'
|
|
30
30
|
* marginBlock='space-16 space-20'
|
|
31
|
-
* marginBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}
|
|
31
|
+
* marginBlock={{xs: 'space-0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}
|
|
32
32
|
*/
|
|
33
33
|
marginBlock?: ResponsiveProp<BleedSpacingBlock | `${BleedSpacingBlock} ${BleedSpacingBlock}`>;
|
|
34
34
|
/**
|
|
@@ -51,7 +51,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
51
51
|
*
|
|
52
52
|
* @example
|
|
53
53
|
* <Box padding="4">
|
|
54
|
-
* <Bleed marginInline="
|
|
54
|
+
* <Bleed marginInline="space-16" marginBlock="space-16">
|
|
55
55
|
* <BodyLong>Some content</BodyLong>
|
|
56
56
|
* </Bleed>
|
|
57
57
|
* </Box>
|
|
@@ -58,19 +58,17 @@ const css_1 = require("../utilities/css");
|
|
|
58
58
|
*
|
|
59
59
|
* @example
|
|
60
60
|
* <Box padding="4">
|
|
61
|
-
* <Bleed marginInline="
|
|
61
|
+
* <Bleed marginInline="space-16" marginBlock="space-16">
|
|
62
62
|
* <BodyLong>Some content</BodyLong>
|
|
63
63
|
* </Bleed>
|
|
64
64
|
* </Box>
|
|
65
65
|
*/
|
|
66
66
|
exports.Bleed = (0, react_1.forwardRef)((_a, ref) => {
|
|
67
67
|
var { className, marginInline, marginBlock, reflectivePadding, style: _style, asChild } = _a, rest = __rest(_a, ["className", "marginInline", "marginBlock", "reflectivePadding", "style", "asChild"]);
|
|
68
|
-
const themeContext = (0, Theme_1.useThemeInternal)();
|
|
69
68
|
const { cn } = (0, Theme_1.useRenameCSS)();
|
|
70
|
-
|
|
71
|
-
let style = Object.assign(Object.assign(Object.assign({}, _style), (0, css_1.getResponsiveProps)(prefix, "bleed", "margin-inline", "spacing", marginInline, true, ["0", "full", "px"])), (0, css_1.getResponsiveProps)(prefix, "bleed", "margin-block", "spacing", marginBlock, true, ["0", "px"]));
|
|
69
|
+
let style = Object.assign(Object.assign(Object.assign({}, _style), (0, css_1.getResponsiveProps)("bleed", "margin-inline", "space", marginInline, true)), (0, css_1.getResponsiveProps)("bleed", "margin-block", "space", marginBlock, true));
|
|
72
70
|
if (reflectivePadding) {
|
|
73
|
-
style = Object.assign(Object.assign(Object.assign({}, style), (0, css_1.getResponsiveProps)(
|
|
71
|
+
style = Object.assign(Object.assign(Object.assign({}, style), (0, css_1.getResponsiveProps)("bleed", "padding-inline", "space", marginInline, false)), (0, css_1.getResponsiveProps)("bleed", "padding-block", "space", marginBlock, false));
|
|
74
72
|
}
|
|
75
73
|
const Comp = asChild ? Slot_1.Slot : "div";
|
|
76
74
|
return (react_1.default.createElement(Comp, Object.assign({}, rest, { className: cn("navds-bleed", className, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Bleed.js","sourceRoot":"","sources":["../../../src/layout/bleed/Bleed.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,0CAAuC;AACvC,
|
|
1
|
+
{"version":3,"file":"Bleed.js","sourceRoot":"","sources":["../../../src/layout/bleed/Bleed.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,0CAAuC;AACvC,6CAAiD;AACjD,0CAAsD;AAoDtD;;;;;;;;;;;;;GAaG;AACU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,KAAK,EAAE,MAAM,EACb,OAAO,OAER,EADI,IAAI,cAPT,qFAQC,CADQ;IAIT,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAE9B,IAAI,KAAK,iDACJ,MAAM,GACN,IAAA,wBAAkB,EACnB,OAAO,EACP,eAAe,EACf,OAAO,EACP,YAAY,EACZ,IAAI,CACL,GAEE,IAAA,wBAAkB,EACnB,OAAO,EACP,cAAc,EACd,OAAO,EACP,WAAW,EACX,IAAI,CACL,CACF,CAAC;IAEF,IAAI,iBAAiB,EAAE,CAAC;QACtB,KAAK,iDACA,KAAK,GACL,IAAA,wBAAkB,EACnB,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,KAAK,CACN,GACE,IAAA,wBAAkB,EACnB,OAAO,EACP,eAAe,EACf,OAAO,EACP,WAAW,EACX,KAAK,CACN,CACF,CAAC;IACJ,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpC,OAAO,CACL,8BAAC,IAAI,oBACC,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,sBAAsB,EAAE,iBAAiB;SAC1C,CAAC,EACF,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,aAAK,CAAC"}
|
package/cjs/layout/box/Box.d.ts
CHANGED
|
@@ -1,28 +1,32 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import type { AkselColoredBorderToken, AkselColoredStatelessBackgroundToken, AkselDynamicStatelessBackgroundToken, AkselRootBackgroundToken, AkselRootBorderToken, AkselShadowToken } from "@navikt/ds-tokens/types";
|
|
2
3
|
import { OverridableComponent } from "../../util/types";
|
|
3
4
|
import { PrimitiveProps } from "../base/BasePrimitive";
|
|
4
5
|
import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
|
|
5
|
-
import {
|
|
6
|
+
import { BorderRadiusScale, ResponsiveProp, SpaceDelimitedAttribute } from "../utilities/types";
|
|
6
7
|
import BoxNew from "./Box.darkside";
|
|
7
8
|
export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
8
9
|
/**
|
|
9
10
|
* CSS `background-color` property.
|
|
10
|
-
* Accepts a [background
|
|
11
|
+
* Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#backgroundColor).
|
|
12
|
+
* @see {@link AkselRootBackgroundToken}, {@link AkselColoredStatelessBackgroundToken} and {@link AkselDynamicStatelessBackgroundToken}
|
|
11
13
|
*/
|
|
12
|
-
background?:
|
|
14
|
+
background?: AkselRootBackgroundToken | AkselColoredStatelessBackgroundToken | AkselDynamicStatelessBackgroundToken;
|
|
13
15
|
/**
|
|
14
16
|
* CSS `border-color` property.
|
|
15
|
-
* Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
17
|
+
* Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#borderColor).
|
|
18
|
+
* @see {@link AkselColoredBorderToken}
|
|
16
19
|
*/
|
|
17
|
-
borderColor?:
|
|
20
|
+
borderColor?: Exclude<AkselRootBorderToken, "focus"> | AkselColoredBorderToken;
|
|
18
21
|
/**
|
|
19
22
|
* CSS `border-radius` property.
|
|
20
|
-
* Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
23
|
+
* Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#radius)
|
|
21
24
|
* or an object of radius tokens for different breakpoints.
|
|
22
25
|
* @example
|
|
23
26
|
* borderRadius='full'
|
|
24
27
|
* borderRadius='0 full 12 2'
|
|
25
28
|
* borderRadius={{xs: '2 12', sm: '0', md: '12', lg: 'full'}}
|
|
29
|
+
* @see {@link BorderRadiusScale}
|
|
26
30
|
*/
|
|
27
31
|
borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiusScale | "0">>;
|
|
28
32
|
/**
|
|
@@ -35,10 +39,16 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
35
39
|
/** Shadow on box. Accepts a shadow token.
|
|
36
40
|
* @example
|
|
37
41
|
* shadow='small'
|
|
42
|
+
* @see {@link ShadowKeys}
|
|
38
43
|
*/
|
|
39
|
-
shadow?:
|
|
44
|
+
shadow?: AkselShadowToken;
|
|
40
45
|
} & PrimitiveProps & PrimitiveAsChildProps;
|
|
41
46
|
interface BoxComponentType extends OverridableComponent<BoxProps, HTMLDivElement> {
|
|
47
|
+
/**
|
|
48
|
+
* @deprecated Deprecated in v8. Use `Box` from '@navikt/ds-react/Box' instead (with same props).
|
|
49
|
+
*
|
|
50
|
+
* **Run `npx @navikt/aksel@latest codemod v8-box-new`> to migrate.**
|
|
51
|
+
*/
|
|
42
52
|
New: typeof BoxNew;
|
|
43
53
|
}
|
|
44
54
|
/**
|
|
@@ -49,21 +59,21 @@ interface BoxComponentType extends OverridableComponent<BoxProps, HTMLDivElement
|
|
|
49
59
|
* @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
|
|
50
60
|
*
|
|
51
61
|
* @example
|
|
52
|
-
* <Box padding="
|
|
62
|
+
* <Box padding="space-16">
|
|
53
63
|
* <BodyShort>Hei</BodyShort>
|
|
54
64
|
* </Box>
|
|
55
65
|
*
|
|
56
66
|
* @example
|
|
57
|
-
* <Box padding={{xs: '
|
|
67
|
+
* <Box padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}>
|
|
58
68
|
* <BodyShort>Hei</BodyShort>
|
|
59
69
|
* </Box>
|
|
60
70
|
*
|
|
61
71
|
* @example
|
|
62
|
-
* <VStack gap="
|
|
63
|
-
* <Box padding="
|
|
72
|
+
* <VStack gap="space-32">
|
|
73
|
+
* <Box padding="space-16">
|
|
64
74
|
* <BodyShort>Hei</BodyShort>
|
|
65
75
|
* </Box>
|
|
66
|
-
* <Box padding="
|
|
76
|
+
* <Box padding="space-16">
|
|
67
77
|
* <BodyShort>Hei</BodyShort>
|
|
68
78
|
* </Box>
|
|
69
79
|
* </VStack>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type { AkselColoredBorderToken, AkselColoredStatelessBackgroundToken, AkselRootBackgroundToken, AkselRootBorderToken, AkselShadowToken } from "@navikt/ds-tokens/types";
|
|
2
|
+
import type { AkselColoredBorderToken, AkselColoredStatelessBackgroundToken, AkselDynamicStatelessBackgroundToken, AkselRootBackgroundToken, AkselRootBorderToken, AkselShadowToken } from "@navikt/ds-tokens/types";
|
|
3
3
|
import { OverridableComponent } from "../../util/types";
|
|
4
4
|
import { PrimitiveProps } from "../base/BasePrimitive";
|
|
5
5
|
import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
|
|
@@ -7,25 +7,25 @@ import { BorderRadiusScale, ResponsiveProp, SpaceDelimitedAttribute } from "../u
|
|
|
7
7
|
export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
8
8
|
/**
|
|
9
9
|
* CSS `background-color` property.
|
|
10
|
-
* Accepts a [background
|
|
11
|
-
* @see {@link
|
|
10
|
+
* Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#backgroundColor).
|
|
11
|
+
* @see {@link AkselRootBackgroundToken}, {@link AkselColoredStatelessBackgroundToken} and {@link AkselDynamicStatelessBackgroundToken}
|
|
12
12
|
*/
|
|
13
|
-
background?: AkselRootBackgroundToken | AkselColoredStatelessBackgroundToken;
|
|
13
|
+
background?: AkselRootBackgroundToken | AkselColoredStatelessBackgroundToken | AkselDynamicStatelessBackgroundToken;
|
|
14
14
|
/**
|
|
15
15
|
* CSS `border-color` property.
|
|
16
|
-
* Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
17
|
-
* @see {@link
|
|
16
|
+
* Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#borderColor).
|
|
17
|
+
* @see {@link AkselColoredBorderToken}
|
|
18
18
|
*/
|
|
19
19
|
borderColor?: Exclude<AkselRootBorderToken, "focus"> | AkselColoredBorderToken;
|
|
20
20
|
/**
|
|
21
21
|
* CSS `border-radius` property.
|
|
22
|
-
* Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
22
|
+
* Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#radius)
|
|
23
23
|
* or an object of radius tokens for different breakpoints.
|
|
24
24
|
* @example
|
|
25
25
|
* borderRadius='full'
|
|
26
26
|
* borderRadius='0 full 12 2'
|
|
27
27
|
* borderRadius={{xs: '2 12', sm: '0', md: '12', lg: 'full'}}
|
|
28
|
-
* @see {@link
|
|
28
|
+
* @see {@link BorderRadiusScale}
|
|
29
29
|
*/
|
|
30
30
|
borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiusScale | "0">>;
|
|
31
31
|
/**
|
|
@@ -43,29 +43,31 @@ export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
43
43
|
shadow?: AkselShadowToken;
|
|
44
44
|
} & PrimitiveProps & PrimitiveAsChildProps;
|
|
45
45
|
/**
|
|
46
|
-
*
|
|
47
46
|
* Foundational Layout-primitive for generic encapsulation & styling.
|
|
47
|
+
* @deprecated Deprecated in v8. Use `Box` from '@navikt/ds-react/Box' instead (with same props).
|
|
48
|
+
*
|
|
49
|
+
* **Run `npx @navikt/aksel@latest codemod v8-box-new` to migrate.**
|
|
48
50
|
*
|
|
49
51
|
* @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/box)
|
|
50
52
|
* @see 🏷️ {@link BoxProps}
|
|
51
53
|
* @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
|
|
52
54
|
*
|
|
53
55
|
* @example
|
|
54
|
-
* <Box padding="
|
|
56
|
+
* <Box padding="space-16">
|
|
55
57
|
* <BodyShort>Hei</BodyShort>
|
|
56
58
|
* </Box>
|
|
57
59
|
*
|
|
58
60
|
* @example
|
|
59
|
-
* <Box padding={{xs: '
|
|
61
|
+
* <Box padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}>
|
|
60
62
|
* <BodyShort>Hei</BodyShort>
|
|
61
63
|
* </Box>
|
|
62
64
|
*
|
|
63
65
|
* @example
|
|
64
|
-
* <VStack gap="
|
|
65
|
-
* <Box padding="
|
|
66
|
+
* <VStack gap="space-32">
|
|
67
|
+
* <Box padding="space-16">
|
|
66
68
|
* <BodyShort>Hei</BodyShort>
|
|
67
69
|
* </Box>
|
|
68
|
-
* <Box padding="
|
|
70
|
+
* <Box padding="space-16">
|
|
69
71
|
* <BodyShort>Hei</BodyShort>
|
|
70
72
|
* </Box>
|
|
71
73
|
* </VStack>
|
|
@@ -52,29 +52,31 @@ const util_1 = require("../../util");
|
|
|
52
52
|
const BasePrimitive_1 = __importStar(require("../base/BasePrimitive"));
|
|
53
53
|
const css_1 = require("../utilities/css");
|
|
54
54
|
/**
|
|
55
|
-
*
|
|
56
55
|
* Foundational Layout-primitive for generic encapsulation & styling.
|
|
56
|
+
* @deprecated Deprecated in v8. Use `Box` from '@navikt/ds-react/Box' instead (with same props).
|
|
57
|
+
*
|
|
58
|
+
* **Run `npx @navikt/aksel@latest codemod v8-box-new` to migrate.**
|
|
57
59
|
*
|
|
58
60
|
* @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/box)
|
|
59
61
|
* @see 🏷️ {@link BoxProps}
|
|
60
62
|
* @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
|
|
61
63
|
*
|
|
62
64
|
* @example
|
|
63
|
-
* <Box padding="
|
|
65
|
+
* <Box padding="space-16">
|
|
64
66
|
* <BodyShort>Hei</BodyShort>
|
|
65
67
|
* </Box>
|
|
66
68
|
*
|
|
67
69
|
* @example
|
|
68
|
-
* <Box padding={{xs: '
|
|
70
|
+
* <Box padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}>
|
|
69
71
|
* <BodyShort>Hei</BodyShort>
|
|
70
72
|
* </Box>
|
|
71
73
|
*
|
|
72
74
|
* @example
|
|
73
|
-
* <VStack gap="
|
|
74
|
-
* <Box padding="
|
|
75
|
+
* <VStack gap="space-32">
|
|
76
|
+
* <Box padding="space-16">
|
|
75
77
|
* <BodyShort>Hei</BodyShort>
|
|
76
78
|
* </Box>
|
|
77
|
-
* <Box padding="
|
|
79
|
+
* <Box padding="space-16">
|
|
78
80
|
* <BodyShort>Hei</BodyShort>
|
|
79
81
|
* </Box>
|
|
80
82
|
* </VStack>
|
|
@@ -91,7 +93,9 @@ exports.BoxNew = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
91
93
|
.split(" ")
|
|
92
94
|
.map((x) => `${x}px`)
|
|
93
95
|
.join(" ")
|
|
94
|
-
: undefined }), (0, css_1.getResponsiveProps)("
|
|
96
|
+
: undefined }), (0, css_1.getResponsiveProps)("box", "radius", "radius", borderRadius, false, [
|
|
97
|
+
"0",
|
|
98
|
+
]));
|
|
95
99
|
const Comp = asChild ? Slot_1.Slot : Component;
|
|
96
100
|
return (react_1.default.createElement(BasePrimitive_1.default, Object.assign({}, rest),
|
|
97
101
|
react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, style: style, className: cn("navds-box", className, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.darkside.js","sourceRoot":"","sources":["../../../src/layout/box/Box.darkside.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;
|
|
1
|
+
{"version":3,"file":"Box.darkside.js","sourceRoot":"","sources":["../../../src/layout/box/Box.darkside.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAS1C,0CAAuC;AACvC,6CAAiD;AACjD,qCAAkC;AAElC,uEAG+B;AAE/B,0CAAsD;AAsDtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACU,QAAA,MAAM,GACjB,IAAA,kBAAU,EACR,CACE,EAY2C,EAC3C,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,MAAM,EACN,KAAK,EAAE,MAAM,EACb,OAAO,OAEkC,EADtC,IAAI,cAXT,yHAYC,CADQ;IAIT,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAC9B,MAAM,KAAK,iDACN,MAAM,KACT,wBAAwB,EAAE,UAAU;YAClC,CAAC,CAAC,eAAe,UAAU,GAAG;YAC9B,CAAC,CAAC,SAAS,EACb,oBAAoB,EAAE,MAAM,CAAC,CAAC,CAAC,mBAAmB,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,EACvE,0BAA0B,EAAE,WAAW;YACrC,CAAC,CAAC,mBAAmB,WAAW,GAAG;YACnC,CAAC,CAAC,SAAS,EACb,0BAA0B,EAAE,WAAW;YACrC,CAAC,CAAC,WAAW;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC;iBACpB,IAAI,CAAC,GAAG,CAAC;YACd,CAAC,CAAC,SAAS,KACV,IAAA,wBAAkB,EAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE;QACpE,GAAG;KACJ,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE;gBACpC,cAAc,EAAE,UAAU;gBAC1B,wBAAwB,EAAE,WAAW;gBACrC,wBAAwB,EAAE,WAAW;gBACrC,kBAAkB,EAAE,YAAY;gBAChC,kBAAkB,EAAE,MAAM;aAC3B,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,kBAAe,cAAM,CAAC"}
|
package/cjs/layout/box/Box.js
CHANGED
|
@@ -63,65 +63,47 @@ const Box_darkside_1 = __importDefault(require("./Box.darkside"));
|
|
|
63
63
|
* @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
|
|
64
64
|
*
|
|
65
65
|
* @example
|
|
66
|
-
* <Box padding="
|
|
66
|
+
* <Box padding="space-16">
|
|
67
67
|
* <BodyShort>Hei</BodyShort>
|
|
68
68
|
* </Box>
|
|
69
69
|
*
|
|
70
70
|
* @example
|
|
71
|
-
* <Box padding={{xs: '
|
|
71
|
+
* <Box padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}>
|
|
72
72
|
* <BodyShort>Hei</BodyShort>
|
|
73
73
|
* </Box>
|
|
74
74
|
*
|
|
75
75
|
* @example
|
|
76
|
-
* <VStack gap="
|
|
77
|
-
* <Box padding="
|
|
76
|
+
* <VStack gap="space-32">
|
|
77
|
+
* <Box padding="space-16">
|
|
78
78
|
* <BodyShort>Hei</BodyShort>
|
|
79
79
|
* </Box>
|
|
80
|
-
* <Box padding="
|
|
80
|
+
* <Box padding="space-16">
|
|
81
81
|
* <BodyShort>Hei</BodyShort>
|
|
82
82
|
* </Box>
|
|
83
83
|
* </VStack>
|
|
84
84
|
*/
|
|
85
85
|
exports.BoxComponent = (0, react_1.forwardRef)((_a, ref) => {
|
|
86
86
|
var { children, className, as: Component = "div", background, borderColor, borderWidth, borderRadius, shadow, style: _style, asChild } = _a, rest = __rest(_a, ["children", "className", "as", "background", "borderColor", "borderWidth", "borderRadius", "shadow", "style", "asChild"]);
|
|
87
|
-
const themeContext = (0, Theme_1.useThemeInternal)();
|
|
88
87
|
const { cn } = (0, Theme_1.useRenameCSS)();
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
errorText += `\n- background: "${background}"`;
|
|
95
|
-
}
|
|
96
|
-
if (borderColor) {
|
|
97
|
-
errorText += `\n- borderColor: "${borderColor}"`;
|
|
98
|
-
}
|
|
99
|
-
if (shadow) {
|
|
100
|
-
errorText += `\n- shadow: "${shadow}"`;
|
|
101
|
-
}
|
|
102
|
-
throw new Error(`<Box /> with properties 'background', 'borderColor' or 'shadow' cannot be used with Aksel <Theme /> (darkmode-support). \nTo continue using these properties, migrate to '<Box.New>' (BoxNew for RSC)\nUpdate these props:${errorText}`);
|
|
103
|
-
}
|
|
104
|
-
const prefix = (themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside) ? "ax" : "a";
|
|
105
|
-
const style = Object.assign(Object.assign(Object.assign({}, _style), { [`--__${prefix}c-box-background`]: background
|
|
106
|
-
? `var(--a-${background})`
|
|
107
|
-
: undefined, [`--__${prefix}c-box-shadow`]: shadow
|
|
108
|
-
? `var(--a-shadow-${shadow})`
|
|
109
|
-
: undefined, [`--__${prefix}c-box-border-color`]: borderColor
|
|
110
|
-
? `var(--a-${borderColor})`
|
|
111
|
-
: undefined, [`--__${prefix}c-box-border-width`]: borderWidth
|
|
88
|
+
const style = Object.assign(Object.assign(Object.assign({}, _style), { "--__axc-box-background": background
|
|
89
|
+
? `var(--ax-bg-${background})`
|
|
90
|
+
: undefined, "--__axc-box-shadow": shadow ? `var(--ax-shadow-${shadow})` : undefined, "--__axc-box-border-color": borderColor
|
|
91
|
+
? `var(--ax-border-${borderColor})`
|
|
92
|
+
: undefined, "--__axc-box-border-width": borderWidth
|
|
112
93
|
? borderWidth
|
|
113
94
|
.split(" ")
|
|
114
95
|
.map((x) => `${x}px`)
|
|
115
96
|
.join(" ")
|
|
116
|
-
: undefined }), (0, css_1.getResponsiveProps)(
|
|
97
|
+
: undefined }), (0, css_1.getResponsiveProps)("box", "radius", "radius", borderRadius, false, [
|
|
98
|
+
"0",
|
|
99
|
+
]));
|
|
117
100
|
const Comp = asChild ? Slot_1.Slot : Component;
|
|
118
101
|
return (react_1.default.createElement(BasePrimitive_1.default, Object.assign({}, rest),
|
|
119
102
|
react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, style: style, className: cn("navds-box", className, {
|
|
120
103
|
"navds-box-bg": background,
|
|
121
104
|
"navds-box-border-color": borderColor,
|
|
122
105
|
"navds-box-border-width": borderWidth,
|
|
123
|
-
"navds-box-
|
|
124
|
-
"navds-box-radius": borderRadius && (themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside),
|
|
106
|
+
"navds-box-radius": borderRadius,
|
|
125
107
|
"navds-box-shadow": shadow,
|
|
126
108
|
}) }), children)));
|
|
127
109
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;
|
|
1
|
+
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAS1C,0CAAuC;AACvC,6CAAiD;AACjD,qCAAkC;AAElC,uEAG+B;AAE/B,0CAAsD;AAMtD,kEAAoC;AA2DpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACU,QAAA,YAAY,GACvB,IAAA,kBAAU,EACR,CACE,EAYwC,EACxC,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,MAAM,EACN,KAAK,EAAE,MAAM,EACb,OAAO,OAE+B,EADnC,IAAI,cAXT,yHAYC,CADQ;IAIT,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAC9B,MAAM,KAAK,iDACN,MAAM,KACT,wBAAwB,EAAE,UAAU;YAClC,CAAC,CAAC,eAAe,UAAU,GAAG;YAC9B,CAAC,CAAC,SAAS,EACb,oBAAoB,EAAE,MAAM,CAAC,CAAC,CAAC,mBAAmB,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,EACvE,0BAA0B,EAAE,WAAW;YACrC,CAAC,CAAC,mBAAmB,WAAW,GAAG;YACnC,CAAC,CAAC,SAAS,EACb,0BAA0B,EAAE,WAAW;YACrC,CAAC,CAAC,WAAW;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC;iBACpB,IAAI,CAAC,GAAG,CAAC;YACd,CAAC,CAAC,SAAS,KACV,IAAA,wBAAkB,EAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE;QACpE,GAAG;KACJ,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE;gBACpC,cAAc,EAAE,UAAU;gBAC1B,wBAAwB,EAAE,WAAW;gBACrC,wBAAwB,EAAE,WAAW;gBACrC,kBAAkB,EAAE,YAAY;gBAChC,kBAAkB,EAAE,MAAM;aAC3B,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAES,QAAA,GAAG,GAAG,oBAAgC,CAAC;AAEpD,WAAG,CAAC,GAAG,GAAG,sBAAM,CAAC;AAEjB,kBAAe,WAAG,CAAC"}
|
|
@@ -15,7 +15,7 @@ export type HGridProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
15
15
|
columns?: ResponsiveProp<number | string>;
|
|
16
16
|
/**
|
|
17
17
|
* Spacing between columns.
|
|
18
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#
|
|
18
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
|
|
19
19
|
* or an object of spacing tokens for different breakpoints.
|
|
20
20
|
* @example
|
|
21
21
|
* gap="space-20"
|
|
@@ -35,19 +35,19 @@ export type HGridProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
35
35
|
* @see 🏷️ {@link HGridProps}
|
|
36
36
|
*
|
|
37
37
|
* @example
|
|
38
|
-
* <HGrid gap="
|
|
38
|
+
* <HGrid gap="space-24" columns={3}>
|
|
39
39
|
* <div />
|
|
40
40
|
* <div />
|
|
41
41
|
* <div />
|
|
42
42
|
* </HGrid>
|
|
43
43
|
* @example
|
|
44
|
-
* <HGrid gap={{xs: "
|
|
44
|
+
* <HGrid gap={{xs: "space-8", md: "space-24"}} columns={3}>
|
|
45
45
|
* <div />
|
|
46
46
|
* <div />
|
|
47
47
|
* <div />
|
|
48
48
|
* </HGrid>
|
|
49
49
|
* @example
|
|
50
|
-
* <HGrid gap="
|
|
50
|
+
* <HGrid gap="space-24" columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}>
|
|
51
51
|
* <div />
|
|
52
52
|
* <div />
|
|
53
53
|
* <div />
|