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

package/lib/cjs/components/message/Notification/Badge.stories.js

@@ -1,72 +1,303 @@
+(() => {
 "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 __webpack_modules__ = ({
+1215(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _ledgerhq_icons_ui_reactLegacy__rspack_import_0 = __webpack_require__(9979);
+/* import */ var _ledgerhq_icons_ui_reactLegacy__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(_ledgerhq_icons_ui_reactLegacy__rspack_import_0);
+/* import */ var react__rspack_import_1 = __webpack_require__(2015);
+/* import */ var react__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_1);
+
+
+const iconNames = Array.from(Object.keys(_ledgerhq_icons_ui_reactLegacy__rspack_import_0).reduce((set, rawKey)=>{
+    const key = rawKey.replace(/(.+)(Medium)+$/g, "$1");
+    if (!set.has(key)) set.add(key);
+    return set;
+}, new Set()));
+const Icon = ({ name, size = 16, color = "currentColor", weight = "Medium" })=>{
+    const maybeIconName = `${name}${weight}`;
+    if (maybeIconName in _ledgerhq_icons_ui_reactLegacy__rspack_import_0) {
+        // @ts-expect-error FIXME I don't know how to make you happy ts
+        const Component = _ledgerhq_icons_ui_reactLegacy__rspack_import_0[maybeIconName];
+        return /*#__PURE__*/ react__rspack_import_1_default().createElement(Component, {
+            size: size,
+            color: color
+        });
+    }
+    return null;
 };
-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 Badge_stories_exports = {};
-__export(Badge_stories_exports, {
-  Badge: () => Badge,
-  default: () => Badge_stories_default
+/* export default */ const __rspack_default_export = (Icon);
+
+
+},
+3696(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* 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);
+
+
+},
+3424(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (Badge)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var styled_system__rspack_import_2 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_2_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_2);
+
+
+
+const ActiveCircle = (styled_components__rspack_import_1_default().div)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 10px;
+  width: 10px;
+  border-radius: 9999px;
+  box-sizing: content-box;
+  background-color: ${(p)=>p.theme.colors.error.c50};
+
+  border: 2px solid
+    var(
+      --notification-badge-border,
+      ${(p)=>{
+    /* The CSS variable is dynamically set by the Notification component */ return p.theme.colors.background.main;
+}}
+    );
+`;
+const Wrapper = (styled_components__rspack_import_1_default().div)`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  ${styled_system__rspack_import_2.color}
+  ${styled_system__rspack_import_2.position}
+  ${styled_system__rspack_import_2.shadow}
+  ${styled_system__rspack_import_2.border}
+  ${styled_system__rspack_import_2.background}
+  ${styled_system__rspack_import_2.layout}
+`;
+function Badge({ active, icon, ...props }) {
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(Wrapper, props, icon, active && /*#__PURE__*/ react__rspack_import_0_default().createElement(ActiveCircle, null));
+}
+
+
+},
+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)
 });
-module.exports = __toCommonJS(Badge_stories_exports);
-var import_react = __toESM(require("react"));
-var import_Badge = __toESM(require("./Badge"));
-var import_Icon = __toESM(require("../../asorted/Icon"));
-var import_Flex = __toESM(require("../../layout/Flex"));
-var Badge_stories_default = {
-  title: "Messages/Notifications/Badge",
-  component: import_Badge.default,
-  argTypes: {
-    active: {
-      type: "boolean",
-      defaultValue: false
+/* 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: {
+        property: "rowGap",
+        scale: "space"
     },
-    icon: { control: false },
-    theme: { table: { disable: true } },
-    as: { table: { disable: true } },
-    forwardedAs: { table: { disable: true } }
-  }
+    columnGap: {
+        property: "columnGap",
+        scale: "space"
+    }
+});
+/* export default */ const __rspack_default_export = (gaps);
+
+
+},
+9979(module) {
+module.exports = require("@ledgerhq/icons-ui/reactLegacy");
+
+},
+2015(module) {
+module.exports = require("react");
+
+},
+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;
 };
-const Badge = (args) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { style: { columnGap: "2em" } }, /* @__PURE__ */ import_react.default.createElement(
-    import_Badge.default,
-    {
-      ...args,
-      color: "warning.c50",
-      backgroundColor: "warning.c10",
-      icon: /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name: "Warning", size: 24 })
+
+})();
+// 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] });
+        }
     }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_Badge.default,
-    {
-      ...args,
-      color: "primary.c100",
-      backgroundColor: "primary.c10",
-      icon: /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name: "Info", size: 24, weight: "Medium" })
+};
+})();
+// 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.
+(() => {
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+  Badge: () => (Badge),
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var _Badge__rspack_import_1 = __webpack_require__(3424);
+/* import */ var _asorted_Icon__rspack_import_3 = __webpack_require__(1215);
+/* import */ var _layout_Flex__rspack_import_2 = __webpack_require__(3696);
+
+
+
+
+/* export default */ const __rspack_default_export = ({
+    title: "Messages/Notifications/Badge",
+    component: _Badge__rspack_import_1["default"],
+    argTypes: {
+        active: {
+            type: "boolean",
+            defaultValue: false
+        },
+        icon: {
+            control: false
+        },
+        theme: {
+            table: {
+                disable: true
+            }
+        },
+        as: {
+            table: {
+                disable: true
+            }
+        },
+        forwardedAs: {
+            table: {
+                disable: true
+            }
+        }
     }
-  ));
+});
+const Badge = (args)=>{
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_2["default"], {
+        style: {
+            columnGap: "2em"
+        }
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(_Badge__rspack_import_1["default"], {
+        ...args,
+        color: "warning.c50",
+        backgroundColor: "warning.c10",
+        icon: /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Icon__rspack_import_3["default"], {
+            name: "Warning",
+            size: 24
+        })
+    }), /*#__PURE__*/ react__rspack_import_0_default().createElement(_Badge__rspack_import_1["default"], {
+        ...args,
+        color: "primary.c100",
+        backgroundColor: "primary.c10",
+        icon: /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Icon__rspack_import_3["default"], {
+            name: "Info",
+            size: 24,
+            weight: "Medium"
+        })
+    }));
 };
-//# sourceMappingURL=Badge.stories.js.map
+
+})();
+
+module.exports = __webpack_exports__;
+})()
+;
+//# sourceMappingURL=Badge.stories.js.map

package/lib/cjs/components/message/Notification/Badge.stories.js.map

@@ -1,7 +1 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/components/message/Notification/Badge.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport BadgeComponent, { Props } from \"./Badge\";\nimport Icon from \"../../asorted/Icon\";\nimport FlexBox from \"../../layout/Flex\";\n\nexport default {\n  title: \"Messages/Notifications/Badge\",\n  component: BadgeComponent,\n  argTypes: {\n    active: {\n      type: \"boolean\",\n      defaultValue: false,\n    },\n    icon: { control: false },\n    theme: { table: { disable: true } },\n    as: { table: { disable: true } },\n    forwardedAs: { table: { disable: true } },\n  },\n};\n\nexport const Badge = (args: Props): JSX.Element => {\n  return (\n    <FlexBox style={{ columnGap: \"2em\" }}>\n      <BadgeComponent\n        {...args}\n        color=\"warning.c50\"\n        backgroundColor=\"warning.c10\"\n        icon={<Icon name=\"Warning\" size={24} />}\n      />\n      <BadgeComponent\n        {...args}\n        color=\"primary.c100\"\n        backgroundColor=\"primary.c10\"\n        icon={<Icon name=\"Info\" size={24} weight=\"Medium\" />}\n      />\n    </FlexBox>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAsC;AACtC,kBAAiB;AACjB,kBAAoB;AAEpB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAAA,IACA,MAAM,EAAE,SAAS,MAAM;AAAA,IACvB,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,IAAI,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAC/B,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,EAC1C;AACF;AAEO,MAAM,QAAQ,CAAC,SAA6B;AACjD,SACE,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAQ,OAAO,EAAE,WAAW,MAAM,KACjC,6BAAAD,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,MAAM,6BAAAC,QAAA,cAAC,YAAAE,SAAA,EAAK,MAAK,WAAU,MAAM,IAAI;AAAA;AAAA,EACvC,GACA,6BAAAF,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,MAAM,6BAAAC,QAAA,cAAC,YAAAE,SAAA,EAAK,MAAK,QAAO,MAAM,IAAI,QAAO,UAAS;AAAA;AAAA,EACpD,CACF;AAEJ;",
-  "names": ["BadgeComponent", "React", "FlexBox", "Icon"]
-}
+{"version":3,"file":"components/message/Notification/Badge.stories.js","sources":["webpack://@ledgerhq/react-ui/./src/components/asorted/Icon/Icon.tsx","webpack://@ledgerhq/react-ui/./src/components/layout/Flex/index.ts","webpack://@ledgerhq/react-ui/./src/components/message/Notification/Badge.tsx","webpack://@ledgerhq/react-ui/./src/components/styled.ts","webpack://@ledgerhq/react-ui/./src/styles/system/gaps.ts","webpack://@ledgerhq/react-ui/webpack/runtime/compat_get_default_export","webpack://@ledgerhq/react-ui/webpack/runtime/define_property_getters","webpack://@ledgerhq/react-ui/webpack/runtime/has_own_property","webpack://@ledgerhq/react-ui/webpack/runtime/make_namespace_object","webpack://@ledgerhq/react-ui/./src/components/message/Notification/Badge.stories.tsx"],"sourcesContent":["import * as icons from \"@ledgerhq/icons-ui/reactLegacy\";\nimport React from \"react\";\n\nexport type Props = {\n  name: string;\n  size?: number;\n  weight?: \"Medium\";\n  color?: string;\n};\n\nexport const iconNames = Array.from(\n  Object.keys(icons).reduce((set, rawKey) => {\n    const key = rawKey.replace(/(.+)(Medium)+$/g, \"$1\");\n    if (!set.has(key)) set.add(key);\n    return set;\n  }, new Set<string>()),\n);\n\nconst Icon = ({\n  name,\n  size = 16,\n  color = \"currentColor\",\n  weight = \"Medium\",\n}: Props): JSX.Element | null => {\n  const maybeIconName = `${name}${weight}`;\n  if (maybeIconName in icons) {\n    // @ts-expect-error FIXME I don't know how to make you happy ts\n    const Component = icons[maybeIconName];\n    return <Component size={size} color={color} />;\n  }\n  return null;\n};\n\nexport default Icon;\n","import baseStyled, { BaseStyledProps } from \"../../styled\";\n\nconst FlexBox = baseStyled.div.attrs<BaseStyledProps, BaseStyledProps>({ display: \"flex\" })``;\nexport type FlexBoxProps = BaseStyledProps & React.HTMLAttributes<HTMLDivElement>;\n\nexport default FlexBox;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { color, position, shadow, border, background, layout } from \"styled-system\";\n\nconst ActiveCircle = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 10px;\n  width: 10px;\n  border-radius: 9999px;\n  box-sizing: content-box;\n  background-color: ${p => p.theme.colors.error.c50};\n\n  border: 2px solid\n    var(\n      --notification-badge-border,\n      ${p => {\n        /* The CSS variable is dynamically set by the Notification component */\n        return p.theme.colors.background.main;\n      }}\n    );\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 9999px;\n  ${color}\n  ${position}\n  ${shadow}\n  ${border}\n  ${background}\n  ${layout}\n`;\n\nexport type Props = {\n  /* If true a notification bubble will be displayed in the top right corner of the badge. */\n  active?: boolean;\n  /* JSX filling up the space inside the badge, usually an <Icon />. */\n  icon: JSX.Element;\n} & React.ComponentProps<typeof Wrapper>;\nexport default function Badge({ active, icon, ...props }: Props): JSX.Element {\n  return (\n    <Wrapper {...props}>\n      {icon}\n      {active && <ActiveCircle />}\n    </Wrapper>\n  );\n}\n","import gaps from \"../styles/system/gaps\";\nimport styled, { StyledInterface, InterpolationFunction } from \"styled-components\";\nimport {\n  compose,\n  flexbox,\n  FlexboxProps,\n  space,\n  SpaceProps,\n  position,\n  PositionProps,\n  color,\n  ColorProps,\n  layout,\n  LayoutProps,\n  overflow,\n  OverflowProps,\n  border,\n  BorderProps,\n} from \"styled-system\";\n\nexport type BaseStyledProps = SpaceProps &\n  FlexboxProps &\n  PositionProps &\n  ColorProps &\n  LayoutProps &\n  BorderProps &\n  OverflowProps & {\n    /**\n     * The columnGap CSS property sets the size of the gap (gutter) between an element's grid columns.\n     */\n    columnGap?: string | number;\n    /**\n     * The rowGap CSS property sets the size of the gap (gutter) between an element's grid rows.\n     */\n    rowGap?: string | number;\n    color?: string;\n  };\n\nexport const baseStyles: InterpolationFunction<unknown> = compose(\n  flexbox,\n  space,\n  position,\n  color,\n  layout,\n  overflow,\n  gaps,\n  border,\n);\n\nconst proxyStyled = new Proxy(styled, {\n  apply(target: typeof styled, thisArg, argumentsList: Parameters<typeof styled>) {\n    return styled(target.apply(thisArg, argumentsList)(baseStyles));\n  },\n  get(target, property: keyof typeof styled) {\n    if (typeof target[property] === \"function\") {\n      return styled(target[property].apply(styled, [baseStyles]));\n    }\n    return target[property];\n  },\n});\n\nexport default <StyledInterface>proxyStyled;\n","import { system } from \"styled-system\";\n\nconst gaps = system({\n  rowGap: { property: \"rowGap\", scale: \"space\" },\n  columnGap: { property: \"columnGap\", scale: \"space\" },\n});\n\nexport default gaps;\n","// getDefaultExport function for compatibility with non-ESM modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};\n","__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n        }\n    }\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import React from \"react\";\nimport BadgeComponent, { Props } from \"./Badge\";\nimport Icon from \"../../asorted/Icon\";\nimport FlexBox from \"../../layout/Flex\";\n\nexport default {\n  title: \"Messages/Notifications/Badge\",\n  component: BadgeComponent,\n  argTypes: {\n    active: {\n      type: \"boolean\",\n      defaultValue: false,\n    },\n    icon: { control: false },\n    theme: { table: { disable: true } },\n    as: { table: { disable: true } },\n    forwardedAs: { table: { disable: true } },\n  },\n};\n\nexport const Badge = (args: Props): JSX.Element => {\n  return (\n    <FlexBox style={{ columnGap: \"2em\" }}>\n      <BadgeComponent\n        {...args}\n        color=\"warning.c50\"\n        backgroundColor=\"warning.c10\"\n        icon={<Icon name=\"Warning\" size={24} />}\n      />\n      <BadgeComponent\n        {...args}\n        color=\"primary.c100\"\n        backgroundColor=\"primary.c10\"\n        icon={<Icon name=\"Info\" size={24} weight=\"Medium\" />}\n      />\n    </FlexBox>\n  );\n};\n"],"names":["icons","React","iconNames","Array","Object","set","rawKey","key","Set","Icon","name","size","color","weight","maybeIconName","Component","baseStyled","FlexBox","styled","position","shadow","border","background","layout","ActiveCircle","p","Wrapper","Badge","active","icon","props","gaps","compose","flexbox","space","overflow","baseStyles","proxyStyled","Proxy","target","thisArg","argumentsList","property","system","BadgeComponent","args"],"mappings":"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"}