bonprix-design-system 0.67.0 → 0.67.1

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 (3) hide show
  1. package/dist/components/BottomSheet/BottomSheet.js +2 -8
  2. package/dist/components/BottomSheet/BottomSheet.js.map +1 -1
  3. package/package.json +8 -8
package/dist/components/BottomSheet/BottomSheet.js CHANGED
@@ -45,20 +45,14 @@ var h = p({
45
45
  detent: "content",
46
46
  "data-bpds": "bottom-sheet",
47
47
  prefersReducedMotion: g,
48
- style: {
49
- "--touch-action": D ? "initial" : "pan-down",
50
- pointerEvents: void 0
51
- },
48
+ style: { "--touch-action": D ? "initial" : "pan-down" },
52
49
  role: "dialog",
53
50
  avoidKeyboard: !1,
54
51
  "aria-labelledby": k,
55
52
  children: [/* @__PURE__ */ f(m.Container, {
56
53
  className: v(),
57
54
  ref: p,
58
- style: {
59
- zIndex: c,
60
- pointerEvents: void 0
61
- },
55
+ style: { zIndex: c },
62
56
  children: [/* @__PURE__ */ d(m.Header, {
63
57
  unstyled: !0,
64
58
  className: y(),
package/dist/components/BottomSheet/BottomSheet.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { type IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport { ButtonTypeAttribute, TitleLevel, usePrefersReducedMotion } from \"@bonprix-ds/utils\";\nimport React, { FC, ReactNode, Ref, useId } from \"react\";\nimport { Sheet } from \"react-modal-sheet\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Button } from \"@components/Buttons\";\nimport ZIndexContext from \"@contexts/ZIndexContext\";\nimport { useInnerOpen } from \"@hooks\";\nimport { backdrop } from \"@utils/tailwindVariants\";\n\nimport BottomSheetContext from \"./BottomSheetContext\";\nimport useConsumeBottomSheet from \"./useConsumeBottomSheet\";\nimport useCreateBottomSheet from \"./useCreateBottomSheet\";\n\nconst generateClasses = tv({\n slots: {\n root: \"preflight block\",\n container: \"shadow-none rounded-none bg-clr-bg-modal max-h-[calc(100%-64px)]\",\n header: \"px-4 py-3\",\n titleAndIcons: \"flex gap-2 items-center touch-pan-down\",\n contentWrapper: \"flex flex-col w-full\",\n content: [\n \"typography-body1 text-clr-primary\",\n // scroller must be a flexbox to fix scrollbar\n // scroller needs some padding to not cut off the focus-ring\n \"*:flex *:-mx-0.5 *:px-0.5\",\n // scroller must set min-h-0 in order to make scrolling work inside our flex context\n \"*:min-h-0\",\n ],\n dragHandleContainer: \"h-6 flex justify-center items-center shrink-0\",\n dragHandle: \"h-1 w-8 rounded-full bg-clr-on-bg-low\",\n buttonSection: \"w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down\",\n backdrop: backdrop(),\n scrollArea: \"scroll-area\",\n },\n variants: {\n disableHorizontalPadding: {\n false: { scrollArea: \"px-4\" },\n true: \"\",\n },\n },\n});\n\ninterface SheetProps {\n /** All of the subcomponents should be placed inside this property. */\n children: ReactNode;\n /** Toggles the visibility of the sheet. Should be used in conjunction with the `onClose` property. */\n isOpen: boolean;\n /** Callback function, that is triggered when the sheet is attempted to be closed.\n *\n * It will be called in following cases:\n * - Click on backdrop\n * - Swipe down to close\n * - Click on \"close\" icon button in the upper-right corner\n * - Click on any button (PrimaryButton or SecondaryButton)\n *\n * Should be used in conjunction with `isOpen`. */\n onClose: () => void;\n /** Callback to execute when clicking back icon. */\n onBack?: () => void;\n /** The z-index of the sheet.. */\n zIndex?: number;\n}\n\ninterface SheetTitleProps {\n /** The text content. */\n children: string;\n /** An optional subline that is displayed right below the title. */\n subline?: string;\n /** The heading level for the title. */\n level?: TitleLevel;\n}\n\ninterface SheetButtonSectionProps {\n /** Primary and secondary buttons should be placed inside this section. */\n children: ReactNode;\n}\n\ninterface SheetContentProps {\n /** The content of the content section. */\n children: ReactNode;\n /** If `true`, the horizontal padding around the content will be removed. */\n disableHorizontalPadding?: boolean;\n}\n\nexport interface SheetButtonProps {\n /** The label of the button. */\n children: string;\n /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */\n icon?: IconType;\n /** The position of the icon relative to the content. */\n iconPosition?: \"start\" | \"end\";\n}\n\ninterface SheetPrimaryButtonProps extends SheetButtonProps {\n /** Callback, which is triggered when the button is activated. */\n onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /** The type attribute of the button. */\n type?: ButtonTypeAttribute;\n /** Standard HTML attribute. Read more on <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form\">MDN, Button Element - form</a>. */\n form?: string;\n /** If `true`, the button will be disabled and thus not interactable. */\n disabled?: boolean;\n /** If `true`, a loading spinner will be shown instead of the content. */\n loading?: boolean;\n}\n\ninterface SheetSubcomponents {\n Title: typeof Title;\n Content: typeof Content;\n ButtonSection: typeof ButtonSection;\n PrimaryButton: typeof PrimaryButton;\n SecondaryButton: typeof SecondaryButton;\n}\n\nexport interface Props extends SheetProps {\n /** A reference to the root element of the sheet. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst BottomSheet: FC<Props> & SheetSubcomponents = ({ children, isOpen, onClose, onBack, zIndex = 2, ref }) => {\n // TODO: add aria-modal = true once we implemented the dialog pattern fully and i.e. manage the focus\n const prefersReducedMotion = usePrefersReducedMotion();\n const { root, container, dragHandleContainer, dragHandle, content, contentWrapper, backdrop } = generateClasses();\n const { isShown, scrollRef, scrollPosition } = useCreateBottomSheet({ isOpen });\n\n // When \"middle\" or \"bottom\", dragging is disabled to allow for regular scrolling.\n // When at \"top\", we need to enable drag to close. When `undefined`, the element is not scrollable and can be dragged, too.\n const disableDrag = scrollPosition === \"middle\" || scrollPosition === \"bottom\";\n\n const { innerOpen } = useInnerOpen(isShown);\n\n const titleId = useId();\n\n return (\n <Sheet\n isOpen={innerOpen}\n onClose={onClose}\n className={root()}\n detent=\"content\"\n data-bpds=\"bottom-sheet\"\n prefersReducedMotion={prefersReducedMotion}\n // @ts-expect-error setting custom properties is not recognized by React.CSSProperties\n // This is consumed by the inner ScrollArea to fix drag to close.\n // We remove `pointer-events` handling from the library because it interfers with a lot of things like opened Selects that wouldn't close etc.\n style={{ \"--touch-action\": disableDrag ? \"initial\" : \"pan-down\", pointerEvents: undefined }}\n role=\"dialog\"\n avoidKeyboard={false}\n aria-labelledby={titleId}\n >\n {/* We remove `pointer-events` handling from the library because it interfers with a lot of things like opened Selects that wouldn't close etc. */}\n <Sheet.Container className={container()} ref={ref} style={{ zIndex, pointerEvents: undefined }}>\n <Sheet.Header unstyled className={dragHandleContainer()}>\n <Sheet.DragIndicator unstyled className={dragHandle()} />\n </Sheet.Header>\n <ZIndexContext.Provider value={10000}>\n <BottomSheetContext.Provider value={{ scrollRef, scrollPosition, onClose, onBack, titleId }}>\n <Sheet.Content\n className={content()}\n // disable default scrolling\n disableScroll\n // Dragging is still managed by `Sheet.Content` so we control it here\n disableDrag={disableDrag}\n // Apply keyboard height as padding bottom to keep content above the keyboard\n style={{ paddingBottom: \"max(var(--keyboard-inset-height, 0px), var(--app-safe-area-inset-bottom, 1rem))\" }}\n >\n <div className={contentWrapper()}>{children}</div>\n </Sheet.Content>\n </BottomSheetContext.Provider>\n </ZIndexContext.Provider>\n </Sheet.Container>\n {/* TODO: Deactivate the animation, when the user prefers reduced motion: https://github.com/Temzasse/react-modal-sheet/issues/227 */}\n <Sheet.Backdrop aria-label=\"Bottom Sheet schließen\" onTap={onClose} className={backdrop()} style={{ zIndex: zIndex - 1 }} />\n </Sheet>\n );\n};\n\nexport default BottomSheet;\n\nconst Title = ({ children, subline, level = \"h3\" }: SheetTitleProps) => {\n const { onBack, onClose, titleId } = useConsumeBottomSheet();\n const { header, titleAndIcons } = generateClasses();\n return (\n <div className={header()}>\n <div className={titleAndIcons()}>\n {onBack && <IconButton onClick={onBack} icon=\"arrow-left\" label=\"Zurück\" variant=\"tertiary\" size=\"small\" />}\n <Typography variant=\"bonprix-h6\" component={level} className=\"grow line-clamp-2\" id={titleId}>\n {children}\n </Typography>\n <IconButton onClick={onClose} icon=\"closer\" label=\"Schließen\" variant=\"tertiary\" size=\"small\" />\n </div>\n {subline && <Typography>{subline}</Typography>}\n </div>\n );\n};\n\nconst Content = ({ children, disableHorizontalPadding = false }: SheetContentProps) => {\n const { scrollRef: setScrollRef } = useConsumeBottomSheet();\n const { scrollArea } = generateClasses({ disableHorizontalPadding });\n\n return (\n <div ref={setScrollRef} className={scrollArea()} data-bpds-disable-horizontal-padding={disableHorizontalPadding}>\n {children}\n </div>\n );\n};\n\nconst ButtonSection = ({ children }: SheetButtonSectionProps) => {\n return <div className=\"button-section w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down\">{children}</div>;\n};\n\nconst PrimaryButton = ({ children, onClick, type = \"button\", form, icon, iconPosition, disabled, loading }: SheetPrimaryButtonProps) => {\n const { onClose } = useConsumeBottomSheet();\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (onClick) {\n onClick(event);\n }\n onClose();\n };\n return (\n <Button\n variant=\"primary\"\n onClick={handleClick}\n type={type}\n form={form}\n icon={icon}\n iconPosition={iconPosition}\n size=\"large\"\n disabled={disabled}\n loading={loading}\n >\n {children}\n </Button>\n );\n};\n\nconst SecondaryButton = ({ children, icon, iconPosition }: SheetButtonProps) => {\n const { onClose } = useConsumeBottomSheet();\n return (\n <Button variant=\"secondary\" type=\"button\" onClick={onClose} icon={icon} iconPosition={iconPosition} size=\"large\">\n {children}\n </Button>\n );\n};\n\nBottomSheet.displayName = \"BottomSheet\";\n\nBottomSheet.Title = Title;\nBottomSheet.Content = Content;\nBottomSheet.ButtonSection = ButtonSection;\nBottomSheet.PrimaryButton = PrimaryButton;\nBottomSheet.SecondaryButton = SecondaryButton;\n"],"mappings":"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"}
1
+ {"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { type IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport { ButtonTypeAttribute, TitleLevel, usePrefersReducedMotion } from \"@bonprix-ds/utils\";\nimport React, { FC, ReactNode, Ref, useId } from \"react\";\nimport { Sheet } from \"react-modal-sheet\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Button } from \"@components/Buttons\";\nimport ZIndexContext from \"@contexts/ZIndexContext\";\nimport { useInnerOpen } from \"@hooks\";\nimport { backdrop } from \"@utils/tailwindVariants\";\n\nimport BottomSheetContext from \"./BottomSheetContext\";\nimport useConsumeBottomSheet from \"./useConsumeBottomSheet\";\nimport useCreateBottomSheet from \"./useCreateBottomSheet\";\n\nconst generateClasses = tv({\n slots: {\n root: \"preflight block\",\n container: \"shadow-none rounded-none bg-clr-bg-modal max-h-[calc(100%-64px)]\",\n header: \"px-4 py-3\",\n titleAndIcons: \"flex gap-2 items-center touch-pan-down\",\n contentWrapper: \"flex flex-col w-full\",\n content: [\n \"typography-body1 text-clr-primary\",\n // scroller must be a flexbox to fix scrollbar\n // scroller needs some padding to not cut off the focus-ring\n \"*:flex *:-mx-0.5 *:px-0.5\",\n // scroller must set min-h-0 in order to make scrolling work inside our flex context\n \"*:min-h-0\",\n ],\n dragHandleContainer: \"h-6 flex justify-center items-center shrink-0\",\n dragHandle: \"h-1 w-8 rounded-full bg-clr-on-bg-low\",\n buttonSection: \"w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down\",\n backdrop: backdrop(),\n scrollArea: \"scroll-area\",\n },\n variants: {\n disableHorizontalPadding: {\n false: { scrollArea: \"px-4\" },\n true: \"\",\n },\n },\n});\n\ninterface SheetProps {\n /** All of the subcomponents should be placed inside this property. */\n children: ReactNode;\n /** Toggles the visibility of the sheet. Should be used in conjunction with the `onClose` property. */\n isOpen: boolean;\n /** Callback function, that is triggered when the sheet is attempted to be closed.\n *\n * It will be called in following cases:\n * - Click on backdrop\n * - Swipe down to close\n * - Click on \"close\" icon button in the upper-right corner\n * - Click on any button (PrimaryButton or SecondaryButton)\n *\n * Should be used in conjunction with `isOpen`. */\n onClose: () => void;\n /** Callback to execute when clicking back icon. */\n onBack?: () => void;\n /** The z-index of the sheet.. */\n zIndex?: number;\n}\n\ninterface SheetTitleProps {\n /** The text content. */\n children: string;\n /** An optional subline that is displayed right below the title. */\n subline?: string;\n /** The heading level for the title. */\n level?: TitleLevel;\n}\n\ninterface SheetButtonSectionProps {\n /** Primary and secondary buttons should be placed inside this section. */\n children: ReactNode;\n}\n\ninterface SheetContentProps {\n /** The content of the content section. */\n children: ReactNode;\n /** If `true`, the horizontal padding around the content will be removed. */\n disableHorizontalPadding?: boolean;\n}\n\nexport interface SheetButtonProps {\n /** The label of the button. */\n children: string;\n /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */\n icon?: IconType;\n /** The position of the icon relative to the content. */\n iconPosition?: \"start\" | \"end\";\n}\n\ninterface SheetPrimaryButtonProps extends SheetButtonProps {\n /** Callback, which is triggered when the button is activated. */\n onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /** The type attribute of the button. */\n type?: ButtonTypeAttribute;\n /** Standard HTML attribute. Read more on <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form\">MDN, Button Element - form</a>. */\n form?: string;\n /** If `true`, the button will be disabled and thus not interactable. */\n disabled?: boolean;\n /** If `true`, a loading spinner will be shown instead of the content. */\n loading?: boolean;\n}\n\ninterface SheetSubcomponents {\n Title: typeof Title;\n Content: typeof Content;\n ButtonSection: typeof ButtonSection;\n PrimaryButton: typeof PrimaryButton;\n SecondaryButton: typeof SecondaryButton;\n}\n\nexport interface Props extends SheetProps {\n /** A reference to the root element of the sheet. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst BottomSheet: FC<Props> & SheetSubcomponents = ({ children, isOpen, onClose, onBack, zIndex = 2, ref }) => {\n // TODO: add aria-modal = true once we implemented the dialog pattern fully and i.e. manage the focus\n const prefersReducedMotion = usePrefersReducedMotion();\n const { root, container, dragHandleContainer, dragHandle, content, contentWrapper, backdrop } = generateClasses();\n const { isShown, scrollRef, scrollPosition } = useCreateBottomSheet({ isOpen });\n\n // When \"middle\" or \"bottom\", dragging is disabled to allow for regular scrolling.\n // When at \"top\", we need to enable drag to close. When `undefined`, the element is not scrollable and can be dragged, too.\n const disableDrag = scrollPosition === \"middle\" || scrollPosition === \"bottom\";\n\n const { innerOpen } = useInnerOpen(isShown);\n\n const titleId = useId();\n\n return (\n <Sheet\n isOpen={innerOpen}\n onClose={onClose}\n className={root()}\n detent=\"content\"\n data-bpds=\"bottom-sheet\"\n prefersReducedMotion={prefersReducedMotion}\n // @ts-expect-error setting custom properties is not recognized by React.CSSProperties\n // This is consumed by the inner ScrollArea to fix drag to close.\n style={{ \"--touch-action\": disableDrag ? \"initial\" : \"pan-down\" }}\n role=\"dialog\"\n avoidKeyboard={false}\n aria-labelledby={titleId}\n >\n <Sheet.Container className={container()} ref={ref} style={{ zIndex }}>\n <Sheet.Header unstyled className={dragHandleContainer()}>\n <Sheet.DragIndicator unstyled className={dragHandle()} />\n </Sheet.Header>\n <ZIndexContext.Provider value={10000}>\n <BottomSheetContext.Provider value={{ scrollRef, scrollPosition, onClose, onBack, titleId }}>\n <Sheet.Content\n className={content()}\n // disable default scrolling\n disableScroll\n // Dragging is still managed by `Sheet.Content` so we control it here\n disableDrag={disableDrag}\n // Apply keyboard height as padding bottom to keep content above the keyboard\n style={{ paddingBottom: \"max(var(--keyboard-inset-height, 0px), var(--app-safe-area-inset-bottom, 1rem))\" }}\n >\n <div className={contentWrapper()}>{children}</div>\n </Sheet.Content>\n </BottomSheetContext.Provider>\n </ZIndexContext.Provider>\n </Sheet.Container>\n {/* TODO: Deactivate the animation, when the user prefers reduced motion: https://github.com/Temzasse/react-modal-sheet/issues/227 */}\n <Sheet.Backdrop aria-label=\"Bottom Sheet schließen\" onTap={onClose} className={backdrop()} style={{ zIndex: zIndex - 1 }} />\n </Sheet>\n );\n};\n\nexport default BottomSheet;\n\nconst Title = ({ children, subline, level = \"h3\" }: SheetTitleProps) => {\n const { onBack, onClose, titleId } = useConsumeBottomSheet();\n const { header, titleAndIcons } = generateClasses();\n return (\n <div className={header()}>\n <div className={titleAndIcons()}>\n {onBack && <IconButton onClick={onBack} icon=\"arrow-left\" label=\"Zurück\" variant=\"tertiary\" size=\"small\" />}\n <Typography variant=\"bonprix-h6\" component={level} className=\"grow line-clamp-2\" id={titleId}>\n {children}\n </Typography>\n <IconButton onClick={onClose} icon=\"closer\" label=\"Schließen\" variant=\"tertiary\" size=\"small\" />\n </div>\n {subline && <Typography>{subline}</Typography>}\n </div>\n );\n};\n\nconst Content = ({ children, disableHorizontalPadding = false }: SheetContentProps) => {\n const { scrollRef: setScrollRef } = useConsumeBottomSheet();\n const { scrollArea } = generateClasses({ disableHorizontalPadding });\n\n return (\n <div ref={setScrollRef} className={scrollArea()} data-bpds-disable-horizontal-padding={disableHorizontalPadding}>\n {children}\n </div>\n );\n};\n\nconst ButtonSection = ({ children }: SheetButtonSectionProps) => {\n return <div className=\"button-section w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down\">{children}</div>;\n};\n\nconst PrimaryButton = ({ children, onClick, type = \"button\", form, icon, iconPosition, disabled, loading }: SheetPrimaryButtonProps) => {\n const { onClose } = useConsumeBottomSheet();\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (onClick) {\n onClick(event);\n }\n onClose();\n };\n return (\n <Button\n variant=\"primary\"\n onClick={handleClick}\n type={type}\n form={form}\n icon={icon}\n iconPosition={iconPosition}\n size=\"large\"\n disabled={disabled}\n loading={loading}\n >\n {children}\n </Button>\n );\n};\n\nconst SecondaryButton = ({ children, icon, iconPosition }: SheetButtonProps) => {\n const { onClose } = useConsumeBottomSheet();\n return (\n <Button variant=\"secondary\" type=\"button\" onClick={onClose} icon={icon} iconPosition={iconPosition} size=\"large\">\n {children}\n </Button>\n );\n};\n\nBottomSheet.displayName = \"BottomSheet\";\n\nBottomSheet.Title = Title;\nBottomSheet.Content = Content;\nBottomSheet.ButtonSection = ButtonSection;\nBottomSheet.PrimaryButton = PrimaryButton;\nBottomSheet.SecondaryButton = SecondaryButton;\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,MAAM;EACN,WAAW;EACX,QAAQ;EACR,eAAe;EACf,gBAAgB;EAChB,SAAS;GACP;GAGA;GAEA;EACF;EACA,qBAAqB;EACrB,YAAY;EACZ,eAAe;EACf,UAAU,EAAS;EACnB,YAAY;CACd;CACA,UAAU,EACR,0BAA0B;EACxB,OAAO,EAAE,YAAY,OAAO;EAC5B,MAAM;CACR,EACF;AACF,CAAC,GA+EK,KAA+C,EAAE,aAAU,WAAQ,YAAS,WAAQ,YAAS,GAAG,aAAU;CAE9G,IAAM,IAAuB,EAAwB,GAC/C,EAAE,SAAM,cAAW,wBAAqB,eAAY,YAAS,mBAAgB,gBAAa,EAAgB,GAC1G,EAAE,YAAS,cAAW,sBAAmB,EAAqB,EAAE,UAAO,CAAC,GAIxE,IAAc,MAAmB,YAAY,MAAmB,UAEhE,EAAE,iBAAc,EAAa,CAAO,GAEpC,IAAU,EAAM;CAEtB,OACE,kBAAC,GAAD;EACE,QAAQ;EACC;EACT,WAAW,EAAK;EAChB,QAAO;EACP,aAAU;EACY;EAGtB,OAAO,EAAE,kBAAkB,IAAc,YAAY,WAAW;EAChE,MAAK;EACL,eAAe;EACf,mBAAiB;YAZnB,CAcE,kBAAC,EAAM,WAAP;GAAiB,WAAW,EAAU;GAAQ;GAAK,OAAO,EAAE,UAAO;aAAnE,CACE,kBAAC,EAAM,QAAP;IAAc,UAAA;IAAS,WAAW,EAAoB;cACpD,kBAAC,EAAM,eAAP;KAAqB,UAAA;KAAS,WAAW,EAAW;IAAI,CAAA;GAC5C,CAAA,GACd,kBAAC,EAAc,UAAf;IAAwB,OAAO;cAC7B,kBAAC,EAAmB,UAApB;KAA6B,OAAO;MAAE;MAAW;MAAgB;MAAS;MAAQ;KAAQ;eACxF,kBAAC,EAAM,SAAP;MACE,WAAW,EAAQ;MAEnB,eAAA;MAEa;MAEb,OAAO,EAAE,eAAe,kFAAkF;gBAE1G,kBAAC,OAAD;OAAK,WAAW,EAAe;OAAI;MAAc,CAAA;KACpC,CAAA;IACY,CAAA;GACP,CAAA,CACT;MAEjB,kBAAC,EAAM,UAAP;GAAgB,cAAW;GAAyB,OAAO;GAAS,WAAW,EAAS;GAAG,OAAO,EAAE,QAAQ,IAAS,EAAE;EAAI,CAAA,CACtH;;AAEX;AAsEA,EAAY,cAAc,eAE1B,EAAY,SApEG,EAAE,aAAU,YAAS,WAAQ,WAA4B;CACtE,IAAM,EAAE,WAAQ,YAAS,eAAY,EAAsB,GACrD,EAAE,WAAQ,qBAAkB,EAAgB;CAClD,OACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACE,kBAAC,OAAD;GAAK,WAAW,EAAc;aAA9B;IACG,KAAU,kBAAC,GAAD;KAAY,SAAS;KAAQ,MAAK;KAAa,OAAM;KAAS,SAAQ;KAAW,MAAK;IAAS,CAAA;IAC1G,kBAAC,GAAD;KAAY,SAAQ;KAAa,WAAW;KAAO,WAAU;KAAoB,IAAI;KAClF;IACS,CAAA;IACZ,kBAAC,GAAD;KAAY,SAAS;KAAS,MAAK;KAAS,OAAM;KAAY,SAAQ;KAAW,MAAK;IAAS,CAAA;GAC5F;MACJ,KAAW,kBAAC,GAAD,EAAA,UAAa,EAAoB,CAAA,CAC1C;;AAET,GAsDA,EAAY,WApDK,EAAE,aAAU,8BAA2B,SAA+B;CACrF,IAAM,EAAE,WAAW,MAAiB,EAAsB,GACpD,EAAE,kBAAe,EAAgB,EAAE,4BAAyB,CAAC;CAEnE,OACE,kBAAC,OAAD;EAAK,KAAK;EAAc,WAAW,EAAW;EAAG,wCAAsC;EACpF;CACE,CAAA;AAET,GA4CA,EAAY,iBA1CW,EAAE,kBAChB,kBAAC,OAAD;CAAK,WAAU;CAA+E;AAAc,CAAA,GA0CrH,EAAY,iBAvCW,EAAE,aAAU,YAAS,UAAO,UAAU,SAAM,SAAM,iBAAc,aAAU,iBAAuC;CACtI,IAAM,EAAE,eAAY,EAAsB;CAO1C,OACE,kBAAC,GAAD;EACE,SAAQ;EACR,UATiB,MAA+C;GAIlE,AAHI,KACF,EAAQ,CAAK,GAEf,EAAQ;EACV;EAKU;EACA;EACA;EACQ;EACd,MAAK;EACK;EACD;EAER;CACK,CAAA;AAEZ,GAiBA,EAAY,mBAfa,EAAE,aAAU,SAAM,sBAAqC;CAC9E,IAAM,EAAE,eAAY,EAAsB;CAC1C,OACE,kBAAC,GAAD;EAAQ,SAAQ;EAAY,MAAK;EAAS,SAAS;EAAe;EAAoB;EAAc,MAAK;EACtG;CACK,CAAA;AAEZ"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bonprix-design-system",
3
- "version": "0.67.0",
3
+ "version": "0.67.1",
4
4
  "description": "Design System of bonprix",
5
5
  "type": "module",
6
6
  "publishConfig": {
@@ -51,25 +51,25 @@
51
51
  "react-modal-sheet": "5.6.0",
52
52
  "tailwind-merge": "2.6.1",
53
53
  "tailwind-variants": "0.3.1",
54
- "@bonprix-ds/internal-components": "0.0.2",
55
54
  "@bonprix-ds/assets": "1.0.2",
55
+ "@bonprix-ds/internal-components": "0.0.2",
56
56
  "@bonprix-ds/react-availability": "1.0.0",
57
57
  "@bonprix-ds/react-benefit-tag": "1.1.1",
58
- "@bonprix-ds/react-collapsible": "1.0.1",
58
+ "@bonprix-ds/react-accordion": "1.0.1",
59
59
  "@bonprix-ds/react-container": "1.0.0",
60
+ "@bonprix-ds/react-collapsible": "1.0.1",
60
61
  "@bonprix-ds/react-figurine": "1.0.1",
61
62
  "@bonprix-ds/react-grid": "1.0.0",
62
- "@bonprix-ds/react-icon": "1.0.3",
63
63
  "@bonprix-ds/react-icon-button": "1.0.1",
64
- "@bonprix-ds/react-illustration": "1.0.1",
64
+ "@bonprix-ds/react-icon": "1.0.3",
65
65
  "@bonprix-ds/react-logo": "1.0.1",
66
+ "@bonprix-ds/react-illustration": "1.0.1",
66
67
  "@bonprix-ds/react-price": "1.0.1",
67
- "@bonprix-ds/react-accordion": "1.0.1",
68
+ "@bonprix-ds/react-spinner": "1.0.0",
68
69
  "@bonprix-ds/react-switch": "1.0.0",
69
- "@bonprix-ds/react-tooltip": "1.0.0",
70
70
  "@bonprix-ds/react-typography": "1.0.0",
71
71
  "@bonprix-ds/utils": "0.1.0",
72
- "@bonprix-ds/react-spinner": "1.0.0"
72
+ "@bonprix-ds/react-tooltip": "1.0.0"
73
73
  },
74
74
  "peerDependencies": {
75
75
  "lit": "^3.3.1",