@nobak/design-system 1.0.0

package/lib/stories/Foundation/BrandIdentity.prod.stories.js

@@ -0,0 +1,510 @@
+/**
+ * Nobak Design System - Brand Identity Showcase
+ * 
+ * A modern, minimalist design system for decentralized finance
+ */
+
+import React from 'react';
+var meta = {
+  title: 'Foundation / Brand Identity',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Complete showcase of the Nobak Design System brand identity, principles, and visual language.'
+      }
+    }
+  }
+};
+export default meta;
+// Brand Identity Showcase Component
+var BrandIdentityShowcase = function BrandIdentityShowcase() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "min-h-screen bg-gray-50"
+  }, /*#__PURE__*/React.createElement("section", {
+    className: "bg-white border-b border-gray-200 py-16 px-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "max-w-6xl mx-auto"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-center mb-12"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "text-6xl font-bold text-gray-900 mb-4",
+    style: {
+      letterSpacing: '-0.02em'
+    }
+  }, "Nobak Design System"), /*#__PURE__*/React.createElement("p", {
+    className: "text-2xl text-gray-600 mb-8"
+  }, "Modern. Minimal. Decentralized."), /*#__PURE__*/React.createElement("div", {
+    className: "inline-block bg-primary-500 text-white px-8 py-4 rounded font-bold text-xl"
+  }, "Financial Freedom Through Design")), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-3 gap-8 mt-16"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-4xl mb-4"
+  }, "\u26A1"), /*#__PURE__*/React.createElement("h3", {
+    className: "text-xl font-bold text-gray-900 mb-2"
+  }, "Bold & Direct"), /*#__PURE__*/React.createElement("p", {
+    className: "text-gray-600"
+  }, "Clear communication, no unnecessary complexity")), /*#__PURE__*/React.createElement("div", {
+    className: "text-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-4xl mb-4"
+  }, "\uD83C\uDFAF"), /*#__PURE__*/React.createElement("h3", {
+    className: "text-xl font-bold text-gray-900 mb-2"
+  }, "Purposeful Simplicity"), /*#__PURE__*/React.createElement("p", {
+    className: "text-gray-600"
+  }, "Every element serves a function")), /*#__PURE__*/React.createElement("div", {
+    className: "text-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-4xl mb-4"
+  }, "\uD83D\uDD13"), /*#__PURE__*/React.createElement("h3", {
+    className: "text-xl font-bold text-gray-900 mb-2"
+  }, "Open & Transparent"), /*#__PURE__*/React.createElement("p", {
+    className: "text-gray-600"
+  }, "Decentralized, accessible to all"))))), /*#__PURE__*/React.createElement("section", {
+    className: "py-16 px-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "max-w-6xl mx-auto"
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "text-4xl font-bold text-gray-900 mb-8"
+  }, "Color System"), /*#__PURE__*/React.createElement("div", {
+    className: "mb-12"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "text-2xl font-semibold text-gray-900 mb-4"
+  }, "Primary Red"), /*#__PURE__*/React.createElement("p", {
+    className: "text-gray-600 mb-6"
+  }, "Bold, confident, action-oriented"), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-10 gap-2"
+  }, [{
+    name: '../..',
+    color: '#FFF1F0'
+  }, {
+    name: '100',
+    color: '#FFE1DE'
+  }, {
+    name: '200',
+    color: '#FFC7C2'
+  }, {
+    name: '300',
+    color: '#FFA199'
+  }, {
+    name: '400',
+    color: '#FF6B5E'
+  }, {
+    name: '500',
+    color: '#FF3B2D'
+  }, {
+    name: '600',
+    color: '#E6251A'
+  }, {
+    name: '700',
+    color: '#C21A11'
+  }, {
+    name: '800',
+    color: '#9E1710'
+  }, {
+    name: '900',
+    color: '#7D1410'
+  }].map(function (shade) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: shade.name,
+      className: "text-center"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "h-20 rounded mb-2 border border-gray-200",
+      style: {
+        backgroundColor: shade.color
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "text-xs font-mono text-gray-600"
+    }, shade.name), /*#__PURE__*/React.createElement("div", {
+      className: "text-xs font-mono text-gray-500"
+    }, shade.color));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "mb-12"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "text-2xl font-semibold text-gray-900 mb-4"
+  }, "Neutral Gray"), /*#__PURE__*/React.createElement("p", {
+    className: "text-gray-600 mb-6"
+  }, "Clean, precise, timeless foundation"), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-10 gap-2"
+  }, [{
+    name: '../..',
+    color: '#FAFAFA'
+  }, {
+    name: '100',
+    color: '#F5F5F5'
+  }, {
+    name: '200',
+    color: '#E5E5E5'
+  }, {
+    name: '300',
+    color: '#D4D4D4'
+  }, {
+    name: '400',
+    color: '#A3A3A3'
+  }, {
+    name: '500',
+    color: '#737373'
+  }, {
+    name: '600',
+    color: '#525252'
+  }, {
+    name: '700',
+    color: '#404040'
+  }, {
+    name: '800',
+    color: '#262626'
+  }, {
+    name: '900',
+    color: '#171717'
+  }].map(function (shade) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: shade.name,
+      className: "text-center"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "h-20 rounded mb-2 border border-gray-200",
+      style: {
+        backgroundColor: shade.color
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "text-xs font-mono text-gray-600"
+    }, shade.name), /*#__PURE__*/React.createElement("div", {
+      className: "text-xs font-mono text-gray-500"
+    }, shade.color));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "mb-12"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "text-2xl font-semibold text-gray-900 mb-4"
+  }, "Accent Blue"), /*#__PURE__*/React.createElement("p", {
+    className: "text-gray-600 mb-6"
+  }, "Technology, trust, innovation"), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-9 gap-2"
+  }, [{
+    name: '../..',
+    color: '#EFF6FF'
+  }, {
+    name: '100',
+    color: '#DBEAFE'
+  }, {
+    name: '200',
+    color: '#BFDBFE'
+  }, {
+    name: '300',
+    color: '#93C5FD'
+  }, {
+    name: '400',
+    color: '#60A5FA'
+  }, {
+    name: '500',
+    color: '#3B82F6'
+  }, {
+    name: '600',
+    color: '#2563EB'
+  }, {
+    name: '700',
+    color: '#1D4ED8'
+  }, {
+    name: '800',
+    color: '#1E40AF'
+  }].map(function (shade) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: shade.name,
+      className: "text-center"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "h-20 rounded mb-2 border border-gray-200",
+      style: {
+        backgroundColor: shade.color
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "text-xs font-mono text-gray-600"
+    }, shade.name), /*#__PURE__*/React.createElement("div", {
+      className: "text-xs font-mono text-gray-500"
+    }, shade.color));
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+    className: "text-2xl font-semibold text-gray-900 mb-4"
+  }, "Semantic Colors"), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-4 gap-4"
+  }, [{
+    name: 'Success',
+    color: '#10B981',
+    label: 'Growth Green'
+  }, {
+    name: 'Warning',
+    color: '#F59E0B',
+    label: 'Caution Yellow'
+  }, {
+    name: 'Error',
+    color: '#EF4444',
+    label: 'Danger Red'
+  }, {
+    name: 'Info',
+    color: '#3B82F6',
+    label: 'Blockchain Blue'
+  }].map(function (semantic) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: semantic.name,
+      className: "text-center"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "h-24 rounded mb-2 border border-gray-200",
+      style: {
+        backgroundColor: semantic.color
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "font-semibold text-gray-900"
+    }, semantic.name), /*#__PURE__*/React.createElement("div", {
+      className: "text-sm text-gray-600"
+    }, semantic.label), /*#__PURE__*/React.createElement("div", {
+      className: "text-xs font-mono text-gray-500"
+    }, semantic.color));
+  }))))), /*#__PURE__*/React.createElement("section", {
+    className: "bg-white border-y border-gray-200 py-16 px-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "max-w-6xl mx-auto"
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "text-4xl font-bold text-gray-900 mb-8"
+  }, "Typography"), /*#__PURE__*/React.createElement("div", {
+    className: "mb-12"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "text-2xl font-semibold text-gray-900 mb-4"
+  }, "Font Families"), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-2 gap-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "border border-gray-200 rounded-lg p-6"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-sm text-gray-600 mb-2"
+  }, "Primary"), /*#__PURE__*/React.createElement("div", {
+    className: "text-4xl font-bold text-gray-900 mb-2"
+  }, "Arboria"), /*#__PURE__*/React.createElement("p", {
+    className: "text-gray-600"
+  }, "Geometric, clean, modern. Perfect for UI and content.")), /*#__PURE__*/React.createElement("div", {
+    className: "border border-gray-200 rounded-lg p-6"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-sm text-gray-600 mb-2"
+  }, "Monospace"), /*#__PURE__*/React.createElement("div", {
+    className: "text-4xl font-bold text-gray-900 mb-2 font-mono"
+  }, "IBM Plex Mono"), /*#__PURE__*/React.createElement("p", {
+    className: "text-gray-600"
+  }, "Code, data, punk aesthetic. Technical precision.")))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+    className: "text-2xl font-semibold text-gray-900 mb-4"
+  }, "Type Scale"), /*#__PURE__*/React.createElement("p", {
+    className: "text-gray-600 mb-6"
+  }, "Modular scale 1.250 (Major Third) - Musical harmony"), /*#__PURE__*/React.createElement("div", {
+    className: "space-y-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "border-b border-gray-200 pb-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-sm text-gray-600 mb-1"
+  }, "Display - 72px / Bold / -0.02em"), /*#__PURE__*/React.createElement("div", {
+    className: "text-7xl font-bold text-gray-900",
+    style: {
+      letterSpacing: '-0.02em'
+    }
+  }, "No Bank")), /*#__PURE__*/React.createElement("div", {
+    className: "border-b border-gray-200 pb-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-sm text-gray-600 mb-1"
+  }, "H1 - 60px / Bold / -0.02em"), /*#__PURE__*/React.createElement("div", {
+    className: "text-6xl font-bold text-gray-900",
+    style: {
+      letterSpacing: '-0.02em'
+    }
+  }, "Heading 1")), /*#__PURE__*/React.createElement("div", {
+    className: "border-b border-gray-200 pb-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-sm text-gray-600 mb-1"
+  }, "H2 - 48px / SemiBold / -0.01em"), /*#__PURE__*/React.createElement("div", {
+    className: "text-5xl font-semibold text-gray-900",
+    style: {
+      letterSpacing: '-0.01em'
+    }
+  }, "Heading 2")), /*#__PURE__*/React.createElement("div", {
+    className: "border-b border-gray-200 pb-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-sm text-gray-600 mb-1"
+  }, "H3 - 38px / SemiBold"), /*#__PURE__*/React.createElement("div", {
+    className: "text-4xl font-semibold text-gray-900"
+  }, "Heading 3")), /*#__PURE__*/React.createElement("div", {
+    className: "border-b border-gray-200 pb-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-sm text-gray-600 mb-1"
+  }, "Body - 16px / Regular / 1.6"), /*#__PURE__*/React.createElement("div", {
+    className: "text-base text-gray-900",
+    style: {
+      lineHeight: '1.6'
+    }
+  }, "The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.")), /*#__PURE__*/React.createElement("div", {
+    className: "border-b border-gray-200 pb-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-sm text-gray-600 mb-1"
+  }, "Code - 14px / IBM Plex Mono"), /*#__PURE__*/React.createElement("div", {
+    className: "text-sm font-mono text-gray-900"
+  }, "const nobak = \"No Bank. No Barriers. No Bullshit.\";")))))), /*#__PURE__*/React.createElement("section", {
+    className: "py-16 px-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "max-w-6xl mx-auto"
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "text-4xl font-bold text-gray-900 mb-8"
+  }, "Spacing System"), /*#__PURE__*/React.createElement("div", {
+    className: "mb-8"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "text-2xl font-semibold text-gray-900 mb-4"
+  }, "8px Base Grid"), /*#__PURE__*/React.createElement("p", {
+    className: "text-gray-600 mb-6"
+  }, "Everything aligns to an 8-pixel grid. Japanese precision.")), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-6 gap-4"
+  }, [{
+    name: '2',
+    value: '8px',
+    multiplier: '1 × 8'
+  }, {
+    name: '4',
+    value: '16px',
+    multiplier: '2 × 8'
+  }, {
+    name: '6',
+    value: '24px',
+    multiplier: '3 × 8'
+  }, {
+    name: '8',
+    value: '32px',
+    multiplier: '4 × 8'
+  }, {
+    name: ': ',
+    value: '48px',
+    multiplier: '6 × 8'
+  }, {
+    name: ': ',
+    value: '64px',
+    multiplier: '8 × 8'
+  }].map(function (space) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: space.name,
+      className: "border border-gray-200 rounded-lg p-4"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "text-sm text-gray-600 mb-2"
+    }, space.name), /*#__PURE__*/React.createElement("div", {
+      className: "font-bold text-gray-900 mb-1"
+    }, space.value), /*#__PURE__*/React.createElement("div", {
+      className: "text-xs text-gray-500"
+    }, space.multiplier), /*#__PURE__*/React.createElement("div", {
+      className: "mt-3 bg-primary-500 rounded",
+      style: {
+        height: '8px',
+        width: space.value
+      }
+    }));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "mt-12"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "text-2xl font-semibold text-gray-900 mb-4"
+  }, "Ma (\u9593) - Negative Space"), /*#__PURE__*/React.createElement("p", {
+    className: "text-gray-600 mb-6"
+  }, "Japanese concept of negative space as a design element"), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-4 gap-4"
+  }, [{
+    name: 'Tight',
+    value: '8px',
+    desc: 'Minimal breathing room'
+  }, {
+    name: 'Comfortable',
+    value: '16px',
+    desc: 'Standard breathing room'
+  }, {
+    name: 'Spacious',
+    value: '32px',
+    desc: 'Generous breathing room'
+  }, {
+    name: 'Dramatic',
+    value: '64px',
+    desc: 'Dramatic negative space'
+  }].map(function (ma) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: ma.name,
+      className: "border border-gray-200 rounded-lg p-4"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "font-bold text-gray-900 mb-1"
+    }, ma.name), /*#__PURE__*/React.createElement("div", {
+      className: "text-sm text-gray-600 mb-2"
+    }, ma.value), /*#__PURE__*/React.createElement("div", {
+      className: "text-xs text-gray-500"
+    }, ma.desc));
+  }))))), /*#__PURE__*/React.createElement("section", {
+    className: "bg-white border-y border-gray-200 py-16 px-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "max-w-6xl mx-auto"
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "text-4xl font-bold text-gray-900 mb-8"
+  }, "Component Examples"), /*#__PURE__*/React.createElement("div", {
+    className: "mb-12"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "text-2xl font-semibold text-gray-900 mb-6"
+  }, "Buttons"), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-wrap gap-4"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "bg-primary-500 text-white px-6 py-3 rounded font-medium hover:bg-primary-600 transition-colors"
+  }, "Primary Button"), /*#__PURE__*/React.createElement("button", {
+    className: "bg-transparent text-gray-900 px-6 py-3 rounded font-medium border-2 border-gray-200 hover:bg-gray-50 transition-colors"
+  }, "Secondary Button"), /*#__PURE__*/React.createElement("button", {
+    className: "bg-transparent text-primary-500 px-6 py-3 rounded font-medium border-2 border-primary-500 hover:bg-primary-50 transition-colors"
+  }, "Outline Button"), /*#__PURE__*/React.createElement("button", {
+    className: "bg-gray-900 text-white px-6 py-3 rounded font-medium hover:bg-gray-800 transition-colors"
+  }, "Dark Button"))), /*#__PURE__*/React.createElement("div", {
+    className: "mb-12"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "text-2xl font-semibold text-gray-900 mb-6"
+  }, "Inputs"), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-2 gap-4 max-w-2xl"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "Text input",
+    className: "px-4 py-3 border border-gray-200 rounded focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "email",
+    placeholder: "Email input",
+    className: "px-4 py-3 border border-gray-200 rounded focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+    className: "text-2xl font-semibold text-gray-900 mb-6"
+  }, "Cards"), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-3 gap-6"
+  }, [1, 2, 3].map(function (i) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      className: "border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "w-12 h-12 bg-primary-500 rounded mb-4"
+    }), /*#__PURE__*/React.createElement("h4", {
+      className: "text-xl font-semibold text-gray-900 mb-2"
+    }, "Card Title"), /*#__PURE__*/React.createElement("p", {
+      className: "text-gray-600"
+    }, "Clean, minimal card design with sharp edges and purposeful spacing."));
+  }))))), /*#__PURE__*/React.createElement("section", {
+    className: "bg-gray-900 text-white py-16 px-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "max-w-4xl mx-auto text-center"
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "text-5xl font-bold mb-8"
+  }, "We are Nobak"), /*#__PURE__*/React.createElement("p", {
+    className: "text-2xl mb-6 text-gray-300"
+  }, "We don't believe in banks. We believe in people."), /*#__PURE__*/React.createElement("p", {
+    className: "text-xl mb-8 text-gray-400"
+  }, "We're punk rock. We're minimal. We're Japanese precision."), /*#__PURE__*/React.createElement("p", {
+    className: "text-xl mb-8 text-gray-400"
+  }, "We're rebellious but refined. Bold but balanced. Raw but elegant."), /*#__PURE__*/React.createElement("div", {
+    className: "text-3xl font-bold text-primary-500 mb-4"
+  }, "No Bank. No Barriers. No Bullshit."), /*#__PURE__*/React.createElement("p", {
+    className: "text-xl text-gray-300"
+  }, "Just world-class design for decentralized finance."))));
+};
+export var Default = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(BrandIdentityShowcase, null);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Complete showcase of the Nobak Design System brand identity, including colors, typography, spacing, and component examples.'
+      }
+    }
+  }
+};

package/lib/stories/Foundation/Logo.stories.js

@@ -0,0 +1,19 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Logo } from "../../components";
+import "../../../styles/index.css";
+export default {
+  component: Logo,
+  title: 'Foundation / Logo'
+};
+export var Default = function Default(args) {
+  return /*#__PURE__*/React.createElement(Logo, _extends({}, args, {
+    type: "LogoFull"
+  }));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=971%3A68'
+  }
+};

package/lib/stories/Foundation/RisingSun.stories.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { RisingSun } from "../../components";
+import "../../../styles/index.css";
+export default {
+  component: RisingSun,
+  title: 'Foundation / RisingSun'
+};
+export var Default = function Default(args) {
+  return /*#__PURE__*/React.createElement(RisingSun, args);
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/vkIFRuwbONhF3qrGI7bHvL/App?node-id=971%3A68'
+  }
+};