@mittwald/flow-react-components 0.2.0-alpha.470 → 0.2.0-alpha.472

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0-alpha.472](https://github.com/mittwald/flow/compare/0.2.0-alpha.471...0.2.0-alpha.472) (2025-09-11)
+
+**Note:** Version bump only for package @mittwald/flow-react-components
+
+# [0.2.0-alpha.471](https://github.com/mittwald/flow/compare/0.2.0-alpha.470...0.2.0-alpha.471) (2025-09-11)
+
+### Bug Fixes
+
+* **List:** clear content props context ([1899558](https://github.com/mittwald/flow/commit/1899558538b7fb8404b116d792f033fb49f843be))
+
 # [0.2.0-alpha.470](https://github.com/mittwald/flow/compare/0.2.0-alpha.469...0.2.0-alpha.470) (2025-09-11)
 
 ### Bug Fixes

package/dist/js/components/src/components/CheckboxButton/CheckboxButton.mjs

@@ -18,6 +18,7 @@ const CheckboxButton = flowComponent("CheckboxButton", (props) => {
       className: styles.label
     },
     Content: {
+      clearPropsContext: true,
       className: styles.content
     }
   };

package/dist/js/components/src/components/CheckboxButton/CheckboxButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.mjs","sources":["../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import React from \"react\";\nimport styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.checkboxButton, className);\n\n  const propsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n  };\n\n  return (\n    <ClearPropsContext>\n      <Checkbox {...rest} className={rootClassName} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Checkbox>\n    </ClearPropsContext>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":[],"mappings":";;;;;;;;;;AAmBO,MAAM,cAAiB,GAAA,aAAA,CAAc,gBAAkB,EAAA,CAAC,KAAU,KAAA;AACvE,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9C,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,cAAA,EAAgB,SAAS,CAAA;AAE3D,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,OAAS,EAAA;AAAA,MACP,WAAW,MAAO,CAAA;AAAA;AACpB,GACF;AAEA,EAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAU,GAAG,IAAM,EAAA,SAAA,EAAW,aAAe,EAAA,GAAA,EAC5C,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC1B,EAAA,QAAA,EACH,GACF,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CheckboxButton.mjs","sources":["../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import React from \"react\";\nimport styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.checkboxButton, className);\n\n  const propsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      clearPropsContext: true,\n      className: styles.content,\n    },\n  };\n\n  return (\n    <ClearPropsContext>\n      <Checkbox {...rest} className={rootClassName} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Checkbox>\n    </ClearPropsContext>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":[],"mappings":";;;;;;;;;;AAmBO,MAAM,cAAiB,GAAA,aAAA,CAAc,gBAAkB,EAAA,CAAC,KAAU,KAAA;AACvE,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9C,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,cAAA,EAAgB,SAAS,CAAA;AAE3D,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,OAAS,EAAA;AAAA,MACP,iBAAmB,EAAA,IAAA;AAAA,MACnB,WAAW,MAAO,CAAA;AAAA;AACpB,GACF;AAEA,EAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAU,GAAG,IAAM,EAAA,SAAA,EAAW,aAAe,EAAA,GAAA,EAC5C,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC1B,EAAA,QAAA,EACH,GACF,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.mjs

@@ -46,6 +46,7 @@ const ListItemViewContent = (props) => {
       className: styles.action
     },
     Content: {
+      clearPropsContext: true,
       className: dynamic((p) => getStyleForContentSlot(p.slot)),
       onMouseDown: dynamic((p) => contentProps[p.slot ?? "top"]?.onMouseDown),
       onPointerDown: dynamic(

package/dist/js/components/src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemViewContent.mjs","sources":["../../../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport React from \"react\";\nimport styles from \"../../ListItemView.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport clsx from \"clsx\";\nimport {\n  ColumnLayout,\n  type ColumnLayoutProps,\n} from \"@/components/ColumnLayout\";\n\nexport type ListItemViewContentProps = PropsWithChildren &\n  Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> & {\n    title?: ReactNode;\n    subTitle?: ReactNode;\n    avatar?: ReactNode;\n    button?: ReactNode;\n    bottom?: ReactNode;\n    checkbox?: ReactNode;\n    viewMode?: ListViewMode;\n  };\n\nconst getStyleForContentSlot = (slot?: string) =>\n  slot === \"top\"\n    ? styles.topContent\n    : slot === \"bottom\"\n      ? styles.bottomContent\n      : styles.topContent;\n\n/** @flr-generate all */\nexport const ListItemViewContent = (props: ListItemViewContentProps) => {\n  const {\n    children,\n    avatar,\n    title,\n    subTitle,\n    button,\n    bottom,\n    checkbox,\n    viewMode,\n    s,\n    m,\n    l,\n  } = props;\n\n  const contentProps: Record<string, ComponentProps<\"div\">> = {\n    bottom: {\n      onMouseDown: (e) => e.stopPropagation(),\n      onPointerDown: (e) => e.stopPropagation(),\n      className: styles.bottomContent,\n    },\n    top: {\n      className: styles.topContent,\n    },\n  };\n\n  const propsContext: PropsContext = {\n    ContextMenu: {\n      placement: \"bottom end\",\n    },\n    Button: {\n      className: styles.action,\n    },\n    ActionGroup: {\n      className: styles.action,\n    },\n    Content: {\n      className: dynamic((p) => getStyleForContentSlot(p.slot)),\n      onMouseDown: dynamic((p) => contentProps[p.slot ?? \"top\"]?.onMouseDown),\n      onPointerDown: dynamic(\n        (p) => contentProps[p.slot ?? \"top\"]?.onPointerDown,\n      ),\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    Heading: {\n      className: styles.heading,\n      level: 5,\n      Badge: { className: styles.badge },\n      AlertBadge: { className: styles.badge },\n    },\n    Text: {\n      className: styles.text,\n    },\n    Link: {\n      unstyled: true,\n    },\n  };\n\n  const className = clsx(\n    styles.view,\n    viewMode === \"tiles\" ? styles.tileView : styles.listView,\n  );\n\n  const header = (\n    <div className={styles.header}>\n      <div className={styles.checkboxContainer}>{checkbox}</div>\n      {avatar}\n      <div className={styles.title}>\n        {title}\n        <div className={styles.subTitle}>{subTitle}</div>\n      </div>\n    </div>\n  );\n\n  return (\n    <PropsContextProvider props={propsContext} mergeInParentContext>\n      <div className={className}>\n        {viewMode === \"list\" && (\n          <>\n            <div className={styles.contentWrapper}>\n              {s || m || l ? (\n                <ColumnLayout\n                  s={s}\n                  m={m}\n                  l={l}\n                  className={clsx(styles.content, styles.columnLayout)}\n                  mergeInParentContext\n                >\n                  {header}\n                  {children}\n                </ColumnLayout>\n              ) : (\n                <div className={styles.content}>\n                  {header}\n                  {children}\n                </div>\n              )}\n              {button}\n            </div>\n            {bottom}\n          </>\n        )}\n\n        {viewMode === \"tiles\" && (\n          <>\n            <div className={styles.avatarContainer}>{avatar}</div>\n            <div className={styles.content}>\n              <div className={styles.header}>\n                <div className={styles.checkboxContainer}>{checkbox}</div>\n                <div className={styles.title}>\n                  {title}\n                  <div className={styles.subTitle}>{subTitle}</div>\n                </div>\n                {button}\n              </div>\n              {children}\n              {bottom}\n            </div>\n          </>\n        )}\n      </div>\n    </PropsContextProvider>\n  );\n};\n\nexport default ListItemViewContent;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ListItemViewContent.mjs","sources":["../../../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport React from \"react\";\nimport styles from \"../../ListItemView.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport clsx from \"clsx\";\nimport {\n  ColumnLayout,\n  type ColumnLayoutProps,\n} from \"@/components/ColumnLayout\";\n\nexport type ListItemViewContentProps = PropsWithChildren &\n  Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> & {\n    title?: ReactNode;\n    subTitle?: ReactNode;\n    avatar?: ReactNode;\n    button?: ReactNode;\n    bottom?: ReactNode;\n    checkbox?: ReactNode;\n    viewMode?: ListViewMode;\n  };\n\nconst getStyleForContentSlot = (slot?: string) =>\n  slot === \"top\"\n    ? styles.topContent\n    : slot === \"bottom\"\n      ? styles.bottomContent\n      : styles.topContent;\n\n/** @flr-generate all */\nexport const ListItemViewContent = (props: ListItemViewContentProps) => {\n  const {\n    children,\n    avatar,\n    title,\n    subTitle,\n    button,\n    bottom,\n    checkbox,\n    viewMode,\n    s,\n    m,\n    l,\n  } = props;\n\n  const contentProps: Record<string, ComponentProps<\"div\">> = {\n    bottom: {\n      onMouseDown: (e) => e.stopPropagation(),\n      onPointerDown: (e) => e.stopPropagation(),\n      className: styles.bottomContent,\n    },\n    top: {\n      className: styles.topContent,\n    },\n  };\n\n  const propsContext: PropsContext = {\n    ContextMenu: {\n      placement: \"bottom end\",\n    },\n    Button: {\n      className: styles.action,\n    },\n    ActionGroup: {\n      className: styles.action,\n    },\n    Content: {\n      clearPropsContext: true,\n      className: dynamic((p) => getStyleForContentSlot(p.slot)),\n      onMouseDown: dynamic((p) => contentProps[p.slot ?? \"top\"]?.onMouseDown),\n      onPointerDown: dynamic(\n        (p) => contentProps[p.slot ?? \"top\"]?.onPointerDown,\n      ),\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    Heading: {\n      className: styles.heading,\n      level: 5,\n      Badge: { className: styles.badge },\n      AlertBadge: { className: styles.badge },\n    },\n    Text: {\n      className: styles.text,\n    },\n    Link: {\n      unstyled: true,\n    },\n  };\n\n  const className = clsx(\n    styles.view,\n    viewMode === \"tiles\" ? styles.tileView : styles.listView,\n  );\n\n  const header = (\n    <div className={styles.header}>\n      <div className={styles.checkboxContainer}>{checkbox}</div>\n      {avatar}\n      <div className={styles.title}>\n        {title}\n        <div className={styles.subTitle}>{subTitle}</div>\n      </div>\n    </div>\n  );\n\n  return (\n    <PropsContextProvider props={propsContext} mergeInParentContext>\n      <div className={className}>\n        {viewMode === \"list\" && (\n          <>\n            <div className={styles.contentWrapper}>\n              {s || m || l ? (\n                <ColumnLayout\n                  s={s}\n                  m={m}\n                  l={l}\n                  className={clsx(styles.content, styles.columnLayout)}\n                  mergeInParentContext\n                >\n                  {header}\n                  {children}\n                </ColumnLayout>\n              ) : (\n                <div className={styles.content}>\n                  {header}\n                  {children}\n                </div>\n              )}\n              {button}\n            </div>\n            {bottom}\n          </>\n        )}\n\n        {viewMode === \"tiles\" && (\n          <>\n            <div className={styles.avatarContainer}>{avatar}</div>\n            <div className={styles.content}>\n              <div className={styles.header}>\n                <div className={styles.checkboxContainer}>{checkbox}</div>\n                <div className={styles.title}>\n                  {title}\n                  <div className={styles.subTitle}>{subTitle}</div>\n                </div>\n                {button}\n              </div>\n              {children}\n              {bottom}\n            </div>\n          </>\n        )}\n      </div>\n    </PropsContextProvider>\n  );\n};\n\nexport default ListItemViewContent;\n"],"names":[],"mappings":"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"}

package/dist/js/components/src/components/RadioGroup/components/RadioButton/RadioButton.mjs

@@ -19,6 +19,7 @@ const RadioButton = flowComponent("RadioButton", (props) => {
       className: styles.label
     },
     Content: {
+      clearPropsContext: true,
       className: styles.content
     }
   };

package/dist/js/components/src/components/RadioGroup/components/RadioButton/RadioButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.mjs","sources":["../../../../../../../../src/components/RadioGroup/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React from \"react\";\nimport styles from \"./RadioButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { RadioProps } from \"@/components/RadioGroup\";\nimport { Radio } from \"@/components/RadioGroup\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport type RadioButtonProps = RadioProps;\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const RadioButton = flowComponent(\"RadioButton\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.radioButton, className);\n\n  const propsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n  };\n\n  return (\n    <ClearPropsContext>\n      <Radio {...rest} className={rootClassName} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Radio>\n    </ClearPropsContext>\n  );\n});\n\nexport default RadioButton;\n"],"names":[],"mappings":";;;;;;;;;;;AAgBO,MAAM,WAAc,GAAA,aAAA,CAAc,aAAe,EAAA,CAAC,KAAU,KAAA;AACjE,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9C,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,WAAA,EAAa,SAAS,CAAA;AAExD,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,OAAS,EAAA;AAAA,MACP,WAAW,MAAO,CAAA;AAAA;AACpB,GACF;AAEA,EAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAO,GAAG,IAAM,EAAA,SAAA,EAAW,aAAe,EAAA,GAAA,EACzC,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC1B,EAAA,QAAA,EACH,GACF,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"RadioButton.mjs","sources":["../../../../../../../../src/components/RadioGroup/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React from \"react\";\nimport styles from \"./RadioButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { RadioProps } from \"@/components/RadioGroup\";\nimport { Radio } from \"@/components/RadioGroup\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport type RadioButtonProps = RadioProps;\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const RadioButton = flowComponent(\"RadioButton\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.radioButton, className);\n\n  const propsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      clearPropsContext: true,\n      className: styles.content,\n    },\n  };\n\n  return (\n    <ClearPropsContext>\n      <Radio {...rest} className={rootClassName} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Radio>\n    </ClearPropsContext>\n  );\n});\n\nexport default RadioButton;\n"],"names":[],"mappings":";;;;;;;;;;;AAgBO,MAAM,WAAc,GAAA,aAAA,CAAc,aAAe,EAAA,CAAC,KAAU,KAAA;AACjE,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9C,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,WAAA,EAAa,SAAS,CAAA;AAExD,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,OAAS,EAAA;AAAA,MACP,iBAAmB,EAAA,IAAA;AAAA,MACnB,WAAW,MAAO,CAAA;AAAA;AACpB,GACF;AAEA,EAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAO,GAAG,IAAM,EAAA,SAAA,EAAW,aAAe,EAAA,GAAA,EACzC,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC1B,EAAA,QAAA,EACH,GACF,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/types/components/CheckboxButton/CheckboxButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.d.ts","sourceRoot":"","sources":["../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,MAAM,WAAW,mBACf,SAAQ,aAAa,EACnB,kBAAkB,CAAC,gBAAgB,CAAC;CAAG;AAE3C;;;GAGG;AACH,eAAO,MAAM,cAAc,sFAuBzB,CAAC;AAEH,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CheckboxButton.d.ts","sourceRoot":"","sources":["../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,MAAM,WAAW,mBACf,SAAQ,aAAa,EACnB,kBAAkB,CAAC,gBAAgB,CAAC;CAAG;AAE3C;;;GAGG;AACH,eAAO,MAAM,cAAc,sFAwBzB,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/dist/types/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemViewContent.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkB,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,GACtD,IAAI,CAAC,iBAAiB,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB,CAAC;AASJ,wBAAwB;AACxB,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,4CA6HlE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ListItemViewContent.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkB,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,GACtD,IAAI,CAAC,iBAAiB,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB,CAAC;AASJ,wBAAwB;AACxB,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,4CA8HlE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/types/components/RadioGroup/components/RadioButton/RadioButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/RadioGroup/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAI1D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,WAAW,6EAuBtB,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/RadioGroup/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAI1D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,WAAW,6EAwBtB,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.2.0-alpha.470",
+  "version": "0.2.0-alpha.472",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -57,7 +57,7 @@
   "dependencies": {
     "@internationalized/string-compiler": "^3.2.6",
     "@mittwald/password-tools-js": "3.0.0-alpha.18",
-    "@mittwald/react-tunnel": "0.2.0-alpha.470",
+    "@mittwald/react-tunnel": "0.2.0-alpha.472",
     "@mittwald/react-use-promise": "^3.0.4",
     "@react-aria/form": "^3.1.0",
     "@react-aria/live-announcer": "^3.4.4",
@@ -100,7 +100,7 @@
     "@faker-js/faker": "^9.9.0",
     "@internationalized/date": "^3.8.2",
     "@mittwald/flow-core": "",
-    "@mittwald/flow-design-tokens": "0.2.0-alpha.470",
+    "@mittwald/flow-design-tokens": "0.2.0-alpha.472",
     "@mittwald/react-use-promise": "^3.0.4",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.3",
     "@mittwald/typescript-config": "",
@@ -173,5 +173,5 @@
       "optional": true
     }
   },
-  "gitHead": "adf35a3b72d6d02cc6dc765d4dc20c3f7eea7695"
+  "gitHead": "b0649bbffe4bb3e314b70a7b57e316d2c1c25716"
 }