@moneyforward/mfui-components 2.48.1

package/dist/esm/styled-system/patterns/center.js

@@ -0,0 +1,19 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+const centerConfig = {
+    transform(props) {
+        const { inline, ...rest } = props;
+        return {
+            display: inline ? "inline-flex" : "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            ...rest
+        };
+    }
+};
+export const getCenterStyle = (styles = {}) => {
+    const _styles = getPatternStyles(centerConfig, styles);
+    return centerConfig.transform(_styles, patternFns);
+};
+export const center = (styles) => css(getCenterStyle(styles));
+center.raw = getCenterStyle;

package/dist/esm/styled-system/patterns/circle.d.ts

@@ -0,0 +1,20 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface CircleProperties {
+   size?: SystemProperties["width"]
+}
+
+interface CircleStyles extends CircleProperties, DistributiveOmit<SystemStyleObject, keyof CircleProperties > {}
+
+interface CirclePatternFn {
+  (styles?: CircleStyles): string
+  raw: (styles?: CircleStyles) => SystemStyleObject
+}
+
+
+export declare const circle: CirclePatternFn;

package/dist/esm/styled-system/patterns/circle.js

@@ -0,0 +1,23 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+const circleConfig = {
+    transform(props) {
+        const { size, ...rest } = props;
+        return {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: "0 0 auto",
+            width: size,
+            height: size,
+            borderRadius: "9999px",
+            ...rest
+        };
+    }
+};
+export const getCircleStyle = (styles = {}) => {
+    const _styles = getPatternStyles(circleConfig, styles);
+    return circleConfig.transform(_styles, patternFns);
+};
+export const circle = (styles) => css(getCircleStyle(styles));
+circle.raw = getCircleStyle;

package/dist/esm/styled-system/patterns/container.d.ts

@@ -0,0 +1,20 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface ContainerProperties {
+   
+}
+
+interface ContainerStyles extends ContainerProperties, DistributiveOmit<SystemStyleObject, keyof ContainerProperties > {}
+
+interface ContainerPatternFn {
+  (styles?: ContainerStyles): string
+  raw: (styles?: ContainerStyles) => SystemStyleObject
+}
+
+
+export declare const container: ContainerPatternFn;

package/dist/esm/styled-system/patterns/container.js

@@ -0,0 +1,19 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+const containerConfig = {
+    transform(props) {
+        return {
+            position: "relative",
+            maxWidth: "8xl",
+            mx: "auto",
+            px: { base: "4", md: "6", lg: "8" },
+            ...props
+        };
+    }
+};
+export const getContainerStyle = (styles = {}) => {
+    const _styles = getPatternStyles(containerConfig, styles);
+    return containerConfig.transform(_styles, patternFns);
+};
+export const container = (styles) => css(getContainerStyle(styles));
+container.raw = getContainerStyle;

package/dist/esm/styled-system/patterns/cq.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface CqProperties {
+   name?: ConditionalValue<Tokens["containerNames"] | Properties["containerName"]>
+	type?: SystemProperties["containerType"]
+}
+
+interface CqStyles extends CqProperties, DistributiveOmit<SystemStyleObject, keyof CqProperties > {}
+
+interface CqPatternFn {
+  (styles?: CqStyles): string
+  raw: (styles?: CqStyles) => SystemStyleObject
+}
+
+
+export declare const cq: CqPatternFn;

package/dist/esm/styled-system/patterns/cq.js

@@ -0,0 +1,19 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+const cqConfig = {
+    transform(props) {
+        const { name, type, ...rest } = props;
+        return {
+            containerType: type,
+            containerName: name,
+            ...rest
+        };
+    },
+    defaultValues: { type: 'inline-size' }
+};
+export const getCqStyle = (styles = {}) => {
+    const _styles = getPatternStyles(cqConfig, styles);
+    return cqConfig.transform(_styles, patternFns);
+};
+export const cq = (styles) => css(getCqStyle(styles));
+cq.raw = getCqStyle;

package/dist/esm/styled-system/patterns/divider.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface DividerProperties {
+   orientation?: "horizontal" | "vertical"
+	thickness?: ConditionalValue<Tokens["sizes"] | Properties["borderWidth"]>
+	color?: ConditionalValue<Tokens["colors"] | Properties["borderColor"]>
+}
+
+interface DividerStyles extends DividerProperties, DistributiveOmit<SystemStyleObject, keyof DividerProperties > {}
+
+interface DividerPatternFn {
+  (styles?: DividerStyles): string
+  raw: (styles?: DividerStyles) => SystemStyleObject
+}
+
+
+export declare const divider: DividerPatternFn;

package/dist/esm/styled-system/patterns/divider.js

@@ -0,0 +1,23 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+const dividerConfig = {
+    transform(props, { map }) {
+        const { orientation, thickness, color, ...rest } = props;
+        return {
+            "--thickness": thickness,
+            width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
+            height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
+            borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
+            borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
+            borderColor: color,
+            ...rest
+        };
+    },
+    defaultValues: { orientation: 'horizontal', thickness: '1px' }
+};
+export const getDividerStyle = (styles = {}) => {
+    const _styles = getPatternStyles(dividerConfig, styles);
+    return dividerConfig.transform(_styles, patternFns);
+};
+export const divider = (styles) => css(getDividerStyle(styles));
+divider.raw = getDividerStyle;

package/dist/esm/styled-system/patterns/flex.d.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface FlexProperties {
+   align?: SystemProperties["alignItems"]
+	justify?: SystemProperties["justifyContent"]
+	direction?: SystemProperties["flexDirection"]
+	wrap?: SystemProperties["flexWrap"]
+	basis?: SystemProperties["flexBasis"]
+	grow?: SystemProperties["flexGrow"]
+	shrink?: SystemProperties["flexShrink"]
+}
+
+interface FlexStyles extends FlexProperties, DistributiveOmit<SystemStyleObject, keyof FlexProperties > {}
+
+interface FlexPatternFn {
+  (styles?: FlexStyles): string
+  raw: (styles?: FlexStyles) => SystemStyleObject
+}
+
+
+export declare const flex: FlexPatternFn;

package/dist/esm/styled-system/patterns/flex.js

@@ -0,0 +1,24 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+const flexConfig = {
+    transform(props) {
+        const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
+        return {
+            display: "flex",
+            flexDirection: direction,
+            alignItems: align,
+            justifyContent: justify,
+            flexWrap: wrap2,
+            flexBasis: basis,
+            flexGrow: grow,
+            flexShrink: shrink,
+            ...rest
+        };
+    }
+};
+export const getFlexStyle = (styles = {}) => {
+    const _styles = getPatternStyles(flexConfig, styles);
+    return flexConfig.transform(_styles, patternFns);
+};
+export const flex = (styles) => css(getFlexStyle(styles));
+flex.raw = getFlexStyle;

package/dist/esm/styled-system/patterns/float.d.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface FloatProperties {
+   offsetX?: ConditionalValue<Tokens["spacing"] | Properties["left"]>
+	offsetY?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
+	offset?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
+	placement?: "bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start"
+}
+
+interface FloatStyles extends FloatProperties, DistributiveOmit<SystemStyleObject, keyof FloatProperties > {}
+
+interface FloatPatternFn {
+  (styles?: FloatStyles): string
+  raw: (styles?: FloatStyles) => SystemStyleObject
+}
+
+
+export declare const float: FloatPatternFn;

package/dist/esm/styled-system/patterns/float.js

@@ -0,0 +1,50 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+const floatConfig = {
+    transform(props, { map }) {
+        const { offset, offsetX, offsetY, placement, ...rest } = props;
+        return {
+            display: "inline-flex",
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
+            insetBlockStart: map(placement, (v) => {
+                const [side] = v.split("-");
+                const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
+                return map2[side];
+            }),
+            insetBlockEnd: map(placement, (v) => {
+                const [side] = v.split("-");
+                const map2 = { top: "auto", middle: "50%", bottom: offsetY };
+                return map2[side];
+            }),
+            insetInlineStart: map(placement, (v) => {
+                const [, align] = v.split("-");
+                const map2 = { start: offsetX, center: "50%", end: "auto" };
+                return map2[align];
+            }),
+            insetInlineEnd: map(placement, (v) => {
+                const [, align] = v.split("-");
+                const map2 = { start: "auto", center: "50%", end: offsetX };
+                return map2[align];
+            }),
+            translate: map(placement, (v) => {
+                const [side, align] = v.split("-");
+                const mapX = { start: "-50%", center: "-50%", end: "50%" };
+                const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
+                return `${mapX[align]} ${mapY[side]}`;
+            }),
+            ...rest
+        };
+    },
+    defaultValues(props) {
+        const offset = props.offset || "0";
+        return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
+    }
+};
+export const getFloatStyle = (styles = {}) => {
+    const _styles = getPatternStyles(floatConfig, styles);
+    return floatConfig.transform(_styles, patternFns);
+};
+export const float = (styles) => css(getFloatStyle(styles));
+float.raw = getFloatStyle;

package/dist/esm/styled-system/patterns/grid-item.d.ts

@@ -0,0 +1,25 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface GridItemProperties {
+   colSpan?: ConditionalValue<number>
+	rowSpan?: ConditionalValue<number>
+	colStart?: ConditionalValue<number>
+	rowStart?: ConditionalValue<number>
+	colEnd?: ConditionalValue<number>
+	rowEnd?: ConditionalValue<number>
+}
+
+interface GridItemStyles extends GridItemProperties, DistributiveOmit<SystemStyleObject, keyof GridItemProperties > {}
+
+interface GridItemPatternFn {
+  (styles?: GridItemStyles): string
+  raw: (styles?: GridItemStyles) => SystemStyleObject
+}
+
+
+export declare const gridItem: GridItemPatternFn;

package/dist/esm/styled-system/patterns/grid-item.js

@@ -0,0 +1,23 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+const gridItemConfig = {
+    transform(props, { map }) {
+        const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
+        const spanFn = (v) => v === "auto" ? v : `span ${v}`;
+        return {
+            gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
+            gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
+            gridColumnStart: colStart,
+            gridColumnEnd: colEnd,
+            gridRowStart: rowStart,
+            gridRowEnd: rowEnd,
+            ...rest
+        };
+    }
+};
+export const getGridItemStyle = (styles = {}) => {
+    const _styles = getPatternStyles(gridItemConfig, styles);
+    return gridItemConfig.transform(_styles, patternFns);
+};
+export const gridItem = (styles) => css(getGridItemStyle(styles));
+gridItem.raw = getGridItemStyle;

package/dist/esm/styled-system/patterns/grid.d.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface GridProperties {
+   gap?: SystemProperties["gap"]
+	columnGap?: SystemProperties["gap"]
+	rowGap?: SystemProperties["gap"]
+	columns?: ConditionalValue<number>
+	minChildWidth?: ConditionalValue<Tokens["sizes"] | Properties["width"]>
+}
+
+interface GridStyles extends GridProperties, DistributiveOmit<SystemStyleObject, keyof GridProperties > {}
+
+interface GridPatternFn {
+  (styles?: GridStyles): string
+  raw: (styles?: GridStyles) => SystemStyleObject
+}
+
+
+export declare const grid: GridPatternFn;

package/dist/esm/styled-system/patterns/grid.js

@@ -0,0 +1,25 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+const gridConfig = {
+    transform(props, { map, isCssUnit }) {
+        const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
+        const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
+        return {
+            display: "grid",
+            gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
+            gap,
+            columnGap,
+            rowGap,
+            ...rest
+        };
+    },
+    defaultValues(props) {
+        return { gap: props.columnGap || props.rowGap ? void 0 : "8px" };
+    }
+};
+export const getGridStyle = (styles = {}) => {
+    const _styles = getPatternStyles(gridConfig, styles);
+    return gridConfig.transform(_styles, patternFns);
+};
+export const grid = (styles) => css(getGridStyle(styles));
+grid.raw = getGridStyle;

package/dist/esm/styled-system/patterns/hstack.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface HstackProperties {
+   justify?: SystemProperties["justifyContent"]
+	gap?: SystemProperties["gap"]
+}
+
+interface HstackStyles extends HstackProperties, DistributiveOmit<SystemStyleObject, keyof HstackProperties > {}
+
+interface HstackPatternFn {
+  (styles?: HstackStyles): string
+  raw: (styles?: HstackStyles) => SystemStyleObject
+}
+
+
+export declare const hstack: HstackPatternFn;

package/dist/esm/styled-system/patterns/hstack.js

@@ -0,0 +1,22 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+const hstackConfig = {
+    transform(props) {
+        const { justify, gap, ...rest } = props;
+        return {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: justify,
+            gap,
+            flexDirection: "row",
+            ...rest
+        };
+    },
+    defaultValues: { gap: '8px' }
+};
+export const getHstackStyle = (styles = {}) => {
+    const _styles = getPatternStyles(hstackConfig, styles);
+    return hstackConfig.transform(_styles, patternFns);
+};
+export const hstack = (styles) => css(getHstackStyle(styles));
+hstack.raw = getHstackStyle;

package/dist/esm/styled-system/patterns/index.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+export * from './box';
+export * from './flex';
+export * from './stack';
+export * from './vstack';
+export * from './hstack';
+export * from './spacer';
+export * from './square';
+export * from './circle';
+export * from './center';
+export * from './link-overlay';
+export * from './aspect-ratio';
+export * from './grid';
+export * from './grid-item';
+export * from './wrap';
+export * from './container';
+export * from './divider';
+export * from './float';
+export * from './bleed';
+export * from './visually-hidden';
+export * from './cq';

package/dist/esm/styled-system/patterns/index.js

@@ -0,0 +1,20 @@
+export * from './box.js';
+export * from './flex.js';
+export * from './stack.js';
+export * from './vstack.js';
+export * from './hstack.js';
+export * from './spacer.js';
+export * from './square.js';
+export * from './circle.js';
+export * from './center.js';
+export * from './link-overlay.js';
+export * from './aspect-ratio.js';
+export * from './grid.js';
+export * from './grid-item.js';
+export * from './wrap.js';
+export * from './container.js';
+export * from './divider.js';
+export * from './float.js';
+export * from './bleed.js';
+export * from './visually-hidden.js';
+export * from './cq.js';

package/dist/esm/styled-system/patterns/link-overlay.d.ts

@@ -0,0 +1,20 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface LinkOverlayProperties {
+   
+}
+
+interface LinkOverlayStyles extends LinkOverlayProperties, DistributiveOmit<SystemStyleObject, keyof LinkOverlayProperties > {}
+
+interface LinkOverlayPatternFn {
+  (styles?: LinkOverlayStyles): string
+  raw: (styles?: LinkOverlayStyles) => SystemStyleObject
+}
+
+
+export declare const linkOverlay: LinkOverlayPatternFn;

package/dist/esm/styled-system/patterns/link-overlay.js

@@ -0,0 +1,22 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+const linkOverlayConfig = {
+    transform(props) {
+        return {
+            _before: {
+                content: '""',
+                position: "absolute",
+                inset: "0",
+                zIndex: "0",
+                ...props["_before"]
+            },
+            ...props
+        };
+    }
+};
+export const getLinkOverlayStyle = (styles = {}) => {
+    const _styles = getPatternStyles(linkOverlayConfig, styles);
+    return linkOverlayConfig.transform(_styles, patternFns);
+};
+export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles));
+linkOverlay.raw = getLinkOverlayStyle;

package/dist/esm/styled-system/patterns/spacer.d.ts

@@ -0,0 +1,20 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface SpacerProperties {
+   size?: ConditionalValue<Tokens["spacing"]>
+}
+
+interface SpacerStyles extends SpacerProperties, DistributiveOmit<SystemStyleObject, keyof SpacerProperties > {}
+
+interface SpacerPatternFn {
+  (styles?: SpacerStyles): string
+  raw: (styles?: SpacerStyles) => SystemStyleObject
+}
+
+
+export declare const spacer: SpacerPatternFn;

package/dist/esm/styled-system/patterns/spacer.js

@@ -0,0 +1,19 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+const spacerConfig = {
+    transform(props, { map }) {
+        const { size, ...rest } = props;
+        return {
+            alignSelf: "stretch",
+            justifySelf: "stretch",
+            flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`),
+            ...rest
+        };
+    }
+};
+export const getSpacerStyle = (styles = {}) => {
+    const _styles = getPatternStyles(spacerConfig, styles);
+    return spacerConfig.transform(_styles, patternFns);
+};
+export const spacer = (styles) => css(getSpacerStyle(styles));
+spacer.raw = getSpacerStyle;

package/dist/esm/styled-system/patterns/square.d.ts

@@ -0,0 +1,20 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface SquareProperties {
+   size?: SystemProperties["width"]
+}
+
+interface SquareStyles extends SquareProperties, DistributiveOmit<SystemStyleObject, keyof SquareProperties > {}
+
+interface SquarePatternFn {
+  (styles?: SquareStyles): string
+  raw: (styles?: SquareStyles) => SystemStyleObject
+}
+
+
+export declare const square: SquarePatternFn;

package/dist/esm/styled-system/patterns/square.js

@@ -0,0 +1,22 @@
+import { getPatternStyles, patternFns } from '../helpers.js';
+import { css } from '../css/index.js';
+const squareConfig = {
+    transform(props) {
+        const { size, ...rest } = props;
+        return {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: "0 0 auto",
+            width: size,
+            height: size,
+            ...rest
+        };
+    }
+};
+export const getSquareStyle = (styles = {}) => {
+    const _styles = getPatternStyles(squareConfig, styles);
+    return squareConfig.transform(_styles, patternFns);
+};
+export const square = (styles) => css(getSquareStyle(styles));
+square.raw = getSquareStyle;