@rededor/cura 0.4.6 → 0.4.8

package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.stories.js

@@ -0,0 +1,168 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import iconNames from '../../../assets/icons/iconset-default-list';
+export default {
+  title: 'Components/Buttons/Button Transparent',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label } = _a, args = __rest(_a, ["label"]);
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return `<cura-button-transparent
+  size="${args.size}"
+  disabled="${args.disabled}"
+  is-loading="${args.isLoading}"
+  color="${args.color}"
+  font-color="${args.fontColor}"
+  icon-name="${args.iconName}"
+  icon-position="${args.iconPosition}"
+  icon-only="${args.iconOnly}"
+  href="${args.href}"
+  target="${args.target}"
+  text-align="${args.textAlign}"
+  style="${args.fullWidth ? 'width: 100%;' : ''}">
+    ${label}
+</cura-button-transparent>`;
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',
+      name: 'Label'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Estado desabilitado.',
+      table: {
+        category: 'State',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',
+      table: {
+        category: 'State',
+        defaultValue: { summary: 'false' }
+      },
+      name: 'is-loading'
+    },
+    size: {
+      control: { type: 'inline-radio' },
+      options: ['small', 'medium', 'large'],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'medium' }
+      }
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'accent' }
+      }
+    },
+    fontColor: {
+      control: { type: 'inline-radio' },
+      options: ['dark', 'light'],
+      description: 'Define cor clara ou escura de acordo com contexto.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'dark' }
+      },
+      name: 'font-color'
+    },
+    textAlign: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'center', 'right'],
+      description: 'Alinha texto de múltiplas linhas.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'left' }
+      },
+      name: 'text-align'
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',
+      table: {
+        category: 'CSS',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    iconName: {
+      control: { type: 'select' },
+      options: iconNames,
+      description: 'Nome do ícone a ser utilizado no iconset.',
+      table: {
+        category: 'Icons'
+      },
+      name: 'icon-name'
+    },
+    iconPosition: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'right'],
+      description: 'Posição do ícone no botão.',
+      table: {
+        category: 'Icons',
+        defaultValue: { summary: 'left' }
+      },
+      name: 'icon-position'
+    },
+    iconOnly: {
+      control: 'boolean',
+      description: 'Oculta o label do botão exibindo somente o ícone.',
+      table: {
+        category: 'Icons',
+        defaultValue: { summary: 'false' }
+      },
+      name: 'icon-only'
+    },
+    href: {
+      control: 'text',
+      description: `Se definido o elemento de ação renderizado internamente será um link.`,
+      table: {
+        category: 'Properties'
+      }
+    },
+    target: {
+      control: 'text',
+      description: 'Define o comportamento de abertura do link quando href for informado.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '_self' }
+      }
+    }
+  },
+};
+export const ButtonTransparent = {
+  args: {
+    label: 'Button',
+    size: 'medium',
+    color: 'primary',
+    fontColor: 'dark',
+    textAlign: 'left',
+    iconName: iconNames[0],
+    iconPosition: 'left',
+    iconOnly: false,
+    disabled: false,
+    isLoading: false,
+    href: '',
+    target: '_self',
+    fullWidth: false,
+  },
+};
+//# sourceMappingURL=cura-button-transparent.stories.js.map

package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-button-transparent.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-transparent/cura-button-transparent.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nexport default {\n  title: 'Components/Buttons/Button Transparent',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-button-transparent\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\"\n  is-loading=\"${args.isLoading}\"\n  color=\"${args.color}\"\n  font-color=\"${args.fontColor}\"\n  icon-name=\"${args.iconName}\"\n  icon-position=\"${args.iconPosition}\"\n  icon-only=\"${args.iconOnly}\"\n  href=\"${args.href}\"\n  target=\"${args.target}\"\n  text-align=\"${args.textAlign}\"\n  style=\"${args.fullWidth ? 'width: 100%;' : ''}\">\n    ${label}\n</cura-button-transparent>`;\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n      name: 'Label'\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    isLoading: {\n      control: 'boolean',\n      description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      },\n      name: 'is-loading'\n    },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'medium', 'large'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent'}\n      }\n    },\n    fontColor: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Define cor clara ou escura de acordo com contexto.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'dark'}\n      },\n      name: 'font-color'\n    },\n    textAlign: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'center', 'right'],\n      description: 'Alinha texto de múltiplas linhas.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'left'}\n      },\n      name: 'text-align'\n    },\n    fullWidth: {\n      control: 'boolean',\n      description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',\n      table: {\n        category: 'CSS',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    iconName: {\n      control: {type: 'select' },\n      options: iconNames,\n      description: 'Nome do ícone a ser utilizado no iconset.',\n      table: {\n        category: 'Icons'\n      },\n      name: 'icon-name'\n    },\n    iconPosition: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'right'],\n      description: 'Posição do ícone no botão.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'left'}\n      },\n      name: 'icon-position'\n    },\n    iconOnly: {\n      control: 'boolean',\n      description: 'Oculta o label do botão exibindo somente o ícone.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'false'}\n      },\n      name: 'icon-only'\n    },\n    href: {\n      control: 'text',\n      description: `Se definido o elemento de ação renderizado internamente será um link.`,\n      table: {\n        category: 'Properties'\n      }\n    },\n    target: {\n      control: 'text',\n      description: 'Define o comportamento de abertura do link quando href for informado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '_self'}\n      }\n    }\n  },\n};\n\nexport const ButtonTransparent = {\n  args: {\n    label: 'Button',\n    size: 'medium',\n    color: 'primary',\n    fontColor: 'dark',\n    textAlign: 'left',\n    iconName: iconNames[0],\n    iconPosition: 'left',\n    iconOnly: false,\n    disabled: false,\n    isLoading: false,\n    href: '',\n    target: '_self',\n    fullWidth: false,\n  },\n};\n"]}

package/dist/collection/components/cura-icon/cura-icon.stories.js

@@ -0,0 +1,75 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import iconNames from '../../assets/icons/iconset-default-list';
+import { getColorsWithDepths } from "../../utils/utils";
+const colors = getColorsWithDepths();
+export default {
+  title: 'Components/Icons/Icon',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label } = _a, args = __rest(_a, ["label"]);
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return `<cura-icon
+  name="${args.name}"
+  color="${args.color}"
+  size="${args.size}"
+  disabled="${args.disabled}">
+</cura-icon>`;
+  },
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Estado desabilitado',
+      table: {
+        category: 'State',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    size: {
+      control: { type: 'select' },
+      options: ["128", "72", "64", "48", "40", "32", "24", "20", "16"],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '24' }
+      }
+    },
+    color: {
+      control: { type: 'select' },
+      options: colors,
+      description: 'Cor e profundidade (ex: primary-dark). Se nenhuma profundidade informada assumirá a base como padrão.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'neutral' }
+      }
+    },
+    name: {
+      control: { type: 'select' },
+      options: iconNames,
+      description: 'Nome do ícone no iconset.',
+      table: {
+        category: 'Properties'
+      }
+    }
+  },
+};
+export const Icon = {
+  args: {
+    name: iconNames[0],
+    size: '24',
+    color: 'neutral',
+    disabled: false,
+  },
+};
+//# sourceMappingURL=cura-icon.stories.js.map

package/dist/collection/components/cura-icon/cura-icon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-icon.stories.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,mFAAmF;IACnF,gCAAgC;IAChC,OAAO;UACD,IAAI,CAAC,IAAI;WACR,IAAI,CAAC,KAAK;UACX,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;aACd,CAAC;EACZ,CAAC;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,qBAAqB;MAClC,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;MAChE,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC;OAC/B;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,uGAAuG;MACpH,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE;MAC1B,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,2BAA2B;MACxC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;OACvB;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;EAClB,IAAI,EAAE;IACJ,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAClB,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\nimport { getColorsWithDepths } from \"../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nexport default {\n  title: 'Components/Icons/Icon',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-icon\n  name=\"${args.name}\"\n  color=\"${args.color}\"\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\">\n</cura-icon>`;\n  },\n  argTypes: {\n    disabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: [\"128\", \"72\", \"64\", \"48\", \"40\", \"32\", \"24\", \"20\", \"16\"],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '24'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: colors,\n      description: 'Cor e profundidade (ex: primary-dark). Se nenhuma profundidade informada assumirá a base como padrão.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'neutral'}\n      }\n    },\n    name: {\n      control: {type: 'select' },\n      options: iconNames,\n      description: 'Nome do ícone no iconset.',\n      table: {\n        category: 'Properties'\n      }\n    }\n  },\n};\n\nexport const Icon = {\n  args: {\n    name: iconNames[0],\n    size: '24',\n    color: 'neutral',\n    disabled: false,\n  },\n};\n"]}

package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.stories.js

@@ -0,0 +1,56 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { getColorsWithDepths } from "../../../utils/utils";
+const colors = getColorsWithDepths();
+export default {
+  title: 'Components/Loaders/Loader Circle',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label } = _a, args = __rest(_a, ["label"]);
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return `<cura-loader-circle
+  name="${args.name}"
+  color="${args.color}"
+  size="${args.size}"
+  disabled="${args.disabled}">
+</cura-loader-circle>`;
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large', 'xlarge'],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'medium' }
+      }
+    },
+    color: {
+      control: { type: 'select' },
+      options: colors,
+      description: 'Cor e profundidade (ex: primary-dark). Se nenhuma profundidade informada assumirá a base como padrão.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'neutral-white' }
+      }
+    }
+  },
+};
+export const LoaderCircle = {
+  args: {
+    size: 'medium',
+    color: 'primary'
+  },
+};
+//# sourceMappingURL=cura-loader-circle.stories.js.map

package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-loader-circle.stories.js","sourceRoot":"","sources":["../../../../src/components/loaders/cura-loader-circle/cura-loader-circle.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;EACb,KAAK,EAAE,kCAAkC;EACzC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,mFAAmF;IACnF,gCAAgC;IAChC,OAAO;UACD,IAAI,CAAC,IAAI;WACR,IAAI,CAAC,KAAK;UACX,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;sBACL,CAAC;EACrB,CAAC;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC;MAC/C,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAC;OACnC;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,uGAAuG;MACpH,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,eAAe,EAAC;OAC1C;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;EAC1B,IAAI,EAAE;IACJ,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,SAAS;GACjB;CACF,CAAC","sourcesContent":["import { getColorsWithDepths } from \"../../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nexport default {\n  title: 'Components/Loaders/Loader Circle',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-loader-circle\n  name=\"${args.name}\"\n  color=\"${args.color}\"\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\">\n</cura-loader-circle>`;\n  },\n  argTypes: {\n    size: {\n      control: { type: 'select' },\n      options: ['small', 'medium', 'large', 'xlarge'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: colors,\n      description: 'Cor e profundidade (ex: primary-dark). Se nenhuma profundidade informada assumirá a base como padrão.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'neutral-white'}\n      }\n    }\n  },\n};\n\nexport const LoaderCircle = {\n  args: {\n    size: 'medium',\n    color: 'primary'\n  },\n};\n"]}

package/dist/collection/components/text/cura-display/cura-display.stories.js

@@ -0,0 +1,80 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+export default {
+  title: 'Components/Text/Display',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label } = _a, args = __rest(_a, ["label"]);
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return `<cura-display
+  level="${args.level}"
+  spot-color="${args.spotColor}"
+  size="${args.size}"
+  inverted="${args.inverted}">
+  ${label}
+</cura-display>
+<cura-paragraph>Proin quis turpis et turpis efficitur dictum. Suspendisse egestas posuere libero. Sed non dapibus urna. Sed luctus tincidunt nibh, eu tincidunt justo. Curabitur at ullamcorper mauris, feugiat fermentum nulla. Quisque sed nibh in odio blandit mollis at quis dolor. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.</cura-paragraph>`;
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',
+      name: 'Content'
+    },
+    inverted: {
+      control: 'boolean',
+      description: 'Inverte cores do texto para aplicação em fundo escuro.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'regular', 'large'],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'regular' }
+      }
+    },
+    spotColor: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'primary' }
+      }
+    },
+    level: {
+      control: { type: 'number', min: 1, max: 6, step: 1 },
+      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'primary' }
+      }
+    }
+  },
+};
+export const Display = {
+  args: {
+    label: 'Dolor sit <a href="https://www.rededorsaoluiz.com.br" target="_blank">amet</a>, consectetur adipiscing elit.',
+    size: 'regular',
+    level: 1,
+    spotColor: 'primary',
+    inverted: false,
+  },
+};
+//# sourceMappingURL=cura-display.stories.js.map

package/dist/collection/components/text/cura-display/cura-display.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-display.stories.js","sourceRoot":"","sources":["../../../../src/components/text/cura-display/cura-display.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,mFAAmF;IACnF,gCAAgC;IAChC,OAAO;WACA,IAAI,CAAC,KAAK;gBACL,IAAI,CAAC,SAAS;UACpB,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;IACvB,KAAK;;8gBAEqgB,CAAC;EAC7gB,CAAC;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,qFAAqF;MAClG,IAAI,EAAE,SAAS;KAChB;IACD,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,wDAAwD;MACrE,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC;MACtC,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,SAAS,EAAE;MACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;MAC7F,WAAW,EAAE,kEAAkE;MAC/E,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;MACpD,WAAW,EAAE,wDAAwD;MACrE,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;EACrB,IAAI,EAAE;IACJ,KAAK,EAAE,8GAA8G;IACrH,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,CAAC;IACR,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC","sourcesContent":["\nexport default {\n  title: 'Components/Text/Display',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-display\n  level=\"${args.level}\"\n  spot-color=\"${args.spotColor}\"\n  size=\"${args.size}\"\n  inverted=\"${args.inverted}\">\n  ${label}\n</cura-display>\n<cura-paragraph>Proin quis turpis et turpis efficitur dictum. Suspendisse egestas posuere libero. Sed non dapibus urna. Sed luctus tincidunt nibh, eu tincidunt justo. Curabitur at ullamcorper mauris, feugiat fermentum nulla. Quisque sed nibh in odio blandit mollis at quis dolor. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.</cura-paragraph>`;\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n      name: 'Content'\n    },\n    inverted: {\n      control: 'boolean',\n      description: 'Inverte cores do texto para aplicação em fundo escuro.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['small', 'regular', 'large'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'regular'}\n      }\n    },\n    spotColor: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary'}\n      }\n    },\n    level: {\n      control: { type: 'number', min: 1, max: 6, step: 1 },\n      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary'}\n      }\n    }\n  },\n};\n\nexport const Display = {\n  args: {\n    label: 'Dolor sit <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">amet</a>, consectetur adipiscing elit.',\n    size: 'regular',\n    level: 1,\n    spotColor: 'primary',\n    inverted: false,\n  },\n};\n"]}

package/dist/collection/components/text/cura-heading/cura-heading.stories.js

@@ -0,0 +1,91 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+export default {
+  title: 'Components/Text/Heading',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label } = _a, args = __rest(_a, ["label"]);
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return `<cura-heading
+  level="${args.level}"
+  spot-color="${args.spotColor}"
+  size="${args.size}"
+  inverted="${args.inverted}"
+  weight="${args.weight}">
+  ${label}
+</cura-heading>
+<cura-paragraph>Proin quis turpis et turpis efficitur dictum. Suspendisse egestas posuere libero. Sed non dapibus urna. Sed luctus tincidunt nibh, eu tincidunt justo. Curabitur at ullamcorper mauris, feugiat fermentum nulla. Quisque sed nibh in odio blandit mollis at quis dolor. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.</cura-paragraph>`;
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',
+      name: 'Content'
+    },
+    inverted: {
+      control: 'boolean',
+      description: 'Inverte cores do texto para aplicação em fundo escuro.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'regular', 'large'],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'regular' }
+      }
+    },
+    weight: {
+      control: { type: 'inline-radio' },
+      options: ['regular', 'bold'],
+      description: 'Espessura de fonte',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'regular' }
+      }
+    },
+    spotColor: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'primary' }
+      }
+    },
+    level: {
+      control: { type: 'number', min: 1, max: 6, step: 1 },
+      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'primary' }
+      }
+    }
+  },
+};
+export const Heading = {
+  args: {
+    label: 'Dolor sit <a href="https://www.rededorsaoluiz.com.br" target="_blank">amet</a>, consectetur adipiscing elit.',
+    size: 'regular',
+    weight: 'regular',
+    level: 1,
+    spotColor: 'primary',
+    inverted: false,
+  },
+};
+//# sourceMappingURL=cura-heading.stories.js.map

package/dist/collection/components/text/cura-heading/cura-heading.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-heading.stories.js","sourceRoot":"","sources":["../../../../src/components/text/cura-heading/cura-heading.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,mFAAmF;IACnF,gCAAgC;IAChC,OAAO;WACA,IAAI,CAAC,KAAK;gBACL,IAAI,CAAC,SAAS;UACpB,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;YACf,IAAI,CAAC,MAAM;IACnB,KAAK;;8gBAEqgB,CAAC;EAC7gB,CAAC;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,qFAAqF;MAClG,IAAI,EAAE,SAAS;KAChB;IACD,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,wDAAwD;MACrE,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC;MACtC,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,MAAM,EAAE;MACN,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;MACjC,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC;MAC5B,WAAW,EAAE,oBAAoB;MACjC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,SAAS,EAAE;MACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;MAC7F,WAAW,EAAE,kEAAkE;MAC/E,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;MACpD,WAAW,EAAE,wDAAwD;MACrE,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;EACrB,IAAI,EAAE;IACJ,KAAK,EAAE,8GAA8G;IACrH,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,CAAC;IACR,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC","sourcesContent":["\nexport default {\n  title: 'Components/Text/Heading',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-heading\n  level=\"${args.level}\"\n  spot-color=\"${args.spotColor}\"\n  size=\"${args.size}\"\n  inverted=\"${args.inverted}\"\n  weight=\"${args.weight}\">\n  ${label}\n</cura-heading>\n<cura-paragraph>Proin quis turpis et turpis efficitur dictum. Suspendisse egestas posuere libero. Sed non dapibus urna. Sed luctus tincidunt nibh, eu tincidunt justo. Curabitur at ullamcorper mauris, feugiat fermentum nulla. Quisque sed nibh in odio blandit mollis at quis dolor. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.</cura-paragraph>`;\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n      name: 'Content'\n    },\n    inverted: {\n      control: 'boolean',\n      description: 'Inverte cores do texto para aplicação em fundo escuro.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['small', 'regular', 'large'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'regular'}\n      }\n    },\n    weight: {\n      control: { type: 'inline-radio' },\n      options: ['regular', 'bold'],\n      description: 'Espessura de fonte',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'regular'}\n      }\n    },\n    spotColor: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary'}\n      }\n    },\n    level: {\n      control: { type: 'number', min: 1, max: 6, step: 1 },\n      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary'}\n      }\n    }\n  },\n};\n\nexport const Heading = {\n  args: {\n    label: 'Dolor sit <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">amet</a>, consectetur adipiscing elit.',\n    size: 'regular',\n    weight: 'regular',\n    level: 1,\n    spotColor: 'primary',\n    inverted: false,\n  },\n};\n"]}

package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js

@@ -0,0 +1,94 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+export default {
+  title: 'Components/Text/Paragraph',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label } = _a, args = __rest(_a, ["label"]);
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return `<cura-paragraph
+  spot-color="${args.spotColor}"
+  size="${args.size}"
+  inverted="${args.inverted}"
+  color="${args.color}">
+  ${label}
+</cura-paragraph>
+<cura-paragraph
+  spot-color="${args.spotColor}"
+  size="${args.size}"
+  inverted="${args.inverted}"
+  color="${args.color}">
+  ${label}
+</cura-paragraph>
+<cura-paragraph
+  spot-color="${args.spotColor}"
+  size="${args.size}"
+  inverted="${args.inverted}"
+  color="${args.color}">
+  ${label}
+</cura-paragraph>`;
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',
+      name: 'Content'
+    },
+    inverted: {
+      control: 'boolean',
+      description: 'Inverte cores do texto para aplicação em fundo escuro.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['caption', 'small', 'regular', 'large'],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'regular' }
+      }
+    },
+    spotColor: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'primary' }
+      }
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'Theme font color.' }
+      }
+    }
+  },
+};
+export const Paragraph = {
+  args: {
+    label: 'Proin quis <b>turpis</b> et <strong>turpis</strong> efficitur dictum. Suspendisse <i>egestas</i> posuere libero. Sed non dapibus urna. Sed <a href="https://www.rededorsaoluiz.com.br" target="_blank">luctus tincidunt nibh</a>, eu tincidunt justo. <abbr title="Não faço idéia de que porra é essa">Curabitur</abbr> at ullamcorper mauris, feugiat fermentum nulla. Quisque sed nibh in odio blandit mollis at quis dolor. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.',
+    size: 'regular',
+    spotColor: 'primary',
+    inverted: false,
+    color: ''
+  },
+};
+//# sourceMappingURL=cura-paragraph.stories.js.map

package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-paragraph.stories.js","sourceRoot":"","sources":["../../../../src/components/text/cura-paragraph/cura-paragraph.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,eAAe;EACb,KAAK,EAAE,2BAA2B;EAClC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,mFAAmF;IACnF,gCAAgC;IAChC,OAAO;gBACK,IAAI,CAAC,SAAS;UACpB,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;WAChB,IAAI,CAAC,KAAK;IACjB,KAAK;;;gBAGO,IAAI,CAAC,SAAS;UACpB,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;WAChB,IAAI,CAAC,KAAK;IACjB,KAAK;;;gBAGO,IAAI,CAAC,SAAS;UACpB,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;WAChB,IAAI,CAAC,KAAK;IACjB,KAAK;kBACS,CAAC;EACjB,CAAC;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,qFAAqF;MAClG,IAAI,EAAE,SAAS;KAChB;IACD,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,wDAAwD;MACrE,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC;MACjD,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,SAAS,EAAE;MACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;MAC7F,WAAW,EAAE,kEAAkE;MAC/E,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;MAC7F,WAAW,EAAE,kEAAkE;MAC/E,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAC;OAC9C;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;EACvB,IAAI,EAAE;IACJ,KAAK,EAAE,qoBAAqoB;IAC5oB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,EAAE;GACV;CACF,CAAC","sourcesContent":["\nexport default {\n  title: 'Components/Text/Paragraph',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-paragraph\n  spot-color=\"${args.spotColor}\"\n  size=\"${args.size}\"\n  inverted=\"${args.inverted}\"\n  color=\"${args.color}\">\n  ${label}\n</cura-paragraph>\n<cura-paragraph\n  spot-color=\"${args.spotColor}\"\n  size=\"${args.size}\"\n  inverted=\"${args.inverted}\"\n  color=\"${args.color}\">\n  ${label}\n</cura-paragraph>\n<cura-paragraph\n  spot-color=\"${args.spotColor}\"\n  size=\"${args.size}\"\n  inverted=\"${args.inverted}\"\n  color=\"${args.color}\">\n  ${label}\n</cura-paragraph>`;\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n      name: 'Content'\n    },\n    inverted: {\n      control: 'boolean',\n      description: 'Inverte cores do texto para aplicação em fundo escuro.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['caption', 'small', 'regular', 'large'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'regular'}\n      }\n    },\n    spotColor: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'Theme font color.'}\n      }\n    }\n  },\n};\n\nexport const Paragraph = {\n  args: {\n    label: 'Proin quis <b>turpis</b> et <strong>turpis</strong> efficitur dictum. Suspendisse <i>egestas</i> posuere libero. Sed non dapibus urna. Sed <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">luctus tincidunt nibh</a>, eu tincidunt justo. <abbr title=\"Não faço idéia de que porra é essa\">Curabitur</abbr> at ullamcorper mauris, feugiat fermentum nulla. Quisque sed nibh in odio blandit mollis at quis dolor. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.',\n    size: 'regular',\n    spotColor: 'primary',\n    inverted: false,\n    color: ''\n  },\n};\n"]}