@crystallize/design-system 1.1.0 → 1.2.1

package/src/slider/Slider.stories.tsx

@@ -0,0 +1,54 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { useState } from 'react';
+import { Slider } from '.';
+
+const meta: Meta<typeof Slider> = {
+  title: 'Components/Slider',
+  component: Slider,
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  args: {
+    'aria-label': 'volume',
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    'aria-label': 'volume',
+    defaultValue: [25],
+    max: 100,
+    orientation: 'vertical',
+    step: 1,
+  },
+};
+
+export const TransparentRange: Story = {
+  args: {
+    'aria-label': 'volume',
+    defaultValue: [25],
+    max: 100,
+    step: 1,
+    transparentRange: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<number[]>([25]);
+
+    return (
+      <div className="space-y-6">
+        <Slider aria-label="volume" step={1} max={100} onValueChange={setValue} value={value} />
+        <pre>{value}</pre>
+      </div>
+    );
+  },
+};

package/src/slider/index.ts

@@ -0,0 +1 @@
+export { Slider } from './slider';

package/src/slider/slider.css

@@ -0,0 +1,27 @@
+.c-slider-root {
+  @apply relative flex w-52 touch-none select-none items-center;
+  @apply data-[orientation='horizontal']:h-5;
+  @apply data-[orientation='vertical']:h-28 data-[orientation='vertical']:w-5 data-[orientation='vertical']:flex-col;
+}
+
+.c-slider-track {
+  @apply relative grow rounded-full bg-gray-100-800;
+  @apply data-[orientation='horizontal']:h-[3px];
+  @apply data-[orientation='vertical']:w-[3px];
+}
+
+.c-slider-range {
+  @apply absolute rounded-full bg-gray-600-300;
+  @apply data-[orientation="horizontal"]:h-full;
+  @apply data-[orientation="vertical"]:w-full;
+}
+
+.c-slider-range-transparent {
+  @apply bg-transparent;
+}
+
+.c-slider-thumb {
+  @apply block h-5 w-5 rounded-xl bg-gray-600-300 shadow;
+  @apply hover:bg-gray-700-200;
+  @apply focus:shadow-lg focus:outline-none;
+}

package/src/slider/slider.tsx

@@ -0,0 +1,19 @@
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { forwardRef } from 'react';
+
+import './slider.css';
+
+type SliderProps = SliderPrimitive.SliderProps & {
+  transparentRange?: boolean;
+};
+
+export const Slider = forwardRef<HTMLSpanElement, SliderProps>(({ transparentRange, ...delegated }, ref) => {
+  return (
+    <SliderPrimitive.Root className="c-slider-root" ref={ref} {...delegated}>
+      <SliderPrimitive.Track className="c-slider-track">
+        <SliderPrimitive.Range className={`c-slider-range ${transparentRange ? 'c-slider-range-transparent' : ''}`} />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb className="c-slider-thumb" />
+    </SliderPrimitive.Root>
+  );
+});

package/src/spinner/Spinner.stories.tsx

@@ -0,0 +1,19 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Spinner } from '.';
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  argTypes: {
+    size: {
+      defaultValue: 30,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/spinner/index.tsx

@@ -0,0 +1,48 @@
+import { cx } from 'class-variance-authority';
+import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
+
+import './spinner.css';
+
+const realSize = 40;
+
+type SpinnerProps = ComponentPropsWithRef<'div'> & {
+  children?: ReactNode;
+  className?: string;
+  color?: string;
+  size?: number;
+  strokeSize?: number;
+};
+
+export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
+  ({ children, className, color = 'currentColor', size = 30, strokeSize, ...delegated }, ref) => {
+    const viewSize = size || realSize;
+    const sizeHalf = realSize / 2;
+
+    return (
+      <div ref={ref} className={cx('c-spinner', className)} data-testid="loading-spinner" {...delegated}>
+        <svg viewBox={`0 0 ${realSize} ${realSize}`} x="0px" y="0px" style={{ width: viewSize, height: viewSize }}>
+          <circle
+            cx="20"
+            cy="20"
+            r="18"
+            style={{
+              stroke: color,
+              strokeWidth: strokeSize ? strokeSize : viewSize / 10,
+              strokeLinecap: 'round',
+              strokeDasharray: size < 16 ? size * 6 : size * 3.5,
+              transformOrigin: `${sizeHalf}px ${sizeHalf}px 0`,
+            }}
+            className="c-spinner-artifact"
+          />
+        </svg>
+        {children && (
+          <span className="c-spinner-children" style={{ fontSize: size ? `${size * 0.75}px` : '1em' }}>
+            {children}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+Spinner.displayName = 'Spinner';

package/src/spinner/spinner.css

@@ -0,0 +1,11 @@
+.c-spinner {
+  @apply inline-flex items-center;
+
+  &-artifact {
+    @apply animate-spin fill-transparent;
+  }
+
+  &-children {
+    @apply ml-[15px] inline-block;
+  }
+}

package/src/tag/Tag.stories.tsx

@@ -0,0 +1,32 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Tag } from '.';
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Tag>;
+
+export const Default: Story = {
+  args: {
+    children: 'EUR',
+  },
+};
+
+export const Elevate: Story = {
+  args: {
+    children: 'EUR',
+    variant: 'elevate',
+  },
+};
+
+export const DarkMode: Story = {
+  args: {
+    children: '%',
+    variant: 'elevate',
+    className: 'c-dark',
+  },
+};

package/src/tag/index.ts

@@ -0,0 +1 @@
+export { Tag } from './tag';

package/src/tag/tag.css

@@ -0,0 +1,7 @@
+.c-tag {
+  @apply inline-flex items-center rounded border border-solid border-gray-200-700 bg-purple-50-900 p-1 text-center text-xs font-medium text-gray-700-200 shadow-sm;
+}
+
+.c-tag-elevate {
+  @apply bg-elevate;
+}

package/src/tag/tag.tsx

@@ -0,0 +1,27 @@
+import { cva, VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+
+import './tag.css';
+
+type TagStylesProps = VariantProps<typeof tagStyles>;
+const tagStyles = cva('c-tag', {
+  variants: {
+    variant: {
+      default: '',
+      elevate: 'c-tag-elevate',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export type TagProps = ComponentProps<'span'> & TagStylesProps;
+
+export function Tag({ children, className, variant, ...delegated }: TagProps) {
+  return (
+    <span className={tagStyles({ className, variant })} {...delegated}>
+      {children}
+    </span>
+  );
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tailwind.config.cjs

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const defaultTheme = require('tailwindcss/defaultTheme');
+const colorsPlugin = require('./plugins/colors');
+
+/** @type {import("tailwindcss").Config} */
+module.exports = {
+  content: ['./src/**/*.tsx'],
+  safelist: ['c-dark'],
+  experimental: {
+    optimizeUniversalDefaults: true,
+  },
+  corePlugins: {
+    preflight: false,
+  },
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Roboto', ...defaultTheme.fontFamily.sans],
+        serif: ["'Roboto Slab'", ...defaultTheme.fontFamily.serif],
+      },
+      colors: {
+        // Some nice-to-have colors
+        transparent: 'transparent',
+        inherit: 'inherit',
+      },
+      keyframes: {
+        spin: {
+          '0%': {
+            transform: 'rotate(0deg)',
+            strokeDashoffset: 26.4, // 40 * 0.66
+          },
+          '50%': {
+            transform: 'rotate(720deg)',
+            strokeDashoffset: 125.6, // 40 * 3.14
+          },
+          '100%': {
+            transform: 'rotate(1080deg)',
+            strokeDashoffset: 26.4, // 40 * 0.66
+          },
+        },
+      },
+      animation: {
+        spin: 'spin 2s linear infinite',
+      },
+      boxShadow: {
+        DEFAULT: '0 2px 4px rgba(130,138,144,0.15)',
+      },
+    },
+  },
+  plugins: [colorsPlugin],
+};

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 deekshasharma
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,35 +0,0 @@
-# How to install this library?
-
-```bash
-yarn add @crystallize/ui styled-components
-```
-
-Note: You also need React to be able to work with this library.
-
-### How to import and use Button component
-
-```js
-import {Button} from "@crystallize/ui";
-
-function App() {
-    return (
-        <div className="App" style={{justifyContent: "space-between", alignItems: "center", marginTop: "10vh"}}>
-            <Button color={"primary"} variant="filled" size={"large"}>Add to Cart</Button>
-        </div>
-    );
-}
-```
-
-### How to import and use Typography component
-
-```js
-import {Typography} from "@crystallize/ui";
-
-function App() {
-    return (
-        <div className="App" style={{justifyContent: "space-between", alignItems: "center", marginTop: "10vh"}}>
-            <Typography color={"primary"} style={"h3"} align={"center"}>Headless e-Commerce is the future!</Typography>
-        </div>
-    );
-}
-```

package/dist/components/Button.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export interface ButtonProps {
-    color?: 'primary' | 'secondary' | 'default';
-    variant?: 'filled' | 'outlined' | 'text';
-    size?: 'small' | 'medium' | 'large';
-    onClick?: () => void;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    children?: React.ReactNode;
-}
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Typography.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-export interface TypographyProps {
-    color?: 'primary' | 'secondary' | 'primaryText' | 'secondaryText' | 'error';
-    style?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'overline';
-    underline?: boolean;
-    bold?: boolean;
-    display?: 'inline' | 'block' | 'inherit';
-    gutter?: boolean;
-    align?: 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
-    ellipsis?: boolean;
-    textParagraph?: boolean;
-    children?: React.ReactNode;
-}
-export declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/design-system.cjs.development.js

@@ -1,164 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = _interopDefault(require('react'));
-var styled = require('styled-components');
-var styled__default = _interopDefault(styled);
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  strings.raw = raw;
-  return strings;
-}
-
-var _templateObject;
-var GlobalStyle = /*#__PURE__*/styled.createGlobalStyle(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :root {\n    --palette-common-white: #ffffff;\n    --palette-common-black: #000000;\n    \n    --palette-primary-light: #CEEAE7;\n    --palette-primary-main: #8fdecb;\n    --palette-primary-dark: #8FDDCA;\n    --palette-primary-contrastText: #4C4F5A;\n    --palette-primary-400: #EDF7F6;\n    --palette-primary-600: #68baa6;\n    \n    --palette-secondary-light: #FEFCDD;\n    --palette-secondary-main: #FFEFD2;\n    --palette-secondary-dark: #ba9147;\n    --palette-secondary-contrastText: #4C4F5A;\n    --palette-secondary-400: #fff7e8;\n    \n    --palette-error-light: #f47f98;\n    --palette-error-main: #EF4836;\n    --palette-error-dark: #d32f2f;\n    --palette-error-contrastText: #ffffff;\n    \n    --palette-text-primary: #4C4F5A;\n    --palette-text-secondary: rgba(0, 0, 0, 0.54);\n    --palette-text-disabled: rgba(0, 0, 0, 0.38);\n    --palette-text-hint: rgba(0, 0, 0, 0.38);\n    \n    --palette-action-disabled: rgba(0, 0, 0, 0.07);\n    --palette-action-hover: rgba(0, 0, 0, 0.04);\n    --palette-action-disabledBackground: rgba(0, 0, 0, 0.05);\n    \n    --border-radius-small: 10px;\n    --border-radius-default: 40px;\n    \n    --shadow-none: none;\n    --shadow-01: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);\n    --shadow-02: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);\n    --shadow-03: 0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12);\n    --shadow-04: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);\n    --shadow-05: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12);\n    --shadow-06: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);\n    --shadow-07: 0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12);\n    --shadow-08: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);\n    \n    --ease-out:cubic-bezier(0.0, 0, 0.2, 1); \n    --ease-in:cubic-bezier(0.4, 0, 1, 1); \n    \n    --spacing-sm: 10;\n    --spacing-md: 20;\n    --spacing-lg: 30;\n\n    --html-font-size: 16;\n    --default-font-size: 14;\n    --font-weight-light: 300;\n    --font-weight-regular: 400;\n    --font-weight-medium: 500;\n    --font-weight-bold: 700;\n    --typography-gutter:0.35em;\n\n    --default-font-family: 'Roboto', sans-serif;\n\n    --caption-font-size: 0.75rem;\n    --caption-line-height: 1.66;\n    --caption-letter-spacing: 0.03333em;\n\n    --overline-font-size: 0.75rem;\n    --overline-line-height: 2.66;\n    --overline-letter-spacing: 0.08333em;\n    --overline-text-transform: uppercase;\n    \n    --body1-font-size: 1rem;\n    --body1-line-height: 1.5;\n    --body1-letter-spacing: 0.00938em;\n\n    --body2-font-size: 0.875rem;\n    --body2-line-height: 1.43;\n    --body2-letter-spacing: 0.01071em;\n    \n    --subtitle1-font-size: 1rem;\n    --subtitle1-line-height: 1.75;\n    --subtitle1-letter-spacing: 0.00938em;\n\n    --subtitle2-font-size: 0.875rem;\n    --subtitle2-line-height: 1.57;\n    --subtitle2-letter-spacing: 0.00714em;\n  }\n  \n  button {\n    font-family: var(--default-font-family);\n    font-weight: var(--font-weight-medium);\n    font-size: 0.875rem;\n    line-height: 1.75;\n    letter-spacing: 0.02857em;\n    text-transform: uppercase;\n    cursor: pointer;\n  }\n  \n  \n  h1 {\n    font-weight: var(--font-weight-light);\n    font-size: 6rem;\n    line-height: 1.167;\n    letter-spacing: -0.01562em;\n  }\n  \n  h2 {\n    font-weight: var(--font-weight-light);\n    font-size: 3.75rem;\n    line-height: 1.2;\n    letter-spacing: -0.00833em;\n  }\n  \n  h3 {\n    font-weight: var(--font-weight-regular);\n    font-size: 3rem;\n    line-height: 1.167;\n    letter-spacing: 0em;\n  }\n\n  h4 {\n    font-weight: var(--font-weight-regular);\n    font-size: 2.125rem;\n    line-height: 1.235;\n    letter-spacing: 0.00735em;\n  }\n\n  h5 {\n    font-weight: var(--font-weight-regular);\n    font-size: 1.5rem;\n    line-height: 1.334;\n    letter-spacing: 0em;\n  }\n\n  h6 {\n    font-weight: var(--font-weight-medium);\n    font-size: 1.25rem;\n    line-height: 1.6;\n    letter-spacing: 0.0075em;\n  }\n"])));
-var getRemSize = function getRemSize(fontSize) {
-  var defaultFontSize = 14;
-  var htmlFontSize = 16;
-  var coefficient = defaultFontSize / 14;
-  return fontSize / htmlFontSize * coefficient;
-};
-
-var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-var outlined = /*#__PURE__*/styled.css(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--palette-text-primary);\n  padding: 5px 15px;\n  border: 0.4px solid var(--palette-text-secondary);\n  border-radius: var(--border-radius-default);\n  &:hover {\n    background-color: var(--palette-action-hover);\n  }\n  &:disabled {\n    border: 1px solid var(--palette-action-disabled);\n    background-color: var(--palette-action-disabled);\n  }\n"])));
-var outlinedPrimary = /*#__PURE__*/styled.css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--palette-primary-600);\n  background-color: transparent;\n  border: 1px solid var(--palette-primary-600);\n  &:hover {\n    border: 1px solid var(--palette-primary-dark);\n    background-color: var(--palette-primary-400);\n  }\n  &:active {\n    box-shadow: var(--shadow-05);\n  }\n  &:disabled {\n    border: 1px solid var(--palette-action-disabled);\n    color: var(--palette-text-disabled);\n    background-color: var(--palette-action-disabled);\n  }\n"])));
-var outlinedSecondary = /*#__PURE__*/styled.css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--palette-secondary-dark);\n  background-color: transparent;\n  border: 1px solid var(--palette-secondary-dark);\n  &:hover {\n    background-color: var(--palette-secondary-400);\n  }\n  &:active {\n    box-shadow: var(--shadow-02);\n  }\n  &:disabled {\n    border: 1px solid var(--palette-action-disabled);\n    color: var(--palette-text-disabled);\n    background-color: var(--palette-action-disabled);\n  }\n"])));
-var filled = /*#__PURE__*/styled.css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--palette-common-white);\n  color: var(--palette-primary-contrastText);\n  border-radius: var(--border-radius-default);\n  box-shadow: var(--shadow-02);\n  &:hover {\n    background-color: var(--palette-action-hover);\n    box-shadow: var(--shadow-04);\n  }\n  &:active {\n    box-shadow: var(--shadow-08);\n  }\n  &:focus-visible {\n    box-shadow: var(--shadow-06);\n  }\n  &:disabled {\n    background-color: var(--palette-action-disabled);\n    box-shadow: var(--shadow-none);\n  }\n"])));
-var filledPrimary = /*#__PURE__*/styled.css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--palette-primary-main);\n  color: var(--palette-primary-contrastText);\n  border-radius: var(--border-radius-default);\n  &:hover {\n    background-color: var(--palette-primary-dark);\n  }\n  &:disabled {\n    background-color: var(--palette-action-disabled);\n  }\n"])));
-var filledSecondary = /*#__PURE__*/styled.css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--palette-secondary-main);\n  color: var(--palette-secondary-contrastText);\n  border-radius: var(--border-radius-default);\n  &:hover {\n    background-color: var(--palette-secondary-dark);\n  }\n  &:disabled {\n    background-color: var(--palette-action-disabled);\n  }\n"])));
-var StyledButton = /*#__PURE__*/styled__default.button(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-style: none;\n  outline: 0;\n  display: inline-block;\n  padding: 6px 16px;\n  color: var(--palette-text-primary);\n  background-color: transparent;\n\n      /* color=primary and variant=text*/\n    ", "\n\n      /* color=secondary and variant=text*/\n    ", "\n\n      /* size=small*/\n    ", "\n\n      /* size=large*/\n    ", ";\n\n      /*variant=outlined*/\n    ", ";\n\n    /*variant=filled*/\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  ", ";\n\n"])), function (props) {
-  return props.$color === 'primary' && styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        color: var(--palette-primary-600);\n        &:hover {\n          background-color: var(--palette-primary-400);\n        }\n        &:disabled {\n          background-color: transparent;\n        }\n      "])));
-}, function (props) {
-  return props.$color === 'secondary' && styled.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        color: var(--palette-secondary-dark);\n        &:hover {\n          background-color: var(--palette-secondary-400);\n        }\n        &:disabled {\n          background-color: transparent;\n        }\n      "])));
-}, function (props) {
-  return props.$size === 'small' && styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        padding: 6px 12px;\n        font-size: ", "rem;\n      "])), getRemSize(13));
-}, function (props) {
-  return props.$size === 'large' && styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        padding: 8px 14px;\n        font-size: ", "rem;\n      "])), getRemSize(15));
-}, function (props) {
-  return props.$variant === 'outlined' && outlined;
-}, function (props) {
-  return props.$variant === 'filled' && filled;
-}, function (props) {
-  return props.$fullWidth && styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        width: 100%;\n      "])));
-}, function (props) {
-  return props.disabled && styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        color: var(--palette-text-disabled);\n        box-shadow: var(--shadow-none);\n      "])));
-}, function (props) {
-  return props.$variant === 'outlined' && props.$color === 'primary' && outlinedPrimary;
-}, function (props) {
-  return props.$variant === 'outlined' && props.$color === 'secondary' && outlinedSecondary;
-}, function (props) {
-  return props.$variant === 'filled' && props.$color === 'primary' && filledPrimary;
-}, function (props) {
-  return props.$variant === 'filled' && props.$color === 'secondary' && filledSecondary;
-});
-var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var props = _extends({}, _ref);
-
-  return React.createElement(React.Fragment, null, React.createElement(GlobalStyle, null), React.createElement(StyledButton, Object.assign({
-    ref: ref,
-    "$color": props.color || 'default',
-    "$size": props.size || 'medium',
-    "$fullWidth": props.fullWidth || false,
-    disabled: props.disabled || false,
-    "$variant": props.variant || 'text'
-  }, props), props.children));
-});
-
-var _templateObject$2, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1;
-var withEllipsis = /*#__PURE__*/styled.css(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-var gutterBottom = "margin-bottom: var(--typography-gutter);";
-var paragraph = "margin-bottom: 16px;";
-var primaryColor = "color: var(--palette-primary-600);";
-var secondaryColor = "color: var(--palette-secondary-dark);";
-var primaryTextColor = "color: var(--palette-text-primary);";
-var secondaryTextColor = "color: var(--palette-text-secondary);";
-var errorColor = "color: var(--palette-error-main);";
-var Caption = /*#__PURE__*/styled.css(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--caption-font-size);\n  line-height: var(--caption-line-height);\n  letter-spacing: var(--caption-letter-spacing);\n"])));
-var Overline = /*#__PURE__*/styled.css(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--overline-font-size);\n  line-height: var(--overline-line-height);\n  letter-spacing: var(--overline-letter-spacing);\n  text-transform: var(--overline-text-transform);\n"])));
-var Body2 = /*#__PURE__*/styled.css(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--body2-font-size);\n  line-height: var(--body2-line-height);\n  letter-spacing: var(--body2-letter-spacing);\n"])));
-var Body1 = /*#__PURE__*/styled.css(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--body1-font-size);\n  line-height: var(--body1-line-height);\n  letter-spacing: var(--body1-letter-spacing);\n"])));
-var Subtitle2 = /*#__PURE__*/styled.css(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-weight: var(--font-weight-medium);\n  font-size: var(--subtitle2-font-size);\n  line-height: var(--subtitle2-line-height);\n  letter-spacing: var(--subtitle2-letter-spacing);\n"])));
-var Subtitle1 = /*#__PURE__*/styled.css(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--subtitle1-font-size);\n  line-height: var(--subtitle1-line-height);\n  letter-spacing: var(--subtitle1-letter-spacing);\n"])));
-var StyledTypography = /*#__PURE__*/styled__default.span(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--default-font-family);\n  margin: 0;\n  display: ", ";\n  text-align: ", ";\n  text-decoration-line: ", ";\n  font-weight: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (props) {
-  return props.$display ? props.$display : "inherit";
-}, function (props) {
-  return props.$align ? props.$align : "inherit";
-}, function (props) {
-  return props.$underline && "underline";
-}, function (props) {
-  return props.$bold ? "bold" : "var(--font-weight-regular)";
-}, function (props) {
-  return props.$ellipsis && props.$display === 'block' && withEllipsis;
-}, function (props) {
-  return props.$textParagraph && paragraph;
-}, function (props) {
-  return props.$gutter && gutterBottom;
-}, function (props) {
-  return props.$color === 'primary' && primaryColor;
-}, function (props) {
-  return props.$color === 'secondary' && secondaryColor;
-}, function (props) {
-  return props.$color === 'secondaryText' && secondaryTextColor;
-}, function (props) {
-  return props.$color === 'error' && errorColor;
-}, function (props) {
-  return (props.$color === 'primaryText' || !props.$color) && primaryTextColor;
-}, function (props) {
-  return props.$style === 'subtitle1' && Subtitle1;
-}, function (props) {
-  return props.$style === 'subtitle2' && Subtitle2;
-}, function (props) {
-  return props.$style === 'body1' && Body1;
-}, function (props) {
-  return props.$style === 'body2' && Body2;
-}, function (props) {
-  return props.$style === 'overline' && Overline;
-}, function (props) {
-  return props.$style === 'caption' && Caption;
-});
-var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var props = _extends({}, _ref);
-
-  return React.createElement(React.Fragment, null, React.createElement(GlobalStyle, null), React.createElement(StyledTypography, {
-    ref: ref,
-    "$color": props.color || 'primaryText',
-    "$style": props.style || 'subtitle1',
-    "$display": props.display || 'inherit',
-    "$gutter": props.gutter || false,
-    "$align": props.align || 'inherit',
-    "$ellipsis": props.ellipsis || false,
-    "$textParagraph": props.textParagraph || false,
-    "$underline": props.underline || false,
-    "$bold": props.bold || false,
-    as: props.style
-  }, props.children));
-});
-
-exports.Button = Button;
-exports.Typography = Typography;
-//# sourceMappingURL=design-system.cjs.development.js.map

package/dist/design-system.cjs.development.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system.cjs.development.js","sources":["../src/styles/theme.ts","../src/components/Button.tsx","../src/components/Typography.tsx"],"sourcesContent":["import { createGlobalStyle } from 'styled-components';\n\nexport const GlobalStyle = createGlobalStyle`\n  :root {\n    --palette-common-white: #ffffff;\n    --palette-common-black: #000000;\n    \n    --palette-primary-light: #CEEAE7;\n    --palette-primary-main: #8fdecb;\n    --palette-primary-dark: #8FDDCA;\n    --palette-primary-contrastText: #4C4F5A;\n    --palette-primary-400: #EDF7F6;\n    --palette-primary-600: #68baa6;\n    \n    --palette-secondary-light: #FEFCDD;\n    --palette-secondary-main: #FFEFD2;\n    --palette-secondary-dark: #ba9147;\n    --palette-secondary-contrastText: #4C4F5A;\n    --palette-secondary-400: #fff7e8;\n    \n    --palette-error-light: #f47f98;\n    --palette-error-main: #EF4836;\n    --palette-error-dark: #d32f2f;\n    --palette-error-contrastText: #ffffff;\n    \n    --palette-text-primary: #4C4F5A;\n    --palette-text-secondary: rgba(0, 0, 0, 0.54);\n    --palette-text-disabled: rgba(0, 0, 0, 0.38);\n    --palette-text-hint: rgba(0, 0, 0, 0.38);\n    \n    --palette-action-disabled: rgba(0, 0, 0, 0.07);\n    --palette-action-hover: rgba(0, 0, 0, 0.04);\n    --palette-action-disabledBackground: rgba(0, 0, 0, 0.05);\n    \n    --border-radius-small: 10px;\n    --border-radius-default: 40px;\n    \n    --shadow-none: none;\n    --shadow-01: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);\n    --shadow-02: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);\n    --shadow-03: 0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12);\n    --shadow-04: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);\n    --shadow-05: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12);\n    --shadow-06: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);\n    --shadow-07: 0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12);\n    --shadow-08: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);\n    \n    --ease-out:cubic-bezier(0.0, 0, 0.2, 1); \n    --ease-in:cubic-bezier(0.4, 0, 1, 1); \n    \n    --spacing-sm: 10;\n    --spacing-md: 20;\n    --spacing-lg: 30;\n\n    --html-font-size: 16;\n    --default-font-size: 14;\n    --font-weight-light: 300;\n    --font-weight-regular: 400;\n    --font-weight-medium: 500;\n    --font-weight-bold: 700;\n    --typography-gutter:0.35em;\n\n    --default-font-family: 'Roboto', sans-serif;\n\n    --caption-font-size: 0.75rem;\n    --caption-line-height: 1.66;\n    --caption-letter-spacing: 0.03333em;\n\n    --overline-font-size: 0.75rem;\n    --overline-line-height: 2.66;\n    --overline-letter-spacing: 0.08333em;\n    --overline-text-transform: uppercase;\n    \n    --body1-font-size: 1rem;\n    --body1-line-height: 1.5;\n    --body1-letter-spacing: 0.00938em;\n\n    --body2-font-size: 0.875rem;\n    --body2-line-height: 1.43;\n    --body2-letter-spacing: 0.01071em;\n    \n    --subtitle1-font-size: 1rem;\n    --subtitle1-line-height: 1.75;\n    --subtitle1-letter-spacing: 0.00938em;\n\n    --subtitle2-font-size: 0.875rem;\n    --subtitle2-line-height: 1.57;\n    --subtitle2-letter-spacing: 0.00714em;\n  }\n  \n  button {\n    font-family: var(--default-font-family);\n    font-weight: var(--font-weight-medium);\n    font-size: 0.875rem;\n    line-height: 1.75;\n    letter-spacing: 0.02857em;\n    text-transform: uppercase;\n    cursor: pointer;\n  }\n  \n  \n  h1 {\n    font-weight: var(--font-weight-light);\n    font-size: 6rem;\n    line-height: 1.167;\n    letter-spacing: -0.01562em;\n  }\n  \n  h2 {\n    font-weight: var(--font-weight-light);\n    font-size: 3.75rem;\n    line-height: 1.2;\n    letter-spacing: -0.00833em;\n  }\n  \n  h3 {\n    font-weight: var(--font-weight-regular);\n    font-size: 3rem;\n    line-height: 1.167;\n    letter-spacing: 0em;\n  }\n\n  h4 {\n    font-weight: var(--font-weight-regular);\n    font-size: 2.125rem;\n    line-height: 1.235;\n    letter-spacing: 0.00735em;\n  }\n\n  h5 {\n    font-weight: var(--font-weight-regular);\n    font-size: 1.5rem;\n    line-height: 1.334;\n    letter-spacing: 0em;\n  }\n\n  h6 {\n    font-weight: var(--font-weight-medium);\n    font-size: 1.25rem;\n    line-height: 1.6;\n    letter-spacing: 0.0075em;\n  }\n`;\n\nexport const getRemSize = (fontSize: number): number => {\n  const defaultFontSize: number = 14;\n  const htmlFontSize: number = 16;\n  const coefficient: number = defaultFontSize / 14;\n  return (fontSize / htmlFontSize) * coefficient;\n};\n","import React from 'react';\nimport styled, { css } from 'styled-components';\nimport { GlobalStyle, getRemSize } from '../styles/theme';\n\nexport interface ButtonProps {\n  color?: 'primary' | 'secondary' | 'default';\n  variant?: 'filled' | 'outlined' | 'text';\n  size?: 'small' | 'medium' | 'large';\n  onClick?: () => void;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  children?: React.ReactNode;\n}\n\n/**\n * This is to prevent error TS2339: Property '$color', $variant etc does not exist on type,\n * Styled components suggested using $ prefix with a prop when rendering the component. But we don't want consumers to use $ when using this library\n * https://github.com/styled-components/styled-components/issues/3279#issuecomment-695972483\n **/\ninterface StyledButtonProps {\n  $color?: ButtonProps['color'];\n  $variant?: ButtonProps['variant'];\n  $size?: ButtonProps['size'];\n  $onClick?: () => ButtonProps['onClick'];\n  $fullWidth?: ButtonProps['fullWidth'];\n  disabled?: boolean;\n}\n\nconst outlined = css`\n  color: var(--palette-text-primary);\n  padding: 5px 15px;\n  border: 0.4px solid var(--palette-text-secondary);\n  border-radius: var(--border-radius-default);\n  &:hover {\n    background-color: var(--palette-action-hover);\n  }\n  &:disabled {\n    border: 1px solid var(--palette-action-disabled);\n    background-color: var(--palette-action-disabled);\n  }\n`;\n\nconst outlinedPrimary = css`\n  color: var(--palette-primary-600);\n  background-color: transparent;\n  border: 1px solid var(--palette-primary-600);\n  &:hover {\n    border: 1px solid var(--palette-primary-dark);\n    background-color: var(--palette-primary-400);\n  }\n  &:active {\n    box-shadow: var(--shadow-05);\n  }\n  &:disabled {\n    border: 1px solid var(--palette-action-disabled);\n    color: var(--palette-text-disabled);\n    background-color: var(--palette-action-disabled);\n  }\n`;\n\nconst outlinedSecondary = css`\n  color: var(--palette-secondary-dark);\n  background-color: transparent;\n  border: 1px solid var(--palette-secondary-dark);\n  &:hover {\n    background-color: var(--palette-secondary-400);\n  }\n  &:active {\n    box-shadow: var(--shadow-02);\n  }\n  &:disabled {\n    border: 1px solid var(--palette-action-disabled);\n    color: var(--palette-text-disabled);\n    background-color: var(--palette-action-disabled);\n  }\n`;\n\nconst filled = css`\n  background-color: var(--palette-common-white);\n  color: var(--palette-primary-contrastText);\n  border-radius: var(--border-radius-default);\n  box-shadow: var(--shadow-02);\n  &:hover {\n    background-color: var(--palette-action-hover);\n    box-shadow: var(--shadow-04);\n  }\n  &:active {\n    box-shadow: var(--shadow-08);\n  }\n  &:focus-visible {\n    box-shadow: var(--shadow-06);\n  }\n  &:disabled {\n    background-color: var(--palette-action-disabled);\n    box-shadow: var(--shadow-none);\n  }\n`;\n\nconst filledPrimary = css`\n  background-color: var(--palette-primary-main);\n  color: var(--palette-primary-contrastText);\n  border-radius: var(--border-radius-default);\n  &:hover {\n    background-color: var(--palette-primary-dark);\n  }\n  &:disabled {\n    background-color: var(--palette-action-disabled);\n  }\n`;\n\nconst filledSecondary = css`\n  background-color: var(--palette-secondary-main);\n  color: var(--palette-secondary-contrastText);\n  border-radius: var(--border-radius-default);\n  &:hover {\n    background-color: var(--palette-secondary-dark);\n  }\n  &:disabled {\n    background-color: var(--palette-action-disabled);\n  }\n`;\n\nconst StyledButton = styled.button<StyledButtonProps>`\n  border-style: none;\n  outline: 0;\n  display: inline-block;\n  padding: 6px 16px;\n  color: var(--palette-text-primary);\n  background-color: transparent;\n\n      /* color=primary and variant=text*/\n    ${props =>\n      props.$color === 'primary' &&\n      css`\n        color: var(--palette-primary-600);\n        &:hover {\n          background-color: var(--palette-primary-400);\n        }\n        &:disabled {\n          background-color: transparent;\n        }\n      `}\n\n      /* color=secondary and variant=text*/\n    ${props =>\n      props.$color === 'secondary' &&\n      css`\n        color: var(--palette-secondary-dark);\n        &:hover {\n          background-color: var(--palette-secondary-400);\n        }\n        &:disabled {\n          background-color: transparent;\n        }\n      `}\n\n      /* size=small*/\n    ${props =>\n      props.$size === 'small' &&\n      css`\n        padding: 6px 12px;\n        font-size: ${getRemSize(13)}rem;\n      `}\n\n      /* size=large*/\n    ${props =>\n      props.$size === 'large' &&\n      css`\n        padding: 8px 14px;\n        font-size: ${getRemSize(15)}rem;\n      `};\n\n      /*variant=outlined*/\n    ${props => props.$variant === 'outlined' && outlined};\n\n    /*variant=filled*/\n    ${props => props.$variant === 'filled' && filled};\n    ${props =>\n      props.$fullWidth &&\n      css`\n        width: 100%;\n      `};\n    ${props =>\n      props.disabled &&\n      css`\n        color: var(--palette-text-disabled);\n        box-shadow: var(--shadow-none);\n      `};\n    ${props =>\n      props.$variant === 'outlined' &&\n      props.$color === 'primary' &&\n      outlinedPrimary};\n    ${props =>\n      props.$variant === 'outlined' &&\n      props.$color === 'secondary' &&\n      outlinedSecondary};\n    ${props =>\n      props.$variant === 'filled' &&\n      props.$color === 'primary' &&\n      filledPrimary};\n  ${props =>\n    props.$variant === 'filled' &&\n    props.$color === 'secondary' &&\n    filledSecondary};\n\n`;\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ ...props }, ref) => {\n    return (\n      <>\n        <GlobalStyle />\n        <StyledButton\n          ref={ref}\n          $color={props.color || 'default'}\n          $size={props.size || 'medium'}\n          $fullWidth={props.fullWidth || false}\n          disabled={props.disabled || false}\n          $variant={props.variant || 'text'}\n          {...props}\n        >\n          {props.children}\n        </StyledButton>\n      </>\n    );\n  }\n);\n","import React from 'react';\nimport styled, { css } from 'styled-components';\nimport { GlobalStyle } from '../styles/theme';\n\nexport interface TypographyProps {\n  color?: 'primary' | 'secondary' | 'primaryText' | 'secondaryText' | 'error';\n  style?:\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'h6'\n    | 'subtitle1'\n    | 'subtitle2'\n    | 'body1'\n    | 'body2'\n    | 'caption'\n    | 'overline';\n  underline?: boolean;\n  bold?: boolean;\n  display?: 'inline' | 'block' | 'inherit';\n  gutter?: boolean;\n  align?: 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';\n  ellipsis?: boolean;\n  textParagraph?: boolean;\n  children?: React.ReactNode;\n}\n\n/**\n * This is to prevent error TS2339: Property '$color', $variant etc does not exist on type,\n * Styled components suggested using $ prefix with a prop when rendering the component. But we don't want consumers to use $ when using this library\n * https://github.com/styled-components/styled-components/issues/3279#issuecomment-695972483.\n **/\ninterface StyledTypographyProps {\n  $color?: TypographyProps['color'];\n  $style?: TypographyProps['style'];\n  $underline?: TypographyProps['underline'];\n  $bold?: TypographyProps['bold'];\n  $display?: TypographyProps['display'];\n  $gutter?: TypographyProps['gutter'];\n  $align?: TypographyProps['align'];\n  $ellipsis?: TypographyProps['ellipsis'];\n  $textParagraph?: TypographyProps['textParagraph'];\n}\n\nconst withEllipsis = css`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nconst gutterBottom = `margin-bottom: var(--typography-gutter);`;\n\nconst paragraph = `margin-bottom: 16px;`;\n\nconst primaryColor = `color: var(--palette-primary-600);`;\n\nconst secondaryColor = `color: var(--palette-secondary-dark);`;\n\nconst primaryTextColor = `color: var(--palette-text-primary);`;\n\nconst secondaryTextColor = `color: var(--palette-text-secondary);`;\n\nconst errorColor = `color: var(--palette-error-main);`;\n\nconst Caption = css`\n  font-size: var(--caption-font-size);\n  line-height: var(--caption-line-height);\n  letter-spacing: var(--caption-letter-spacing);\n`;\n\nconst Overline = css`\n  font-size: var(--overline-font-size);\n  line-height: var(--overline-line-height);\n  letter-spacing: var(--overline-letter-spacing);\n  text-transform: var(--overline-text-transform);\n`;\n\nconst Body2 = css`\n  font-size: var(--body2-font-size);\n  line-height: var(--body2-line-height);\n  letter-spacing: var(--body2-letter-spacing);\n`;\n\nconst Body1 = css`\n  font-size: var(--body1-font-size);\n  line-height: var(--body1-line-height);\n  letter-spacing: var(--body1-letter-spacing);\n`;\n\nconst Subtitle2 = css`\n  font-weight: var(--font-weight-medium);\n  font-size: var(--subtitle2-font-size);\n  line-height: var(--subtitle2-line-height);\n  letter-spacing: var(--subtitle2-letter-spacing);\n`;\n\nconst Subtitle1 = css`\n  font-size: var(--subtitle1-font-size);\n  line-height: var(--subtitle1-line-height);\n  letter-spacing: var(--subtitle1-letter-spacing);\n`;\n\nconst StyledTypography = styled.span<StyledTypographyProps>`\n  font-family: var(--default-font-family);\n  margin: 0;\n  display: ${props => (props.$display ? props.$display : `inherit`)};\n  text-align: ${props => (props.$align ? props.$align : `inherit`)};\n  text-decoration-line: ${props => props.$underline && `underline`};\n  font-weight: ${props =>\n    props.$bold ? `bold` : `var(--font-weight-regular)`};\n  ${props => props.$ellipsis && props.$display === 'block' && withEllipsis}\n  ${props => props.$textParagraph && paragraph}\n  ${props => props.$gutter && gutterBottom}\n  ${props => props.$color === 'primary' && primaryColor}\n  ${props => props.$color === 'secondary' && secondaryColor}\n  ${props => props.$color === 'secondaryText' && secondaryTextColor}\n  ${props => props.$color === 'error' && errorColor}\n  ${props =>\n    (props.$color === 'primaryText' || !props.$color) && primaryTextColor}\n  ${props => props.$style === 'subtitle1' && Subtitle1}\n  ${props => props.$style === 'subtitle2' && Subtitle2}\n  ${props => props.$style === 'body1' && Body1}\n  ${props => props.$style === 'body2' && Body2}\n  ${props => props.$style === 'overline' && Overline}\n  ${props => props.$style === 'caption' && Caption}\n`;\n\nexport const Typography = React.forwardRef<HTMLSpanElement, TypographyProps>(\n  ({ ...props }, ref) => {\n    return (\n      <>\n        <GlobalStyle />\n        <StyledTypography\n          ref={ref}\n          $color={props.color || 'primaryText'}\n          $style={props.style || 'subtitle1'}\n          $display={props.display || 'inherit'}\n          $gutter={props.gutter || false}\n          $align={props.align || 'inherit'}\n          $ellipsis={props.ellipsis || false}\n          $textParagraph={props.textParagraph || false}\n          $underline={props.underline || false}\n          $bold={props.bold || false}\n          as={props.style}\n        >\n          {props.children}\n        </StyledTypography>\n      </>\n    );\n  }\n);\n"],"names":["GlobalStyle","createGlobalStyle","getRemSize","fontSize","defaultFontSize","htmlFontSize","coefficient","outlined","css","outlinedPrimary","outlinedSecondary","filled","filledPrimary","filledSecondary","StyledButton","styled","button","props","$color","$size","$variant","$fullWidth","disabled","Button","React","forwardRef","ref","color","size","fullWidth","variant","children","withEllipsis","gutterBottom","paragraph","primaryColor","secondaryColor","primaryTextColor","secondaryTextColor","errorColor","Caption","Overline","Body2","Body1","Subtitle2","Subtitle1","StyledTypography","span","$display","$align","$underline","$bold","$ellipsis","$textParagraph","$gutter","$style","Typography","style","display","gutter","align","ellipsis","textParagraph","underline","bold","as"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,WAAW,gBAAGC,wBAAH,g4IAAjB;AA8IA,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,QAAD;AACxB,MAAMC,eAAe,GAAW,EAAhC;AACA,MAAMC,YAAY,GAAW,EAA7B;AACA,MAAMC,WAAW,GAAWF,eAAe,GAAG,EAA9C;AACA,SAAQD,QAAQ,GAAGE,YAAZ,GAA4BC,WAAnC;AACD,CALM;;;ACpHP,IAAMC,QAAQ,gBAAGC,UAAH,ycAAd;AAcA,IAAMC,eAAe,gBAAGD,UAAH,gjBAArB;AAkBA,IAAME,iBAAiB,gBAAGF,UAAH,ogBAAvB;AAiBA,IAAMG,MAAM,gBAAGH,UAAH,0lBAAZ;AAqBA,IAAMI,aAAa,gBAAGJ,UAAH,8XAAnB;AAYA,IAAMK,eAAe,gBAAGL,UAAH,oYAArB;AAYA,IAAMM,YAAY,gBAAGC,eAAM,CAACC,MAAV,kkBASZ,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,MAAN,KAAiB,SAAjB,IACAV,UADA,kSADK;AAAA,CATO,EAsBZ,UAAAS,KAAK;AAAA,SACLA,KAAK,CAACC,MAAN,KAAiB,WAAjB,IACAV,UADA,uSADK;AAAA,CAtBO,EAmCZ,UAAAS,KAAK;AAAA,SACLA,KAAK,CAACE,KAAN,KAAgB,OAAhB,IACAX,UADA,gJAGeN,UAAU,CAAC,EAAD,CAHzB,CADK;AAAA,CAnCO,EA2CZ,UAAAe,KAAK;AAAA,SACLA,KAAK,CAACE,KAAN,KAAgB,OAAhB,IACAX,UADA,gJAGeN,UAAU,CAAC,EAAD,CAHzB,CADK;AAAA,CA3CO,EAmDZ,UAAAe,KAAK;AAAA,SAAIA,KAAK,CAACG,QAAN,KAAmB,UAAnB,IAAiCb,QAArC;AAAA,CAnDO,EAsDZ,UAAAU,KAAK;AAAA,SAAIA,KAAK,CAACG,QAAN,KAAmB,QAAnB,IAA+BT,MAAnC;AAAA,CAtDO,EAuDZ,UAAAM,KAAK;AAAA,SACLA,KAAK,CAACI,UAAN,IACAb,UADA,4GADK;AAAA,CAvDO,EA4DZ,UAAAS,KAAK;AAAA,SACLA,KAAK,CAACK,QAAN,IACAd,UADA,6KADK;AAAA,CA5DO,EAkEZ,UAAAS,KAAK;AAAA,SACLA,KAAK,CAACG,QAAN,KAAmB,UAAnB,IACAH,KAAK,CAACC,MAAN,KAAiB,SADjB,IAEAT,eAHK;AAAA,CAlEO,EAsEZ,UAAAQ,KAAK;AAAA,SACLA,KAAK,CAACG,QAAN,KAAmB,UAAnB,IACAH,KAAK,CAACC,MAAN,KAAiB,WADjB,IAEAR,iBAHK;AAAA,CAtEO,EA0EZ,UAAAO,KAAK;AAAA,SACLA,KAAK,CAACG,QAAN,KAAmB,QAAnB,IACAH,KAAK,CAACC,MAAN,KAAiB,SADjB,IAEAN,aAHK;AAAA,CA1EO,EA8Ed,UAAAK,KAAK;AAAA,SACLA,KAAK,CAACG,QAAN,KAAmB,QAAnB,IACAH,KAAK,CAACC,MAAN,KAAiB,WADjB,IAEAL,eAHK;AAAA,CA9ES,CAAlB;AAqFA,IAAaU,MAAM,gBAAGC,KAAK,CAACC,UAAN,CACpB,gBAAeC,GAAf;MAAMT;;AACJ,SACEO,mBAAA,eAAA,MAAA,EACEA,mBAAA,CAACxB,WAAD,MAAA,CADF,EAEEwB,mBAAA,CAACV,YAAD;AACEY,IAAAA,GAAG,EAAEA;cACGT,KAAK,CAACU,KAAN,IAAe;aAChBV,KAAK,CAACW,IAAN,IAAc;kBACTX,KAAK,CAACY,SAAN,IAAmB;AAC/BP,IAAAA,QAAQ,EAAEL,KAAK,CAACK,QAAN,IAAkB;gBAClBL,KAAK,CAACa,OAAN,IAAiB;KACvBb,MAPN,EASGA,KAAK,CAACc,QATT,CAFF,CADF;AAgBD,CAlBmB,CAAf;;;ACjKP,IAAMC,YAAY,gBAAGxB,UAAH,sKAAlB;AAMA,IAAMyB,YAAY,6CAAlB;AAEA,IAAMC,SAAS,yBAAf;AAEA,IAAMC,YAAY,uCAAlB;AAEA,IAAMC,cAAc,0CAApB;AAEA,IAAMC,gBAAgB,wCAAtB;AAEA,IAAMC,kBAAkB,0CAAxB;AAEA,IAAMC,UAAU,sCAAhB;AAEA,IAAMC,OAAO,gBAAGhC,UAAH,qOAAb;AAMA,IAAMiC,QAAQ,gBAAGjC,UAAH,2RAAd;AAOA,IAAMkC,KAAK,gBAAGlC,UAAH,+NAAX;AAMA,IAAMmC,KAAK,gBAAGnC,UAAH,+NAAX;AAMA,IAAMoC,SAAS,gBAAGpC,UAAH,sRAAf;AAOA,IAAMqC,SAAS,gBAAGrC,UAAH,2OAAf;AAMA,IAAMsC,gBAAgB,gBAAG/B,eAAM,CAACgC,IAAV,sWAGT,UAAA9B,KAAK;AAAA,SAAKA,KAAK,CAAC+B,QAAN,GAAiB/B,KAAK,CAAC+B,QAAvB,YAAL;AAAA,CAHI,EAIN,UAAA/B,KAAK;AAAA,SAAKA,KAAK,CAACgC,MAAN,GAAehC,KAAK,CAACgC,MAArB,YAAL;AAAA,CAJC,EAKI,UAAAhC,KAAK;AAAA,SAAIA,KAAK,CAACiC,UAAN,eAAJ;AAAA,CALT,EAML,UAAAjC,KAAK;AAAA,SAClBA,KAAK,CAACkC,KAAN,wCADkB;AAAA,CANA,EAQlB,UAAAlC,KAAK;AAAA,SAAIA,KAAK,CAACmC,SAAN,IAAmBnC,KAAK,CAAC+B,QAAN,KAAmB,OAAtC,IAAiDhB,YAArD;AAAA,CARa,EASlB,UAAAf,KAAK;AAAA,SAAIA,KAAK,CAACoC,cAAN,IAAwBnB,SAA5B;AAAA,CATa,EAUlB,UAAAjB,KAAK;AAAA,SAAIA,KAAK,CAACqC,OAAN,IAAiBrB,YAArB;AAAA,CAVa,EAWlB,UAAAhB,KAAK;AAAA,SAAIA,KAAK,CAACC,MAAN,KAAiB,SAAjB,IAA8BiB,YAAlC;AAAA,CAXa,EAYlB,UAAAlB,KAAK;AAAA,SAAIA,KAAK,CAACC,MAAN,KAAiB,WAAjB,IAAgCkB,cAApC;AAAA,CAZa,EAalB,UAAAnB,KAAK;AAAA,SAAIA,KAAK,CAACC,MAAN,KAAiB,eAAjB,IAAoCoB,kBAAxC;AAAA,CAba,EAclB,UAAArB,KAAK;AAAA,SAAIA,KAAK,CAACC,MAAN,KAAiB,OAAjB,IAA4BqB,UAAhC;AAAA,CAda,EAelB,UAAAtB,KAAK;AAAA,SACL,CAACA,KAAK,CAACC,MAAN,KAAiB,aAAjB,IAAkC,CAACD,KAAK,CAACC,MAA1C,KAAqDmB,gBADhD;AAAA,CAfa,EAiBlB,UAAApB,KAAK;AAAA,SAAIA,KAAK,CAACsC,MAAN,KAAiB,WAAjB,IAAgCV,SAApC;AAAA,CAjBa,EAkBlB,UAAA5B,KAAK;AAAA,SAAIA,KAAK,CAACsC,MAAN,KAAiB,WAAjB,IAAgCX,SAApC;AAAA,CAlBa,EAmBlB,UAAA3B,KAAK;AAAA,SAAIA,KAAK,CAACsC,MAAN,KAAiB,OAAjB,IAA4BZ,KAAhC;AAAA,CAnBa,EAoBlB,UAAA1B,KAAK;AAAA,SAAIA,KAAK,CAACsC,MAAN,KAAiB,OAAjB,IAA4Bb,KAAhC;AAAA,CApBa,EAqBlB,UAAAzB,KAAK;AAAA,SAAIA,KAAK,CAACsC,MAAN,KAAiB,UAAjB,IAA+Bd,QAAnC;AAAA,CArBa,EAsBlB,UAAAxB,KAAK;AAAA,SAAIA,KAAK,CAACsC,MAAN,KAAiB,SAAjB,IAA8Bf,OAAlC;AAAA,CAtBa,CAAtB;AAyBA,IAAagB,UAAU,gBAAGhC,KAAK,CAACC,UAAN,CACxB,gBAAeC,GAAf;MAAMT;;AACJ,SACEO,mBAAA,eAAA,MAAA,EACEA,mBAAA,CAACxB,WAAD,MAAA,CADF,EAEEwB,mBAAA,CAACsB,gBAAD;AACEpB,IAAAA,GAAG,EAAEA;cACGT,KAAK,CAACU,KAAN,IAAe;cACfV,KAAK,CAACwC,KAAN,IAAe;gBACbxC,KAAK,CAACyC,OAAN,IAAiB;eAClBzC,KAAK,CAAC0C,MAAN,IAAgB;cACjB1C,KAAK,CAAC2C,KAAN,IAAe;iBACZ3C,KAAK,CAAC4C,QAAN,IAAkB;sBACb5C,KAAK,CAAC6C,aAAN,IAAuB;kBAC3B7C,KAAK,CAAC8C,SAAN,IAAmB;aACxB9C,KAAK,CAAC+C,IAAN,IAAc;AACrBC,IAAAA,EAAE,EAAEhD,KAAK,CAACwC;GAXZ,EAaGxC,KAAK,CAACc,QAbT,CAFF,CADF;AAoBD,CAtBuB,CAAnB;;;;;"}