@ledgerhq/react-ui 0.45.0 → 0.46.0-nightly.20260217030329

package/lib/cjs/components/layout/Flex/Flex.stories.js

@@ -1,319 +1,480 @@
+(() => {
 "use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Flex_stories_exports = {};
-__export(Flex_stories_exports, {
-  Default: () => Default,
-  default: () => Flex_stories_default
+var __webpack_modules__ = ({
+3696(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
 });
-module.exports = __toCommonJS(Flex_stories_exports);
-var import_react = __toESM(require("react"));
-var import_index = __toESM(require("./index"));
-var Flex_stories_default = {
-  title: "Layout/Flex",
-  component: import_index.default,
-  argTypes: {
-    children: {
-      type: "text",
-      description: "Any valid React node",
-      required: true,
-      control: false
-    },
-    alignItems: {
-      type: "text",
-      description: "This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).",
-      required: false,
-      options: [
-        "stretch",
-        "flex-start",
-        "flex-end",
-        "center",
-        "baseline",
-        "first baseline",
-        "last baseline",
-        "start",
-        "end",
-        "self-start",
-        "self-end",
-        "safe center",
-        "unsafe center"
-      ],
-      control: {
-        type: "select"
-      },
-      table: {
-        category: "Parent",
-        subcategory: "cross-axis"
-      }
-    },
-    flexDirection: {
-      type: "text",
-      description: "This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Think of flex items as primarily laying out either in horizontal rows or vertical columns.",
-      required: false,
-      options: ["row", "row-reverse", "column", "column-reverse"],
-      control: {
-        type: "select"
-      },
-      table: {
-        category: "Parent",
-        subcategory: "main-axis"
-      }
-    },
-    justifyItems: {
-      type: "text",
-      description: "This defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.",
-      required: false,
-      options: [
-        "flex-start",
-        "flex-end",
-        "center",
-        "space-between",
-        "space-around",
-        "space-evenly",
-        "stretch",
-        "start",
-        "end",
-        "baseline",
-        "first baseline",
-        "last baseline",
-        "safe center",
-        "unsafe center"
-      ],
-      control: {
-        type: "select"
-      },
-      table: {
-        category: "Parent"
-      }
-    },
-    justifyContent: {
-      type: "text",
-      description: "This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.",
-      required: false,
-      options: [
-        "flex-start",
-        "flex-end",
-        "center",
-        "space-between",
-        "space-around",
-        "space-evenly",
-        "stretch",
-        "start",
-        "end",
-        "left",
-        "right",
-        "safe center",
-        "unsafe center"
-      ],
-      control: {
-        type: "select"
-      },
-      table: {
-        category: "Parent",
-        subcategory: "main-axis"
-      }
-    },
-    flexWrap: {
-      type: "text",
-      description: "By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.",
-      required: false,
-      options: ["nowrap", "wrap", "wrap-reverse"],
-      control: {
-        type: "select"
-      },
-      table: {
-        category: "Parent"
-      }
-    },
-    flex: {
-      type: "text",
-      description: "This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, it\u2019s like 1 0.",
-      required: false,
-      control: {
-        type: "text"
-      },
-      table: {
-        category: "Children"
-      }
-    },
-    flexGrow: {
-      type: "text",
-      description: "This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.",
-      required: false,
-      control: {
-        type: "number"
-      },
-      table: {
-        category: "Children"
-      }
-    },
-    flexShrink: {
-      type: "text",
-      description: "This defines the ability for a flex item to shrink if necessary.",
-      required: false,
-      control: {
-        type: "number"
-      },
-      table: {
-        category: "Children"
-      }
-    },
-    flexBasis: {
-      type: "text",
-      description: "This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means \u201Clook at my width or height property\u201D (which was temporarily done by the main-size keyword until deprecated).",
-      required: false,
-      control: {
-        type: "number"
-      },
-      table: {
-        category: "Children"
-      }
-    },
-    justifySelf: {
-      type: "text",
-      description: "This  sets the way a box is justified inside its alignment container along the appropriate axis.",
-      required: false,
-      options: [
-        "flex-start",
-        "flex-end",
-        "center",
-        "space-between",
-        "space-around",
-        "space-evenly",
-        "stretch",
-        "start",
-        "end",
-        "baseline",
-        "first baseline",
-        "last baseline",
-        "safe center",
-        "unsafe center"
-      ],
-      control: {
-        type: "select"
-      },
-      table: {
-        category: "Children"
-      }
-    },
-    alignContent: {
-      type: "text",
-      description: "This aligns a flex container\u2019s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.",
-      required: false,
-      options: [
-        "flex-start",
-        "flex-end",
-        "center",
-        "space-between",
-        "space-around",
-        "space-evenly",
-        "stretch",
-        "start",
-        "end",
-        "baseline",
-        "first baseline",
-        "last baseline",
-        "safe center",
-        "unsafe center"
-      ],
-      control: {
-        type: "select"
-      },
-      table: {
-        category: "Parent",
-        subcategory: "cross-axis"
-      }
-    },
-    alignSelf: {
-      type: "text",
-      description: "This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.",
-      required: false,
-      options: [
-        "flex-start",
-        "flex-end",
-        "center",
-        "space-between",
-        "space-around",
-        "space-evenly",
-        "stretch",
-        "start",
-        "end",
-        "baseline",
-        "first baseline",
-        "last baseline",
-        "safe center",
-        "unsafe center"
-      ],
-      control: {
-        type: "select"
-      },
-      table: {
-        category: "Children"
-      }
-    },
-    order: {
-      type: "text",
-      description: "By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.",
-      required: false,
-      control: {
-        type: "number"
-      },
-      table: {
-        category: "Children"
-      }
+/* import */ var _styled__rspack_import_0 = __webpack_require__(7680);
+
+const FlexBox = _styled__rspack_import_0["default"].div.attrs({
+    display: "flex"
+})``;
+/* export default */ const __rspack_default_export = (FlexBox);
+
+
+},
+7680(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _styles_system_gaps__rspack_import_2 = __webpack_require__(4182);
+/* import */ var styled_components__rspack_import_0 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_0);
+/* import */ var styled_system__rspack_import_1 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_1);
+
+
+
+const baseStyles = (0,styled_system__rspack_import_1.compose)(styled_system__rspack_import_1.flexbox, styled_system__rspack_import_1.space, styled_system__rspack_import_1.position, styled_system__rspack_import_1.color, styled_system__rspack_import_1.layout, styled_system__rspack_import_1.overflow, _styles_system_gaps__rspack_import_2["default"], styled_system__rspack_import_1.border);
+const proxyStyled = new Proxy((styled_components__rspack_import_0_default()), {
+    apply (target, thisArg, argumentsList) {
+        return styled_components__rspack_import_0_default()(target.apply(thisArg, argumentsList)(baseStyles));
     },
+    get (target, property) {
+        if (typeof target[property] === "function") {
+            return styled_components__rspack_import_0_default()(target[property].apply((styled_components__rspack_import_0_default()), [
+                baseStyles
+            ]));
+        }
+        return target[property];
+    }
+});
+/* export default */ const __rspack_default_export = (proxyStyled);
+
+
+},
+4182(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var styled_system__rspack_import_0 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_0);
+
+const gaps = (0,styled_system__rspack_import_0.system)({
     rowGap: {
-      type: "text",
-      description: "The row-gap CSS property sets the size of the gap (gutter) between an element's flex rows.",
-      required: false,
-      control: { type: "text" },
-      table: { category: "Parent" }
+        property: "rowGap",
+        scale: "space"
     },
     columnGap: {
-      type: "text",
-      description: "The column-gap CSS property sets the size of the gap (gutter) between an element's flex columns.",
-      required: false,
-      control: { type: "text" },
-      table: { category: "Parent" }
+        property: "columnGap",
+        scale: "space"
     }
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `The Flex component is a flexbox helper component that lets you write these common css properties more succinctly and inline.
+});
+/* export default */ const __rspack_default_export = (gaps);
+
+
+},
+2770(module) {
+module.exports = require("styled-components");
+
+},
+9351(module) {
+module.exports = require("styled-system");
+
+},
+
+});
+// The module cache
+var __webpack_module_cache__ = {};
+
+// The require function
+function __webpack_require__(moduleId) {
+
+// Check if module is in cache
+var cachedModule = __webpack_module_cache__[moduleId];
+if (cachedModule !== undefined) {
+return cachedModule.exports;
+}
+// Create a new module (and put it into the cache)
+var module = (__webpack_module_cache__[moduleId] = {
+exports: {}
+});
+// Execute the module function
+__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+
+// Return the exports of the module
+return module.exports;
+
+}
+
+// webpack/runtime/compat_get_default_export
+(() => {
+// getDefaultExport function for compatibility with non-ESM modules
+__webpack_require__.n = (module) => {
+	var getter = module && module.__esModule ?
+		() => (module['default']) :
+		() => (module);
+	__webpack_require__.d(getter, { a: getter });
+	return getter;
+};
+
+})();
+// webpack/runtime/define_property_getters
+(() => {
+__webpack_require__.d = (exports, definition) => {
+	for(var key in definition) {
+        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+        }
+    }
+};
+})();
+// webpack/runtime/has_own_property
+(() => {
+__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+})();
+// webpack/runtime/make_namespace_object
+(() => {
+// define __esModule on exports
+__webpack_require__.r = (exports) => {
+	if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+		Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+	}
+	Object.defineProperty(exports, '__esModule', { value: true });
+};
+})();
+var __webpack_exports__ = {};
+// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
+(() => {
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ Flex_stories),
+  Default: () => (/* binding */ Default)
+});
+
+;// CONCATENATED MODULE: external "react"
+const external_react_namespaceObject = require("react");
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
+// EXTERNAL MODULE: ./src/components/layout/Flex/index.ts
+var Flex = __webpack_require__(3696);
+;// CONCATENATED MODULE: ./src/components/layout/Flex/Flex.stories.tsx
+
+
+/* export default */ const Flex_stories = ({
+    title: "Layout/Flex",
+    component: Flex["default"],
+    argTypes: {
+        children: {
+            type: "text",
+            description: "Any valid React node",
+            required: true,
+            control: false
+        },
+        alignItems: {
+            type: "text",
+            description: "This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).",
+            required: false,
+            options: [
+                "stretch",
+                "flex-start",
+                "flex-end",
+                "center",
+                "baseline",
+                "first baseline",
+                "last baseline",
+                "start",
+                "end",
+                "self-start",
+                "self-end",
+                "safe center",
+                "unsafe center"
+            ],
+            control: {
+                type: "select"
+            },
+            table: {
+                category: "Parent",
+                subcategory: "cross-axis"
+            }
+        },
+        flexDirection: {
+            type: "text",
+            description: "This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Think of flex items as primarily laying out either in horizontal rows or vertical columns.",
+            required: false,
+            options: [
+                "row",
+                "row-reverse",
+                "column",
+                "column-reverse"
+            ],
+            control: {
+                type: "select"
+            },
+            table: {
+                category: "Parent",
+                subcategory: "main-axis"
+            }
+        },
+        justifyItems: {
+            type: "text",
+            description: "This defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.",
+            required: false,
+            options: [
+                "flex-start",
+                "flex-end",
+                "center",
+                "space-between",
+                "space-around",
+                "space-evenly",
+                "stretch",
+                "start",
+                "end",
+                "baseline",
+                "first baseline",
+                "last baseline",
+                "safe center",
+                "unsafe center"
+            ],
+            control: {
+                type: "select"
+            },
+            table: {
+                category: "Parent"
+            }
+        },
+        justifyContent: {
+            type: "text",
+            description: "This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.",
+            required: false,
+            options: [
+                "flex-start",
+                "flex-end",
+                "center",
+                "space-between",
+                "space-around",
+                "space-evenly",
+                "stretch",
+                "start",
+                "end",
+                "left",
+                "right",
+                "safe center",
+                "unsafe center"
+            ],
+            control: {
+                type: "select"
+            },
+            table: {
+                category: "Parent",
+                subcategory: "main-axis"
+            }
+        },
+        flexWrap: {
+            type: "text",
+            description: "By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.",
+            required: false,
+            options: [
+                "nowrap",
+                "wrap",
+                "wrap-reverse"
+            ],
+            control: {
+                type: "select"
+            },
+            table: {
+                category: "Parent"
+            }
+        },
+        flex: {
+            type: "text",
+            description: "This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, it’s like 1 0.",
+            required: false,
+            control: {
+                type: "text"
+            },
+            table: {
+                category: "Children"
+            }
+        },
+        flexGrow: {
+            type: "text",
+            description: "This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.",
+            required: false,
+            control: {
+                type: "number"
+            },
+            table: {
+                category: "Children"
+            }
+        },
+        flexShrink: {
+            type: "text",
+            description: "This defines the ability for a flex item to shrink if necessary.",
+            required: false,
+            control: {
+                type: "number"
+            },
+            table: {
+                category: "Children"
+            }
+        },
+        flexBasis: {
+            type: "text",
+            description: "This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means “look at my width or height property” (which was temporarily done by the main-size keyword until deprecated).",
+            required: false,
+            control: {
+                type: "number"
+            },
+            table: {
+                category: "Children"
+            }
+        },
+        justifySelf: {
+            type: "text",
+            description: "This  sets the way a box is justified inside its alignment container along the appropriate axis.",
+            required: false,
+            options: [
+                "flex-start",
+                "flex-end",
+                "center",
+                "space-between",
+                "space-around",
+                "space-evenly",
+                "stretch",
+                "start",
+                "end",
+                "baseline",
+                "first baseline",
+                "last baseline",
+                "safe center",
+                "unsafe center"
+            ],
+            control: {
+                type: "select"
+            },
+            table: {
+                category: "Children"
+            }
+        },
+        alignContent: {
+            type: "text",
+            description: "This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.",
+            required: false,
+            options: [
+                "flex-start",
+                "flex-end",
+                "center",
+                "space-between",
+                "space-around",
+                "space-evenly",
+                "stretch",
+                "start",
+                "end",
+                "baseline",
+                "first baseline",
+                "last baseline",
+                "safe center",
+                "unsafe center"
+            ],
+            control: {
+                type: "select"
+            },
+            table: {
+                category: "Parent",
+                subcategory: "cross-axis"
+            }
+        },
+        alignSelf: {
+            type: "text",
+            description: "This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.",
+            required: false,
+            options: [
+                "flex-start",
+                "flex-end",
+                "center",
+                "space-between",
+                "space-around",
+                "space-evenly",
+                "stretch",
+                "start",
+                "end",
+                "baseline",
+                "first baseline",
+                "last baseline",
+                "safe center",
+                "unsafe center"
+            ],
+            control: {
+                type: "select"
+            },
+            table: {
+                category: "Children"
+            }
+        },
+        order: {
+            type: "text",
+            description: "By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.",
+            required: false,
+            control: {
+                type: "number"
+            },
+            table: {
+                category: "Children"
+            }
+        },
+        rowGap: {
+            type: "text",
+            description: "The row-gap CSS property sets the size of the gap (gutter) between an element's flex rows.",
+            required: false,
+            control: {
+                type: "text"
+            },
+            table: {
+                category: "Parent"
+            }
+        },
+        columnGap: {
+            type: "text",
+            description: "The column-gap CSS property sets the size of the gap (gutter) between an element's flex columns.",
+            required: false,
+            control: {
+                type: "text"
+            },
+            table: {
+                category: "Parent"
+            }
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: `The Flex component is a flexbox helper component that lets you write these common css properties more succinctly and inline.
       
 Like the Box component, it includes all the style props exported by the color, layout, position, and shadow utilities from the [styled-system](https://styled-system.com) library, but also fully includes the flexbox ones.
       
 [See more about styled-system utilities](https://styled-system.com/api)`
-      }
+            }
+        }
     }
-  }
-};
-const Template = (args) => /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args }, /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, width: "25vw", height: "25vw", color: "white", backgroundColor: "darkslategray" }, "Control me with flex children props"), /* @__PURE__ */ import_react.default.createElement(import_index.default, { width: "25vw", height: "25vw", backgroundColor: "lightslategray" }), /* @__PURE__ */ import_react.default.createElement(import_index.default, { width: "25vw", height: "25vw", backgroundColor: "darkgray" }));
+});
+/*
+ ** Template component creates a sandbox to play with Flexbox properties.
+ ** Children Flexbox props are passed to the first Square child, that allow
+ ** you to play with the flexbox properties for children.
+ */ const Template = (args)=>/*#__PURE__*/ external_react_default().createElement(Flex["default"], args, /*#__PURE__*/ external_react_default().createElement(Flex["default"], {
+        ...args,
+        width: "25vw",
+        height: "25vw",
+        color: "white",
+        backgroundColor: "darkslategray"
+    }, "Control me with flex children props"), /*#__PURE__*/ external_react_default().createElement(Flex["default"], {
+        width: "25vw",
+        height: "25vw",
+        backgroundColor: "lightslategray"
+    }), /*#__PURE__*/ external_react_default().createElement(Flex["default"], {
+        width: "25vw",
+        height: "25vw",
+        backgroundColor: "darkgray"
+    }));
 const Default = Template.bind({});
-//# sourceMappingURL=Flex.stories.js.map
+
+})();
+
+module.exports = __webpack_exports__;
+})()
+;
+//# sourceMappingURL=Flex.stories.js.map