odaptos_design_system 0.1.1 → 1.0.0

package/dist/Buttons/Button.d.ts

@@ -0,0 +1,6 @@
+import React, { HTMLAttributes } from 'react';
+export interface Props extends HTMLAttributes<HTMLButtonElement> {
+    variant: 'text' | 'icon';
+    children: string;
+}
+export declare const Button: ({ variant, children, ...props }: Props) => React.JSX.Element;

package/dist/Color Guide/colors.d.ts

@@ -0,0 +1,6 @@
+interface ColorPalette {
+    [key: string]: string;
+}
+declare const colors: ColorPalette;
+export default colors;
+export declare const getColor: (colorName: string, shade: string) => string | undefined;

package/dist/Typography/Caption.d.ts

@@ -0,0 +1,12 @@
+import React, { HTMLAttributes } from 'react';
+import './Caption.css';
+interface CaptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    /** Text display in the caption  */
+    text: string;
+    color?: string;
+    className?: string;
+    uppercase?: boolean;
+}
+/** This text should only be used for the captions  */
+export declare const Caption: ({ text, color, className, uppercase, ...props }: CaptionProps) => React.JSX.Element;
+export {};

package/dist/Typography/Text.d.ts

@@ -0,0 +1,15 @@
+import React, { HTMLAttributes } from 'react';
+import './Text.css';
+interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
+    /** Text display */
+    text: string;
+    color?: string;
+    size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
+    titleWeight?: 'semi-bold' | 'bold' | 'regular';
+    italic?: boolean;
+    textDecoration?: 'underline' | 'line-through';
+    className?: string;
+}
+/** This text should be use to display basic text */
+export declare const Text: ({ text, color, size, titleWeight, italic, textDecoration, className, ...props }: TextProps) => React.JSX.Element;
+export {};

package/dist/Typography/TextForButton.d.ts

@@ -0,0 +1,13 @@
+import React, { HTMLAttributes } from 'react';
+import './TextForButton.css';
+interface TextForButtonProps extends HTMLAttributes<HTMLParagraphElement> {
+    /** Text display in the Button component  */
+    text: string;
+    color?: string;
+    bold?: boolean;
+    className?: string;
+    size?: 'sm' | 'base' | 'lg';
+}
+/** This button should only be used in the Button component  */
+export declare const TextForButton: ({ text, color, bold, className, size, ...props }: TextForButtonProps) => React.JSX.Element;
+export {};

package/dist/Typography/TextForDropDownItem.d.ts

@@ -0,0 +1,13 @@
+import React, { HTMLAttributes } from 'react';
+import './TextForDropDownItem.css';
+interface TextForDropDownItemProps extends HTMLAttributes<HTMLParagraphElement> {
+    /** Text display in the Dropdown item component  */
+    text: string;
+    color?: string;
+    bold?: boolean;
+    className?: string;
+    size?: 'xs' | 'sm' | 'base';
+}
+/** This text should only be used for the dropdown items text  */
+export declare const TextForDropDownItem: ({ text, color, bold, size, className, ...props }: TextForDropDownItemProps) => React.JSX.Element;
+export {};

package/dist/Typography/Title.d.ts

@@ -0,0 +1,14 @@
+import React, { HTMLAttributes } from 'react';
+import './Title.css';
+interface TitleProps extends HTMLAttributes<HTMLParagraphElement> {
+    /** Text display in the Title  */
+    text: string;
+    color?: string;
+    size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
+    titleWeight?: 'semi-bold' | 'bold' | 'regular';
+    italic?: boolean;
+    className?: string;
+}
+/** This text should only be used to display titles */
+export declare const Title: ({ text, color, size, titleWeight, italic, className, ...props }: TitleProps) => React.JSX.Element;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Buttons/Button';
+export * from './Typography/Caption';
+export * from './Typography/Text';
+export * from './Typography/TextForButton';
+export * from './Typography/TextForDropDownItem';
+export * from './Typography/Title';

package/dist/odaptos_design_system.cjs.development.css

@@ -0,0 +1,5 @@
+@import "../../../example/index.css";.text{font-family:var(--sdFontFamilyOpenSans);font-size:var(--sdFontSizeXs);font-style:normal;font-weight:var(--sdFontWeightRegular);letter-spacing:var(--sdLetterSpacingButtons);line-height:var(--sdLineHeight130);margin:unset;padding:1px 0;text-align:left}.text.uppercase{text-transform:var(--sdTextCaseUppercase)}
+@import "../../../example/index.css";.text{font-family:var(--sdFontFamilyOpenSans);font-size:var(--sdFontSizeXs);font-style:normal;font-weight:var(--sdFontWeightRegular);letter-spacing:var(--sdLetterSpacingButtons);line-height:var(--sdLineHeight130);margin:unset;text-align:left}.underline{-webkit-text-decoration:var(--sdUnderline);text-decoration:var(--sdUnderline)}.line-through{-webkit-text-decoration:var(--sdLineThrough);text-decoration:var(--sdLineThrough)}.text.xs.regular{font:var(--sdTypoTextNoDecorationRegularXs);padding:1px 0}.text.sm.regular{font:var(--sdTypoTextNoDecorationRegularSm);padding:1px 0 3px}.text.base.regular{font:var(--sdTypoTextNoDecorationRegularBase);padding:2px 0}.text.lg.regular{font:var(--sdTypoTextNoDecorationRegularLg);padding:2px 0}.text.xl.regular{font:var(--sdTypoTextNoDecorationRegularXl);padding:1px 0 3px}.text.xxl.regular{font:var(--sdTypoTextNoDecorationRegular2xl);padding:0}.text.xxxl.regular{font:var(--sdTypoTextNoDecorationRegular3xl);padding:1px 0 3px}.text.xxxxl.regular{font:var(--sdTypoTextNoDecorationRegular4xl);padding:3px 0 1px}.text.xs.regular.italic{font:var(--sdTypoTextNoDecorationItalicXs);padding:1px 0 2px}.text.sm.regular.italic{font:var(--sdTypoTextNoDecorationItalicSm);padding:1px 0 3px}.text.base.regular.italic{font:var(--sdTypoTextNoDecorationItalicBase);padding:2px 0}.text.lg.regular.italic{font:var(--sdTypoTextNoDecorationItalicLg);padding:2px 0}.text.xl.regular.italic{font:var(--sdTypoTextNoDecorationItalicXl);padding:1px 0 3px}.text.xxl.regular.italic{font:var(--sdTypoTextNoDecorationItalic2xl);padding:0}.text.xxxl.regular.italic{font:var(--sdTypoTextNoDecorationItalic3xl);padding:1px 0 3px}.text.xxxxl.regular.italic{font:var(--sdTypoTextNoDecorationItalic4xl);padding:3px 0 1px}.text.xs.bold{font:var(--sdTypoTextNoDecorationBoldXs);padding:1px 0 2px}.text.sm.bold{font:var(--sdTypoTextNoDecorationBoldSm);padding:1px 0 3px}.text.base.bold{font:var(--sdTypoTextNoDecorationBoldBase);padding:2px 0}.text.lg.bold{font:var(--sdTypoTextNoDecorationBoldLg);padding:2px 0}.text.xl.bold{font:var(--sdTypoTextNoDecorationBoldXl);padding:1px 0 3px}.text.xxl.bold{font:var(--sdTypoTextNoDecorationBold2xl);padding:0}.text.xxxl.bold{font:var(--sdTypoTextNoDecorationBold3xl);padding:1px 0 3px}.text.xxxxl.bold{font:var(--sdTypoTextNoDecorationBold4xl);padding:3px 0 1px}.text.xs.bold.italic{font:var(--sdTypoTextNoDecorationBoldItalicXs);padding:1px 0 2px}.text.sm.bold.italic{font:var(--sdTypoTextNoDecorationBoldItalicSm);padding:1px 0 3px}.text.base.bold.italic{font:var(--sdTypoTextNoDecorationBoldItalicBase);padding:2px 0}.text.lg.bold.italic{font:var(--sdTypoTextNoDecorationBoldItalicLg);padding:2px 0}.text.xl.bold.italic{font:var(--sdTypoTextNoDecorationBoldItalicXl);padding:1px 0 3px}.text.xxl.bold.italic{font:var(--sdTypoTextNoDecorationBoldItalic2xl);padding:0}.text.xxxl.bold.italic{font:var(--sdTypoTextNoDecorationBoldItalic3xl);padding:1px 0 3px}.text.xxxxl.bold.italic{font:var(--sdTypoTextNoDecorationBoldItalic4xl);padding:3px 0 1px}.text.xs.semi-bold{font:var(--sdTypoTextNoDecorationSemiBoldXs);padding:1px 0 2px}.text.sm.semi-bold{font:var(--sdTypoTextNoDecorationSemiBoldSm);padding:1px 0 3px}.text.base.semi-bold{font:var(--sdTypoTextNoDecorationSemiBoldBase);padding:2px 0}.text.lg.semi-bold{font:var(--sdTypoTextNoDecorationSemiBoldLg);padding:2px 0}.text.xl.semi-bold{font:var(--sdTypoTextNoDecorationSemiBoldXl);padding:1px 0 3px}.text.xxl.semi-bold{font:var(--sdTypoTextNoDecorationSemiBold2xl);padding:0}.text.xxxl.semi-bold{font:var(--sdTypoTextNoDecorationSemiBold3xl);padding:1px 0 3px}.text.xxxxl.semi-bold{font:var(--sdTypoTextNoDecorationSemiBold4xl);padding:3px 0 1px}.text.xs.semi-bold.italic{font:var(--sdTypoTextNoDecorationSemiBoldItalicXs);padding:1px 0 2px}.text.sm.semi-bold.italic{font:var(--sdTypoTextNoDecorationSemiBoldItalicSm);padding:1px 0 3px}.text.base.semi-bold.italic{font:var(--sdTypoTextNoDecorationSemiBoldItalicBase);padding:2px 0}.text.lg.semi-bold.italic{font:var(--sdTypoTextNoDecorationSemiBoldItalicLg);padding:2px 0}.text.xl.semi-bold.italic{font:var(--sdTypoTextNoDecorationSemiBoldItalicXl);padding:1px 0 3px}.text.xxl.semi-bold.italic{font:var(--sdTypoTextNoDecorationSemiBoldItalic2xl);padding:0}.text.xxxl.semi-bold.italic{font:var(--sdTypoTextNoDecorationSemiBoldItalic3xl);padding:1px 0 3px}.text.xxxxl.semi-bold.italic{font:var(--sdTypoTextNoDecorationSemiBoldItalic4xl);padding:3px 0 1px}
+@import "../../../example/index.css";.text{font-family:var(--sdFontFamilyPoppins);font-weight:var(--sdFontWeightMedium);letter-spacing:var(--sdLetterSpacingButtons);margin:unset;padding:2px 0;text-align:left}.text.bold{font-weight:var(--sdFontWeightSemibold)}.sm{font-size:var(--sdFontSizeSm);line-height:var(--sdLineHeight140)}.base,.lg{font-size:var(--sdFontSizeBase);line-height:var(--sdLineHeight150)}
+@import "../../../example/index.css";.text{font-family:var(--sdFontFamilyOpenSans);font-weight:var(--sdFontWeightRegular);padding:2px 0}.xs{font-size:var(--sdFontSizeXs);letter-spacing:var(--sdLetterSpacingButtons);line-height:var(--sdLineHeight130)}.sm{font-size:var(--sdFontSizeSm);line-height:var(--sdLineHeight140)}.base{font-size:var(--sdFontSizeBase);line-height:var(--sdLineHeight150)}.text.bold{font-weight:var(--sdFontWeightBold)}.text.bold.xs{line-height:var(--sdLineHeight120)}
+@import "../../../example/index.css";.text{font-family:var(--sdFontFamilyPoppins);font-weight:var(--sdFontWeightSemibold);letter-spacing:var(--sdLetterSpacingHeadings);margin:unset;text-align:left}.italic{font-style:italic}.xs{padding:1px 0}.sm,.xs{font-size:var(--sdFontSizeSm);line-height:var(--sdLineHeight140)}.sm{padding:3px 0 1px}.base{font-size:var(--sdFontSizeBase);line-height:var(--sdLineHeight150);padding:2px 0}.lg{font-size:var(--sdFontSizeLg);line-height:var(--sdLineHeight140);padding:3px 0 1px}.xl{font-size:var(--sdFontSizeXl);padding:2px 0}.xl,.xxl{line-height:var(--sdLineHeight150)}.xxl{font-size:var(--sdFontSize2xl);padding:1px 0 3px}.xxxl{font-size:var(--sdFontSize3xl);line-height:150%;padding:3px 0 1px}.xxxxl{font-size:var(--sdFontSize4xl);line-height:var(--sdLineHeight150);padding:2px 0}.bold{font-weight:var(--sdFontWeightBold)}.semi-bold{font-weight:var(--sdFontWeightSemibold)}.regular{font-weight:var(--sdFontWeightRegular)}

package/dist/odaptos_design_system.cjs.development.js

@@ -0,0 +1,108 @@
+'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'));
+
+const Button = ({
+  variant,
+  children,
+  ...props
+}) => /*#__PURE__*/React.createElement("button", Object.assign({}, props), children);
+
+/** This text should only be used for the captions  */
+const Caption = ({
+  text = 'Caption text',
+  color = 'black',
+  className,
+  uppercase = true,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("p", Object.assign({}, props, {
+    style: {
+      color: color
+    },
+    className: `text ${uppercase && 'uppercase'} ${className}`
+  }), text);
+};
+
+/** This text should be use to display basic text */
+const Text = ({
+  text = 'Component to use for the basic texts',
+  color = 'black',
+  size = 'base',
+  titleWeight = 'semi-bold',
+  italic = false,
+  textDecoration,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("p", Object.assign({}, props, {
+    style: {
+      color: color
+    },
+    className: `text ${italic && 'italic'} ${titleWeight} ${textDecoration && textDecoration} ${className} ${size}`
+  }), text);
+};
+
+/** This button should only be used in the Button component  */
+const TextForButton = ({
+  text = 'Text display in button component',
+  color = 'black',
+  bold = false,
+  className,
+  size = 'base',
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("p", Object.assign({}, props, {
+    style: {
+      color: color
+    },
+    className: `text ${bold && 'bold'} ${className} ${size}`
+  }), text);
+};
+
+/** This text should only be used for the dropdown items text  */
+const TextForDropDownItem = ({
+  text = 'Text for drop down item',
+  color = 'black',
+  bold = false,
+  size = 'base',
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("p", Object.assign({}, props, {
+    style: {
+      color: color
+    },
+    className: `text ${bold && 'bold'} ${size} ${className}`
+  }), text);
+};
+
+/** This text should only be used to display titles */
+const Title = ({
+  text = 'Component to use for the titles',
+  color = 'black',
+  size = 'base',
+  titleWeight = 'semi-bold',
+  italic = false,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("p", Object.assign({}, props, {
+    style: {
+      color: color
+    },
+    className: `text ${italic && 'italic'} ${titleWeight} ${className} ${size}`
+  }), text);
+};
+
+exports.Button = Button;
+exports.Caption = Caption;
+exports.Text = Text;
+exports.TextForButton = TextForButton;
+exports.TextForDropDownItem = TextForDropDownItem;
+exports.Title = Title;
+//# sourceMappingURL=odaptos_design_system.cjs.development.js.map

package/dist/odaptos_design_system.cjs.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"odaptos_design_system.cjs.development.js","sources":["../src/Buttons/Button.tsx","../src/Typography/Caption.tsx","../src/Typography/Text.tsx","../src/Typography/TextForButton.tsx","../src/Typography/TextForDropDownItem.tsx","../src/Typography/Title.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\n\nexport interface Props extends HTMLAttributes<HTMLButtonElement> {\n  variant: 'text' | 'icon';\n  children: string;\n}\n\nexport const Button = ({ variant, children, ...props }: Props) => (\n  <button {...props}>{children}</button>\n);\n","import React, { HTMLAttributes } from 'react';\nimport './Caption.css';\n\ninterface CaptionProps extends HTMLAttributes<HTMLParagraphElement> {\n  /** Text display in the caption  */\n  text: string;\n  color?: string;\n  className?: string;\n  uppercase?: boolean;\n}\n\n/** This text should only be used for the captions  */\nexport const Caption = ({\n  text = 'Caption text',\n  color = 'black',\n  className,\n  uppercase = true,\n  ...props\n}: CaptionProps) => {\n  return (\n    <p\n      {...props}\n      style={{ color: color }}\n      className={`text ${uppercase && 'uppercase'} ${className}`}\n    >\n      {text}\n    </p>\n  );\n};\n","import React, { HTMLAttributes } from 'react';\nimport './Text.css';\n\ninterface TextProps extends HTMLAttributes<HTMLParagraphElement> {\n  /** Text display */\n  text: string;\n  color?: string;\n  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';\n  titleWeight?: 'semi-bold' | 'bold' | 'regular';\n  italic?: boolean;\n  textDecoration?: 'underline' | 'line-through';\n  className?: string;\n}\n\n/** This text should be use to display basic text */\nexport const Text = ({\n  text = 'Component to use for the basic texts',\n  color = 'black',\n  size = 'base',\n  titleWeight = 'semi-bold',\n  italic = false,\n  textDecoration,\n  className,\n  ...props\n}: TextProps) => {\n  return (\n    <p\n      {...props}\n      style={{ color: color }}\n      className={`text ${italic && 'italic'} ${titleWeight} ${textDecoration &&\n        textDecoration} ${className} ${size}`}\n    >\n      {text}\n    </p>\n  );\n};\n","import React, { HTMLAttributes } from 'react';\nimport './TextForButton.css';\n\ninterface TextForButtonProps extends HTMLAttributes<HTMLParagraphElement> {\n  /** Text display in the Button component  */\n  text: string;\n  color?: string;\n  bold?: boolean;\n  className?: string;\n  size?: 'sm' | 'base' | 'lg';\n}\n\n/** This button should only be used in the Button component  */\nexport const TextForButton = ({\n  text = 'Text display in button component',\n  color = 'black',\n  bold = false,\n  className,\n  size = 'base',\n  ...props\n}: TextForButtonProps) => {\n  return (\n    <p\n      {...props}\n      style={{ color: color }}\n      className={`text ${bold && 'bold'} ${className} ${size}`}\n    >\n      {text}\n    </p>\n  );\n};\n","import React, { HTMLAttributes } from 'react';\nimport './TextForDropDownItem.css';\n\ninterface TextForDropDownItemProps\n  extends HTMLAttributes<HTMLParagraphElement> {\n  /** Text display in the Dropdown item component  */\n  text: string;\n  color?: string;\n  bold?: boolean;\n  className?: string;\n  size?: 'xs' | 'sm' | 'base';\n}\n\n/** This text should only be used for the dropdown items text  */\nexport const TextForDropDownItem = ({\n  text = 'Text for drop down item',\n  color = 'black',\n  bold = false,\n  size = 'base',\n  className,\n  ...props\n}: TextForDropDownItemProps) => {\n  return (\n    <p\n      {...props}\n      style={{ color: color }}\n      className={`text ${bold && 'bold'} ${size} ${className}`}\n    >\n      {text}\n    </p>\n  );\n};\n","import React, { HTMLAttributes } from 'react';\nimport './Title.css';\n\ninterface TitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  /** Text display in the Title  */\n  text: string;\n  color?: string;\n  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';\n  titleWeight?: 'semi-bold' | 'bold' | 'regular';\n  italic?: boolean;\n  className?: string;\n}\n\n/** This text should only be used to display titles */\nexport const Title = ({\n  text = 'Component to use for the titles',\n  color = 'black',\n  size = 'base',\n  titleWeight = 'semi-bold',\n  italic = false,\n  className,\n  ...props\n}: TitleProps) => {\n  return (\n    <p\n      {...props}\n      style={{ color: color }}\n      className={`text ${italic &&\n        'italic'} ${titleWeight} ${className} ${size}`}\n    >\n      {text}\n    </p>\n  );\n};\n"],"names":["Button","variant","children","props","React","Caption","text","color","className","uppercase","style","Text","size","titleWeight","italic","textDecoration","TextForButton","bold","TextForDropDownItem","Title"],"mappings":";;;;;;;;MAOaA,MAAM,GAAGA,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAE,GAAGC;CAAc,kBAC3DC,gDAAYD,KAAK,GAAGD,QAAQ;;ACG9B;AACA,MAAaG,OAAO,GAAGA,CAAC;EACtBC,IAAI,GAAG,cAAc;EACrBC,KAAK,GAAG,OAAO;EACfC,SAAS;EACTC,SAAS,GAAG,IAAI;EAChB,GAAGN;CACU;EACb,oBACEC,2CACMD,KAAK;IACTO,KAAK,EAAE;MAAEH,KAAK,EAAEA;KAAO;IACvBC,SAAS,UAAUC,SAAS,IAAI,eAAeD;MAE9CF,IAAI,CACH;AAER,CAAC;;ACdD;AACA,MAAaK,IAAI,GAAGA,CAAC;EACnBL,IAAI,GAAG,sCAAsC;EAC7CC,KAAK,GAAG,OAAO;EACfK,IAAI,GAAG,MAAM;EACbC,WAAW,GAAG,WAAW;EACzBC,MAAM,GAAG,KAAK;EACdC,cAAc;EACdP,SAAS;EACT,GAAGL;CACO;EACV,oBACEC,2CACMD,KAAK;IACTO,KAAK,EAAE;MAAEH,KAAK,EAAEA;KAAO;IACvBC,SAAS,UAAUM,MAAM,IAAI,YAAYD,eAAeE,cAAc,IACpEA,kBAAkBP,aAAaI;MAEhCN,IAAI,CACH;AAER,CAAC;;ACvBD;AACA,MAAaU,aAAa,GAAGA,CAAC;EAC5BV,IAAI,GAAG,kCAAkC;EACzCC,KAAK,GAAG,OAAO;EACfU,IAAI,GAAG,KAAK;EACZT,SAAS;EACTI,IAAI,GAAG,MAAM;EACb,GAAGT;CACgB;EACnB,oBACEC,2CACMD,KAAK;IACTO,KAAK,EAAE;MAAEH,KAAK,EAAEA;KAAO;IACvBC,SAAS,UAAUS,IAAI,IAAI,UAAUT,aAAaI;MAEjDN,IAAI,CACH;AAER,CAAC;;ACjBD;AACA,MAAaY,mBAAmB,GAAGA,CAAC;EAClCZ,IAAI,GAAG,yBAAyB;EAChCC,KAAK,GAAG,OAAO;EACfU,IAAI,GAAG,KAAK;EACZL,IAAI,GAAG,MAAM;EACbJ,SAAS;EACT,GAAGL;CACsB;EACzB,oBACEC,2CACMD,KAAK;IACTO,KAAK,EAAE;MAAEH,KAAK,EAAEA;KAAO;IACvBC,SAAS,UAAUS,IAAI,IAAI,UAAUL,QAAQJ;MAE5CF,IAAI,CACH;AAER,CAAC;;AClBD;AACA,MAAaa,KAAK,GAAGA,CAAC;EACpBb,IAAI,GAAG,iCAAiC;EACxCC,KAAK,GAAG,OAAO;EACfK,IAAI,GAAG,MAAM;EACbC,WAAW,GAAG,WAAW;EACzBC,MAAM,GAAG,KAAK;EACdN,SAAS;EACT,GAAGL;CACQ;EACX,oBACEC,2CACMD,KAAK;IACTO,KAAK,EAAE;MAAEH,KAAK,EAAEA;KAAO;IACvBC,SAAS,UAAUM,MAAM,IACvB,YAAYD,eAAeL,aAAaI;MAEzCN,IAAI,CACH;AAER,CAAC;;;;;;;;;"}

package/dist/odaptos_design_system.cjs.production.min.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e;exports.Button=({children:e,...s})=>t.createElement("button",Object.assign({},s),e),exports.Caption=({text:e="Caption text",color:s="black",className:o,uppercase:a=!0,...l})=>t.createElement("p",Object.assign({},l,{style:{color:s},className:`text ${a&&"uppercase"} ${o}`}),e),exports.Text=({text:e="Component to use for the basic texts",color:s="black",size:o="base",titleWeight:a="semi-bold",italic:l=!1,textDecoration:c,className:r,...i})=>t.createElement("p",Object.assign({},i,{style:{color:s},className:`text ${l&&"italic"} ${a} ${c&&c} ${r} ${o}`}),e),exports.TextForButton=({text:e="Text display in button component",color:s="black",bold:o=!1,className:a,size:l="base",...c})=>t.createElement("p",Object.assign({},c,{style:{color:s},className:`text ${o&&"bold"} ${a} ${l}`}),e),exports.TextForDropDownItem=({text:e="Text for drop down item",color:s="black",bold:o=!1,size:a="base",className:l,...c})=>t.createElement("p",Object.assign({},c,{style:{color:s},className:`text ${o&&"bold"} ${a} ${l}`}),e),exports.Title=({text:e="Component to use for the titles",color:s="black",size:o="base",titleWeight:a="semi-bold",italic:l=!1,className:c,...r})=>t.createElement("p",Object.assign({},r,{style:{color:s},className:`text ${l&&"italic"} ${a} ${c} ${o}`}),e);
+//# sourceMappingURL=odaptos_design_system.cjs.production.min.js.map

package/dist/odaptos_design_system.cjs.production.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"odaptos_design_system.cjs.production.min.js","sources":["../src/Buttons/Button.tsx","../src/Typography/Caption.tsx","../src/Typography/Text.tsx","../src/Typography/TextForButton.tsx","../src/Typography/TextForDropDownItem.tsx","../src/Typography/Title.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\n\nexport interface Props extends HTMLAttributes<HTMLButtonElement> {\n  variant: 'text' | 'icon';\n  children: string;\n}\n\nexport const Button = ({ variant, children, ...props }: Props) => (\n  <button {...props}>{children}</button>\n);\n","import React, { HTMLAttributes } from 'react';\nimport './Caption.css';\n\ninterface CaptionProps extends HTMLAttributes<HTMLParagraphElement> {\n  /** Text display in the caption  */\n  text: string;\n  color?: string;\n  className?: string;\n  uppercase?: boolean;\n}\n\n/** This text should only be used for the captions  */\nexport const Caption = ({\n  text = 'Caption text',\n  color = 'black',\n  className,\n  uppercase = true,\n  ...props\n}: CaptionProps) => {\n  return (\n    <p\n      {...props}\n      style={{ color: color }}\n      className={`text ${uppercase && 'uppercase'} ${className}`}\n    >\n      {text}\n    </p>\n  );\n};\n","import React, { HTMLAttributes } from 'react';\nimport './Text.css';\n\ninterface TextProps extends HTMLAttributes<HTMLParagraphElement> {\n  /** Text display */\n  text: string;\n  color?: string;\n  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';\n  titleWeight?: 'semi-bold' | 'bold' | 'regular';\n  italic?: boolean;\n  textDecoration?: 'underline' | 'line-through';\n  className?: string;\n}\n\n/** This text should be use to display basic text */\nexport const Text = ({\n  text = 'Component to use for the basic texts',\n  color = 'black',\n  size = 'base',\n  titleWeight = 'semi-bold',\n  italic = false,\n  textDecoration,\n  className,\n  ...props\n}: TextProps) => {\n  return (\n    <p\n      {...props}\n      style={{ color: color }}\n      className={`text ${italic && 'italic'} ${titleWeight} ${textDecoration &&\n        textDecoration} ${className} ${size}`}\n    >\n      {text}\n    </p>\n  );\n};\n","import React, { HTMLAttributes } from 'react';\nimport './TextForButton.css';\n\ninterface TextForButtonProps extends HTMLAttributes<HTMLParagraphElement> {\n  /** Text display in the Button component  */\n  text: string;\n  color?: string;\n  bold?: boolean;\n  className?: string;\n  size?: 'sm' | 'base' | 'lg';\n}\n\n/** This button should only be used in the Button component  */\nexport const TextForButton = ({\n  text = 'Text display in button component',\n  color = 'black',\n  bold = false,\n  className,\n  size = 'base',\n  ...props\n}: TextForButtonProps) => {\n  return (\n    <p\n      {...props}\n      style={{ color: color }}\n      className={`text ${bold && 'bold'} ${className} ${size}`}\n    >\n      {text}\n    </p>\n  );\n};\n","import React, { HTMLAttributes } from 'react';\nimport './TextForDropDownItem.css';\n\ninterface TextForDropDownItemProps\n  extends HTMLAttributes<HTMLParagraphElement> {\n  /** Text display in the Dropdown item component  */\n  text: string;\n  color?: string;\n  bold?: boolean;\n  className?: string;\n  size?: 'xs' | 'sm' | 'base';\n}\n\n/** This text should only be used for the dropdown items text  */\nexport const TextForDropDownItem = ({\n  text = 'Text for drop down item',\n  color = 'black',\n  bold = false,\n  size = 'base',\n  className,\n  ...props\n}: TextForDropDownItemProps) => {\n  return (\n    <p\n      {...props}\n      style={{ color: color }}\n      className={`text ${bold && 'bold'} ${size} ${className}`}\n    >\n      {text}\n    </p>\n  );\n};\n","import React, { HTMLAttributes } from 'react';\nimport './Title.css';\n\ninterface TitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  /** Text display in the Title  */\n  text: string;\n  color?: string;\n  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';\n  titleWeight?: 'semi-bold' | 'bold' | 'regular';\n  italic?: boolean;\n  className?: string;\n}\n\n/** This text should only be used to display titles */\nexport const Title = ({\n  text = 'Component to use for the titles',\n  color = 'black',\n  size = 'base',\n  titleWeight = 'semi-bold',\n  italic = false,\n  className,\n  ...props\n}: TitleProps) => {\n  return (\n    <p\n      {...props}\n      style={{ color: color }}\n      className={`text ${italic &&\n        'italic'} ${titleWeight} ${className} ${size}`}\n    >\n      {text}\n    </p>\n  );\n};\n"],"names":["Button","children","props","React","Caption","text","color","className","uppercase","style","Text","size","titleWeight","italic","textDecoration","TextForButton","bold","TextForDropDownItem","Title"],"mappings":"+JAOsBA,EAAYC,SAAAA,KAAaC,KAC7CC,0CAAYD,GAAQD,mBCICG,EACrBC,KAAAA,EAAO,eACPC,MAAAA,EAAQ,QACRC,UAAAA,EACAC,UAAAA,GAAY,KACTN,KAGDC,qCACMD,GACJO,MAAO,CAAEH,MAAOA,GAChBC,kBAAmBC,GAAa,eAAeD,MAE9CF,gBCVaK,EAClBL,KAAAA,EAAO,uCACPC,MAAAA,EAAQ,QACRK,KAAAA,EAAO,OACPC,YAAAA,EAAc,YACdC,OAAAA,GAAS,EACTC,eAAAA,EACAP,UAAAA,KACGL,KAGDC,qCACMD,GACJO,MAAO,CAAEH,MAAOA,GAChBC,kBAAmBM,GAAU,YAAYD,KAAeE,GACtDA,KAAkBP,KAAaI,MAEhCN,yBCnBsBU,EAC3BV,KAAAA,EAAO,mCACPC,MAAAA,EAAQ,QACRU,KAAAA,GAAO,EACPT,UAAAA,EACAI,KAAAA,EAAO,UACJT,KAGDC,qCACMD,GACJO,MAAO,CAAEH,MAAOA,GAChBC,kBAAmBS,GAAQ,UAAUT,KAAaI,MAEjDN,+BCb4BY,EACjCZ,KAAAA,EAAO,0BACPC,MAAAA,EAAQ,QACRU,KAAAA,GAAO,EACPL,KAAAA,EAAO,OACPJ,UAAAA,KACGL,KAGDC,qCACMD,GACJO,MAAO,CAAEH,MAAOA,GAChBC,kBAAmBS,GAAQ,UAAUL,KAAQJ,MAE5CF,iBCdca,EACnBb,KAAAA,EAAO,kCACPC,MAAAA,EAAQ,QACRK,KAAAA,EAAO,OACPC,YAAAA,EAAc,YACdC,OAAAA,GAAS,EACTN,UAAAA,KACGL,KAGDC,qCACMD,GACJO,MAAO,CAAEH,MAAOA,GAChBC,kBAAmBM,GACjB,YAAYD,KAAeL,KAAaI,MAEzCN"}

package/dist/odaptos_design_system.esm.js

@@ -0,0 +1,97 @@
+import React from 'react';
+
+const Button = ({
+  variant,
+  children,
+  ...props
+}) => /*#__PURE__*/React.createElement("button", Object.assign({}, props), children);
+
+/** This text should only be used for the captions  */
+const Caption = ({
+  text = 'Caption text',
+  color = 'black',
+  className,
+  uppercase = true,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("p", Object.assign({}, props, {
+    style: {
+      color: color
+    },
+    className: `text ${uppercase && 'uppercase'} ${className}`
+  }), text);
+};
+
+/** This text should be use to display basic text */
+const Text = ({
+  text = 'Component to use for the basic texts',
+  color = 'black',
+  size = 'base',
+  titleWeight = 'semi-bold',
+  italic = false,
+  textDecoration,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("p", Object.assign({}, props, {
+    style: {
+      color: color
+    },
+    className: `text ${italic && 'italic'} ${titleWeight} ${textDecoration && textDecoration} ${className} ${size}`
+  }), text);
+};
+
+/** This button should only be used in the Button component  */
+const TextForButton = ({
+  text = 'Text display in button component',
+  color = 'black',
+  bold = false,
+  className,
+  size = 'base',
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("p", Object.assign({}, props, {
+    style: {
+      color: color
+    },
+    className: `text ${bold && 'bold'} ${className} ${size}`
+  }), text);
+};
+
+/** This text should only be used for the dropdown items text  */
+const TextForDropDownItem = ({
+  text = 'Text for drop down item',
+  color = 'black',
+  bold = false,
+  size = 'base',
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("p", Object.assign({}, props, {
+    style: {
+      color: color
+    },
+    className: `text ${bold && 'bold'} ${size} ${className}`
+  }), text);
+};
+
+/** This text should only be used to display titles */
+const Title = ({
+  text = 'Component to use for the titles',
+  color = 'black',
+  size = 'base',
+  titleWeight = 'semi-bold',
+  italic = false,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("p", Object.assign({}, props, {
+    style: {
+      color: color
+    },
+    className: `text ${italic && 'italic'} ${titleWeight} ${className} ${size}`
+  }), text);
+};
+
+export { Button, Caption, Text, TextForButton, TextForDropDownItem, Title };
+//# sourceMappingURL=odaptos_design_system.esm.js.map

package/dist/odaptos_design_system.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"odaptos_design_system.esm.js","sources":["../src/Buttons/Button.tsx","../src/Typography/Caption.tsx","../src/Typography/Text.tsx","../src/Typography/TextForButton.tsx","../src/Typography/TextForDropDownItem.tsx","../src/Typography/Title.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\n\nexport interface Props extends HTMLAttributes<HTMLButtonElement> {\n  variant: 'text' | 'icon';\n  children: string;\n}\n\nexport const Button = ({ variant, children, ...props }: Props) => (\n  <button {...props}>{children}</button>\n);\n","import React, { HTMLAttributes } from 'react';\nimport './Caption.css';\n\ninterface CaptionProps extends HTMLAttributes<HTMLParagraphElement> {\n  /** Text display in the caption  */\n  text: string;\n  color?: string;\n  className?: string;\n  uppercase?: boolean;\n}\n\n/** This text should only be used for the captions  */\nexport const Caption = ({\n  text = 'Caption text',\n  color = 'black',\n  className,\n  uppercase = true,\n  ...props\n}: CaptionProps) => {\n  return (\n    <p\n      {...props}\n      style={{ color: color }}\n      className={`text ${uppercase && 'uppercase'} ${className}`}\n    >\n      {text}\n    </p>\n  );\n};\n","import React, { HTMLAttributes } from 'react';\nimport './Text.css';\n\ninterface TextProps extends HTMLAttributes<HTMLParagraphElement> {\n  /** Text display */\n  text: string;\n  color?: string;\n  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';\n  titleWeight?: 'semi-bold' | 'bold' | 'regular';\n  italic?: boolean;\n  textDecoration?: 'underline' | 'line-through';\n  className?: string;\n}\n\n/** This text should be use to display basic text */\nexport const Text = ({\n  text = 'Component to use for the basic texts',\n  color = 'black',\n  size = 'base',\n  titleWeight = 'semi-bold',\n  italic = false,\n  textDecoration,\n  className,\n  ...props\n}: TextProps) => {\n  return (\n    <p\n      {...props}\n      style={{ color: color }}\n      className={`text ${italic && 'italic'} ${titleWeight} ${textDecoration &&\n        textDecoration} ${className} ${size}`}\n    >\n      {text}\n    </p>\n  );\n};\n","import React, { HTMLAttributes } from 'react';\nimport './TextForButton.css';\n\ninterface TextForButtonProps extends HTMLAttributes<HTMLParagraphElement> {\n  /** Text display in the Button component  */\n  text: string;\n  color?: string;\n  bold?: boolean;\n  className?: string;\n  size?: 'sm' | 'base' | 'lg';\n}\n\n/** This button should only be used in the Button component  */\nexport const TextForButton = ({\n  text = 'Text display in button component',\n  color = 'black',\n  bold = false,\n  className,\n  size = 'base',\n  ...props\n}: TextForButtonProps) => {\n  return (\n    <p\n      {...props}\n      style={{ color: color }}\n      className={`text ${bold && 'bold'} ${className} ${size}`}\n    >\n      {text}\n    </p>\n  );\n};\n","import React, { HTMLAttributes } from 'react';\nimport './TextForDropDownItem.css';\n\ninterface TextForDropDownItemProps\n  extends HTMLAttributes<HTMLParagraphElement> {\n  /** Text display in the Dropdown item component  */\n  text: string;\n  color?: string;\n  bold?: boolean;\n  className?: string;\n  size?: 'xs' | 'sm' | 'base';\n}\n\n/** This text should only be used for the dropdown items text  */\nexport const TextForDropDownItem = ({\n  text = 'Text for drop down item',\n  color = 'black',\n  bold = false,\n  size = 'base',\n  className,\n  ...props\n}: TextForDropDownItemProps) => {\n  return (\n    <p\n      {...props}\n      style={{ color: color }}\n      className={`text ${bold && 'bold'} ${size} ${className}`}\n    >\n      {text}\n    </p>\n  );\n};\n","import React, { HTMLAttributes } from 'react';\nimport './Title.css';\n\ninterface TitleProps extends HTMLAttributes<HTMLParagraphElement> {\n  /** Text display in the Title  */\n  text: string;\n  color?: string;\n  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';\n  titleWeight?: 'semi-bold' | 'bold' | 'regular';\n  italic?: boolean;\n  className?: string;\n}\n\n/** This text should only be used to display titles */\nexport const Title = ({\n  text = 'Component to use for the titles',\n  color = 'black',\n  size = 'base',\n  titleWeight = 'semi-bold',\n  italic = false,\n  className,\n  ...props\n}: TitleProps) => {\n  return (\n    <p\n      {...props}\n      style={{ color: color }}\n      className={`text ${italic &&\n        'italic'} ${titleWeight} ${className} ${size}`}\n    >\n      {text}\n    </p>\n  );\n};\n"],"names":["Button","variant","children","props","React","Caption","text","color","className","uppercase","style","Text","size","titleWeight","italic","textDecoration","TextForButton","bold","TextForDropDownItem","Title"],"mappings":";;MAOaA,MAAM,GAAGA,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAE,GAAGC;CAAc,kBAC3DC,gDAAYD,KAAK,GAAGD,QAAQ;;ACG9B;AACA,MAAaG,OAAO,GAAGA,CAAC;EACtBC,IAAI,GAAG,cAAc;EACrBC,KAAK,GAAG,OAAO;EACfC,SAAS;EACTC,SAAS,GAAG,IAAI;EAChB,GAAGN;CACU;EACb,oBACEC,2CACMD,KAAK;IACTO,KAAK,EAAE;MAAEH,KAAK,EAAEA;KAAO;IACvBC,SAAS,UAAUC,SAAS,IAAI,eAAeD;MAE9CF,IAAI,CACH;AAER,CAAC;;ACdD;AACA,MAAaK,IAAI,GAAGA,CAAC;EACnBL,IAAI,GAAG,sCAAsC;EAC7CC,KAAK,GAAG,OAAO;EACfK,IAAI,GAAG,MAAM;EACbC,WAAW,GAAG,WAAW;EACzBC,MAAM,GAAG,KAAK;EACdC,cAAc;EACdP,SAAS;EACT,GAAGL;CACO;EACV,oBACEC,2CACMD,KAAK;IACTO,KAAK,EAAE;MAAEH,KAAK,EAAEA;KAAO;IACvBC,SAAS,UAAUM,MAAM,IAAI,YAAYD,eAAeE,cAAc,IACpEA,kBAAkBP,aAAaI;MAEhCN,IAAI,CACH;AAER,CAAC;;ACvBD;AACA,MAAaU,aAAa,GAAGA,CAAC;EAC5BV,IAAI,GAAG,kCAAkC;EACzCC,KAAK,GAAG,OAAO;EACfU,IAAI,GAAG,KAAK;EACZT,SAAS;EACTI,IAAI,GAAG,MAAM;EACb,GAAGT;CACgB;EACnB,oBACEC,2CACMD,KAAK;IACTO,KAAK,EAAE;MAAEH,KAAK,EAAEA;KAAO;IACvBC,SAAS,UAAUS,IAAI,IAAI,UAAUT,aAAaI;MAEjDN,IAAI,CACH;AAER,CAAC;;ACjBD;AACA,MAAaY,mBAAmB,GAAGA,CAAC;EAClCZ,IAAI,GAAG,yBAAyB;EAChCC,KAAK,GAAG,OAAO;EACfU,IAAI,GAAG,KAAK;EACZL,IAAI,GAAG,MAAM;EACbJ,SAAS;EACT,GAAGL;CACsB;EACzB,oBACEC,2CACMD,KAAK;IACTO,KAAK,EAAE;MAAEH,KAAK,EAAEA;KAAO;IACvBC,SAAS,UAAUS,IAAI,IAAI,UAAUL,QAAQJ;MAE5CF,IAAI,CACH;AAER,CAAC;;AClBD;AACA,MAAaa,KAAK,GAAGA,CAAC;EACpBb,IAAI,GAAG,iCAAiC;EACxCC,KAAK,GAAG,OAAO;EACfK,IAAI,GAAG,MAAM;EACbC,WAAW,GAAG,WAAW;EACzBC,MAAM,GAAG,KAAK;EACdN,SAAS;EACT,GAAGL;CACQ;EACX,oBACEC,2CACMD,KAAK;IACTO,KAAK,EAAE;MAAEH,KAAK,EAAEA;KAAO;IACvBC,SAAS,UAAUM,MAAM,IACvB,YAAYD,eAAeL,aAAaI;MAEzCN,IAAI,CACH;AAER,CAAC;;;;"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.1",
+  "version": "1.0.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -77,8 +77,11 @@
   },
   "dependencies": {
     "@storybook/addon-interactions": "^7.0.10",
+    "autoprefixer": "^10.4.16",
     "css-loader": "^6.7.3",
+    "cssnano": "^6.0.1",
     "eslint-plugin-mdx": "^2.1.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.62.1",
     "sass-loader": "^13.2.2",
     "storybook-css-modules-preset": "^1.1.1",

package/src/{lib/Typography → Typography}/TextForButton.tsx

@@ -1,6 +1,5 @@
 import React, { HTMLAttributes } from 'react';
 import './TextForButton.css';
-import '../../../example/index.css';
 
 interface TextForButtonProps extends HTMLAttributes<HTMLParagraphElement> {
   /** Text display in the Button component  */

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './Buttons/Button';
+export * from './Typography/Caption';
+export * from './Typography/Text';
+export * from './Typography/TextForButton';
+export * from './Typography/TextForDropDownItem';
+export * from './Typography/Title';

package/src/lib/index.ts

@@ -1,7 +0,0 @@
-import { Button } from './Buttons/Button';
-import { Caption } from './Typography/Caption';
-import { Text } from './Typography/Text';
-import { TextForButton } from './Typography/TextForButton';
-import { Title } from './Typography/Title';
-
-export { Button, Text, Caption, Title, TextForButton };