paris 0.23.0 → 0.24.0

package/dist/stories/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/stories/tag/Tag.d.ts

@@ -0,0 +1,36 @@
+import { CSSLength } from '@ssh/csstypes';
+import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
+export declare const CornerPresets: readonly ["sharp", "rounded", "roundedXL"];
+export type TagProps = {
+    /** The size of the Tag. */
+    size?: 'normal' | 'compact';
+    /** The shape of the Tag. `square` will display only the `icon`. */
+    shape?: 'rectangle' | 'square';
+    /**
+     * The radius of the corners of the Tag. Either a preset or a valid {@link CSSLength} string.
+     * `sharp` will have no rounding, `rounded` will have a slight rounding, and `roundedXL` will have a large rounding.
+     * @see CornerPresets
+     */
+    corners?: (typeof CornerPresets)[number] | CSSLength;
+    /** The kind of Tag. */
+    kind?: 'default' | 'secondary' | 'positive' | 'warning' | 'negative' | 'new' | 'void' | 'draft';
+    /** The color level of Tag background, applies to the colored states of `positive`, `warning`, and `negative`. */
+    colorLevel?: 'light' | 'medium' | 'strong';
+    /** An icon to display in the shape: `square` variant of the Tag. For best results, use an SVG icon with fill set to `currentColor`. */
+    icon?: ReactElement;
+    /** The contents of the Tag. */
+    children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
+/**
+ * A Tag component.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { Tag } from 'paris/tag';
+ * ```
+ * @constructor
+ */
+export declare const Tag: FC<TagProps>;

package/dist/stories/tag/Tag.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { useMemo } from 'react';
+import { Check } from '../icon/Check.js';
+import { Icon } from '../icon/Icon.js';
+import typography from '../text/Typography.module.css.js';
+import { VisuallyHidden } from '../utility/VisuallyHidden.js';
+import styles from './Tag.module.scss.js';
+
+const CornerPresets = ["sharp", "rounded", "roundedXL"];
+const Tag = ({
+  size = "normal",
+  shape = "rectangle",
+  corners,
+  kind = "default",
+  colorLevel,
+  icon = /* @__PURE__ */ jsx(Icon, { icon: Check, size: 12 }),
+  children,
+  className
+}) => {
+  const cornersIsPreset = useMemo(() => CornerPresets.includes(corners), [corners]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        styles.tag,
+        styles[size],
+        styles[kind],
+        size === "normal" && typography.labelXSmall,
+        size === "compact" && typography.labelXXSmall,
+        styles[shape],
+        !corners && size === "normal" && styles.sharp,
+        !corners && size === "compact" && styles.rounded,
+        corners && cornersIsPreset && styles[corners],
+        className
+      ),
+      "data-status": colorLevel,
+      style: corners && !cornersIsPreset ? { borderRadius: corners } : {},
+      children: [
+        shape !== "square" && /* @__PURE__ */ jsx("div", { children }),
+        shape === "square" && /* @__PURE__ */ jsxs("div", { className: styles.icon, children: [
+          icon,
+          /* @__PURE__ */ jsx(VisuallyHidden, { children })
+        ] })
+      ]
+    }
+  );
+};
+
+export { CornerPresets, Tag };
+//# sourceMappingURL=Tag.js.map

package/dist/stories/tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sources":["../../../src/stories/tag/Tag.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSLength } from '@ssh/csstypes';\nimport { clsx } from 'clsx';\nimport type { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';\nimport { useMemo } from 'react';\nimport { Check, Icon } from '../icon';\nimport typography from '../text/Typography.module.css';\nimport { VisuallyHidden } from '../utility';\nimport styles from './Tag.module.scss';\n\nexport const CornerPresets = ['sharp', 'rounded', 'roundedXL'] as const;\n\nexport type TagProps = {\n    /** The size of the Tag. */\n    size?: 'normal' | 'compact';\n    /** The shape of the Tag. `square` will display only the `icon`. */\n    shape?: 'rectangle' | 'square';\n    /**\n     * The radius of the corners of the Tag. Either a preset or a valid {@link CSSLength} string.\n     * `sharp` will have no rounding, `rounded` will have a slight rounding, and `roundedXL` will have a large rounding.\n     * @see CornerPresets\n     */\n    corners?: (typeof CornerPresets)[number] | CSSLength;\n    /** The kind of Tag. */\n    kind?: 'default' | 'secondary' | 'positive' | 'warning' | 'negative' | 'new' | 'void' | 'draft';\n    /** The color level of Tag background, applies to the colored states of `positive`, `warning`, and `negative`. */\n    colorLevel?: 'light' | 'medium' | 'strong';\n    /** An icon to display in the shape: `square` variant of the Tag. For best results, use an SVG icon with fill set to `currentColor`. */\n    icon?: ReactElement;\n    /** The contents of the Tag. */\n    children: ReactNode;\n} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;\n\n/**\n * A Tag component.\n *\n * <hr />\n *\n * To use this component, import it as follows:\n *\n * ```js\n * import { Tag } from 'paris/tag';\n * ```\n * @constructor\n */\nexport const Tag: FC<TagProps> = ({\n    size = 'normal',\n    shape = 'rectangle',\n    corners,\n    kind = 'default',\n    colorLevel,\n    icon = <Icon icon={Check} size={12} />,\n    children,\n    className,\n}) => {\n    const cornersIsPreset = useMemo(() => (CornerPresets as readonly string[]).includes(corners as string), [corners]);\n    return (\n        <div\n            className={clsx(\n                styles.tag,\n                styles[size],\n                styles[kind],\n                size === 'normal' && typography.labelXSmall,\n                size === 'compact' && typography.labelXXSmall,\n                styles[shape],\n                !corners && size === 'normal' && styles.sharp,\n                !corners && size === 'compact' && styles.rounded,\n                corners && cornersIsPreset && styles[corners],\n                className,\n            )}\n            data-status={colorLevel}\n            style={corners && !cornersIsPreset ? { borderRadius: corners } : {}}\n        >\n            {shape !== 'square' && <div>{children}</div>}\n            {shape === 'square' && (\n                <div className={styles.icon}>\n                    {icon}\n                    <VisuallyHidden>{children}</VisuallyHidden>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/dist/stories/tag/Tag.module.css

@@ -0,0 +1,164 @@
+.paris_tag_QE3dx {
+  width: fit-content;
+}
+
+.paris_normal_8yko9 {
+  height: 26px;
+}
+.paris_normal_8yko9.paris_rectangle_0M8zy {
+  padding: 7px 13px;
+}
+.paris_normal_8yko9.paris_rectangle_0M8zy.paris_sharp_Qf5k1 {
+  padding: 6px 12px;
+}
+.paris_normal_8yko9.paris_rectangle_0M8zy.paris_secondary_yPIwf, .paris_normal_8yko9.paris_rectangle_0M8zy.paris_draft_Y1UjW, .paris_normal_8yko9.paris_rectangle_0M8zy.paris_new_5Kd0m {
+  padding: 6px 12px;
+}
+.paris_normal_8yko9.paris_square_xlGrW {
+  width: 26px;
+  padding: 4px;
+}
+.paris_normal_8yko9.paris_square_xlGrW.paris_sharp_Qf5k1 {
+  padding: 3px;
+}
+.paris_normal_8yko9.paris_square_xlGrW.paris_secondary_yPIwf, .paris_normal_8yko9.paris_square_xlGrW.paris_draft_Y1UjW, .paris_normal_8yko9.paris_square_xlGrW.paris_new_5Kd0m {
+  padding: 3px;
+}
+
+.paris_compact_0Tvlm {
+  height: 20px;
+}
+.paris_compact_0Tvlm.paris_rectangle_0M8zy {
+  padding: 5px 10px;
+}
+.paris_compact_0Tvlm.paris_rectangle_0M8zy.paris_sharp_Qf5k1 {
+  padding: 4px 9px;
+}
+.paris_compact_0Tvlm.paris_rectangle_0M8zy.paris_secondary_yPIwf, .paris_compact_0Tvlm.paris_rectangle_0M8zy.paris_draft_Y1UjW, .paris_compact_0Tvlm.paris_rectangle_0M8zy.paris_new_5Kd0m {
+  padding: 4px 9px;
+}
+.paris_compact_0Tvlm.paris_square_xlGrW {
+  width: 20px;
+  padding: 4px;
+}
+.paris_compact_0Tvlm.paris_square_xlGrW.paris_sharp_Qf5k1 {
+  padding: 3px;
+}
+.paris_compact_0Tvlm.paris_square_xlGrW.paris_secondary_yPIwf, .paris_compact_0Tvlm.paris_square_xlGrW.paris_draft_Y1UjW, .paris_compact_0Tvlm.paris_square_xlGrW.paris_new_5Kd0m {
+  padding: 3px;
+}
+
+.paris_sharp_Qf5k1 {
+  border-radius: var(--pte-borders-radius-rectangle);
+  border: 1px solid;
+}
+
+.paris_rounded_e7vdE {
+  border-radius: var(--pte-borders-radius-roundedSmall);
+}
+
+.paris_roundedXL_Hgswm {
+  border-radius: var(--pte-borders-radius-pill);
+}
+
+.paris_square_xlGrW {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.paris_icon_FxMyh {
+  width: 12px;
+  height: 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.paris_icon_FxMyh svg {
+  width: 10px !important;
+  height: 10px !important;
+}
+
+.paris_default_6fhzM {
+  background-color: var(--pte-new-colors-overlayStrong);
+  color: var(--pte-new-colors-contentSecondary);
+  border-color: var(--pte-new-colors-contentSecondary);
+}
+
+.paris_secondary_yPIwf {
+  background-color: transparent;
+  color: var(--pte-new-colors-contentSecondary);
+  border: 1px solid var(--pte-new-colors-borderMedium);
+}
+
+.paris_positive_RauML {
+  color: var(--pte-new-colors-contentPositive);
+  background-color: var(--pte-new-colors-backgroundPositive);
+  border-color: var(--pte-new-colors-contentPositive);
+}
+.paris_positive_RauML[data-status=medium] {
+  background-color: var(--pte-new-colors-backgroundPositiveMedium);
+  border-color: var(--pte-new-colors-contentPositiveMedium);
+}
+.paris_positive_RauML[data-status=strong] {
+  background-color: var(--pte-new-colors-backgroundPositiveStrong);
+  border-color: var(--pte-new-colors-contentPositiveStrong);
+}
+
+.paris_warning_Ch7Pn {
+  color: var(--pte-new-colors-contentWarning);
+  background-color: var(--pte-new-colors-backgroundWarning);
+  border-color: var(--pte-new-colors-contentWarning);
+}
+.paris_warning_Ch7Pn[data-status=medium] {
+  background-color: var(--pte-new-colors-backgroundWarningMedium);
+  border-color: var(--pte-new-colors-contentWarningMedium);
+}
+.paris_warning_Ch7Pn[data-status=strong] {
+  background-color: var(--pte-new-colors-backgroundWarningStrong);
+  border-color: var(--pte-new-colors-contentWarningStrong);
+}
+
+.paris_negative_HlkYZ {
+  color: var(--pte-new-colors-contentNegative);
+  background-color: var(--pte-new-colors-backgroundNegative);
+  border-color: var(--pte-new-colors-contentNegative);
+}
+.paris_negative_HlkYZ[data-status=medium] {
+  background-color: var(--pte-new-colors-backgroundNegativeMedium);
+  border-color: var(--pte-new-colors-contentNegativeMedium);
+}
+.paris_negative_HlkYZ[data-status=strong] {
+  background-color: var(--pte-new-colors-backgroundNegativeStrong);
+  border-color: var(--pte-new-colors-contentNegativeStrong);
+}
+
+.paris_void_KWTJM {
+  background-color: var(--pte-new-colors-backgroundSecondary);
+  color: var(--pte-new-colors-contentDisabled);
+  border-color: var(--pte-new-colors-contentDisabled);
+}
+
+.paris_draft_Y1UjW {
+  background-color: transparent;
+  color: var(--pte-new-colors-contentTertiary);
+  border: 1px dashed var(--pte-new-colors-borderMedium);
+}
+
+.paris_new_5Kd0m {
+  color: var(--pte-new-colors-contentPrimary);
+  background-color: var(--pte-new-colors-backgroundAccentMedium);
+  animation: paris_glow_6NhRz 2s infinite var(--pte-new-animations-timing-easeInOut);
+  border: 1px solid var(--pte-new-colors-contentAccent);
+}
+
+@keyframes paris_glow_6NhRz {
+  0%, 100% {
+    box-shadow: var(--pte-new-lighting-glowSubtle1), var(--pte-new-lighting-glowSubtle2), var(--pte-new-lighting-glowSubtle3);
+  }
+  50% {
+    box-shadow: var(--pte-new-lighting-glowDeep1), var(--pte-new-lighting-glowDeep2), var(--pte-new-lighting-glowDeep3);
+  }
+}

package/dist/stories/tag/Tag.module.scss.js

@@ -0,0 +1,38 @@
+import './Tag.module.css';const tag = "paris_tag_QE3dx";
+const normal = "paris_normal_8yko9";
+const rectangle = "paris_rectangle_0M8zy";
+const sharp = "paris_sharp_Qf5k1";
+const secondary = "paris_secondary_yPIwf";
+const draft = "paris_draft_Y1UjW";
+const square = "paris_square_xlGrW";
+const compact = "paris_compact_0Tvlm";
+const rounded = "paris_rounded_e7vdE";
+const roundedXL = "paris_roundedXL_Hgswm";
+const icon = "paris_icon_FxMyh";
+const positive = "paris_positive_RauML";
+const warning = "paris_warning_Ch7Pn";
+const negative = "paris_negative_HlkYZ";
+const glow = "paris_glow_6NhRz";
+const styles = {
+	tag: tag,
+	normal: normal,
+	rectangle: rectangle,
+	sharp: sharp,
+	secondary: secondary,
+	draft: draft,
+	"new": "paris_new_5Kd0m",
+	square: square,
+	compact: compact,
+	rounded: rounded,
+	roundedXL: roundedXL,
+	icon: icon,
+	"default": "paris_default_6fhzM",
+	positive: positive,
+	warning: warning,
+	negative: negative,
+	"void": "paris_void_KWTJM",
+	glow: glow
+};
+
+export { compact, styles as default, draft, glow, icon, negative, normal, positive, rectangle, rounded, roundedXL, secondary, sharp, square, tag, warning };
+//# sourceMappingURL=Tag.module.scss.js.map

package/dist/stories/tag/Tag.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/stories/tag/index.js

@@ -0,0 +1,2 @@
+export { CornerPresets, Tag } from './Tag.js';
+//# sourceMappingURL=index.js.map

package/dist/stories/tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/stories/text/Text.d.ts

@@ -0,0 +1,52 @@
+import { CSSColor } from '@ssh/csstypes';
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
+import { LightTheme } from '../theme';
+export type TextElement = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'legend' | 'caption' | 'small';
+export type GlobalCSSValues = 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
+export type TextProps<T extends TextElement = TextElement> = {
+    /**
+     * The font class to use.
+     * @default paragraphMedium
+     */
+    kind?: keyof typeof LightTheme.typography.styles;
+    /**
+     * The HTML text tag to use.
+     * @default span
+     */
+    as?: T;
+    /**
+     * The font weight to apply.
+     */
+    weight?: keyof typeof LightTheme.typography.fontWeights;
+    /**
+     * The font style to apply.
+     */
+    fontStyle?: keyof typeof LightTheme.typography.fontStyles;
+    /**
+     * A color to apply.
+     */
+    color?: CSSColor;
+    /** The contents of the Text element. */
+    children: ReactNode;
+} & ComponentPropsWithoutRef<T>;
+/**
+ * A `Text` component is used to render text with one of our theme formats.
+ *
+ * <hr />
+ *
+ * To use the `Text` component, import it as follows:
+ *
+ * ```tsx
+ * import { Text } from 'paris/text';
+ *
+ * export const ExampleHeading: FC = () => (
+ *     <Text as="h1" kind="headingLarge" weight="bold" fontStyle="italic">Hello World!</Text>
+ * );
+ * ```
+ *
+ * @example ```tsx
+ * <Text as="h1" kind="headingLarge">Hello World!</Text>
+ * ```
+ * @constructor
+ */
+export declare const Text: import('react').MemoExoticComponent<(<T extends TextElement = TextElement>({ kind, as, weight, fontStyle, color, children, ...props }: TextProps<T>) => ReactElement)>;

package/dist/stories/text/Text.js

@@ -0,0 +1,37 @@
+import { clsx } from 'clsx';
+import { memo, createElement } from 'react';
+import styles from './Text.module.scss.js';
+import typography from './Typography.module.css.js';
+
+const Text = memo(
+  ({
+    kind,
+    as,
+    weight,
+    fontStyle,
+    color,
+    children,
+    ...props
+  }) => createElement(
+    as || "span",
+    {
+      ...props,
+      className: clsx(
+        styles.text,
+        typography[kind || "paragraphMedium"],
+        weight && styles[`weight-${weight}`],
+        fontStyle && styles[`fontStyle-${fontStyle}`],
+        props?.className
+      ),
+      ...color ? {
+        style: {
+          "--text-color": color
+        }
+      } : {}
+    },
+    children
+  )
+);
+
+export { Text };
+//# sourceMappingURL=Text.js.map

package/dist/stories/text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../../../src/stories/text/Text.tsx"],"sourcesContent":["import type { CSSColor } from '@ssh/csstypes';\nimport { clsx } from 'clsx';\nimport type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';\nimport { createElement, memo } from 'react';\nimport type { LightTheme } from '../theme';\nimport styles from './Text.module.scss';\nimport typography from './Typography.module.css';\n\nexport type TextElement =\n    | 'p'\n    | 'span'\n    | 'div'\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'h6'\n    | 'label'\n    | 'legend'\n    | 'caption'\n    | 'small';\nexport type GlobalCSSValues = 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';\n\nexport type TextProps<T extends TextElement = TextElement> = {\n    /**\n     * The font class to use.\n     * @default paragraphMedium\n     */\n    kind?: keyof typeof LightTheme.typography.styles;\n\n    /**\n     * The HTML text tag to use.\n     * @default span\n     */\n    as?: T;\n\n    /**\n     * The font weight to apply.\n     */\n    weight?: keyof typeof LightTheme.typography.fontWeights;\n\n    /**\n     * The font style to apply.\n     */\n    fontStyle?: keyof typeof LightTheme.typography.fontStyles;\n\n    /**\n     * A color to apply.\n     */\n    color?: CSSColor;\n\n    /** The contents of the Text element. */\n    children: ReactNode;\n} & ComponentPropsWithoutRef<T>;\n\n/**\n * A `Text` component is used to render text with one of our theme formats.\n *\n * <hr />\n *\n * To use the `Text` component, import it as follows:\n *\n * ```tsx\n * import { Text } from 'paris/text';\n *\n * export const ExampleHeading: FC = () => (\n *     <Text as=\"h1\" kind=\"headingLarge\" weight=\"bold\" fontStyle=\"italic\">Hello World!</Text>\n * );\n * ```\n *\n * @example ```tsx\n * <Text as=\"h1\" kind=\"headingLarge\">Hello World!</Text>\n * ```\n * @constructor\n */\nexport const Text = memo(\n    <T extends TextElement = TextElement>({\n        kind,\n        as,\n        weight,\n        fontStyle,\n        color,\n        children,\n        ...props\n    }: TextProps<T>): ReactElement =>\n        createElement(\n            as || 'span',\n            {\n                ...props,\n                className: clsx(\n                    styles.text,\n                    typography[kind || 'paragraphMedium'],\n                    weight && styles[`weight-${weight}`],\n                    fontStyle && styles[`fontStyle-${fontStyle}`],\n                    props?.className,\n                ),\n                ...(color\n                    ? {\n                          style: {\n                              '--text-color': color,\n                          },\n                      }\n                    : {}),\n            },\n            children,\n        ),\n);\n"],"names":[],"mappings":";;;;;AA4EO,MAAM,IAAA,GAAO,IAAA;AAAA,EAChB,CAAsC;AAAA,IAClC,IAAA;AAAA,IACA,EAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACP,KACI,aAAA;AAAA,IACI,EAAA,IAAM,MAAA;AAAA,IACN;AAAA,MACI,GAAG,KAAA;AAAA,MACH,SAAA,EAAW,IAAA;AAAA,QACP,MAAA,CAAO,IAAA;AAAA,QACP,UAAA,CAAW,QAAQ,iBAAiB,CAAA;AAAA,QACpC,MAAA,IAAU,MAAA,CAAO,CAAA,OAAA,EAAU,MAAM,CAAA,CAAE,CAAA;AAAA,QACnC,SAAA,IAAa,MAAA,CAAO,CAAA,UAAA,EAAa,SAAS,CAAA,CAAE,CAAA;AAAA,QAC5C,KAAA,EAAO;AAAA,OACX;AAAA,MACA,GAAI,KAAA,GACE;AAAA,QACI,KAAA,EAAO;AAAA,UACH,cAAA,EAAgB;AAAA;AACpB,UAEJ;AAAC,KACX;AAAA,IACA;AAAA;AAEZ;;;;"}

package/dist/stories/text/Text.module.css

@@ -0,0 +1,54 @@
+.paris_text_RV-f- {
+  font-family: var(--pte-typography-fontFamily);
+  color: var(--text-color);
+}
+
+/* Font weight theme values */
+.paris_weight-thin_VdyKV {
+  font-weight: var(--pte-typography-fontWeights-thin) !important;
+}
+
+.paris_weight-extralight_v2q7X {
+  font-weight: var(--pte-typography-fontWeights-extralight) !important;
+}
+
+.paris_weight-light_M9spZ {
+  font-weight: var(--pte-typography-fontWeights-light) !important;
+}
+
+.paris_weight-normal_LewA5 {
+  font-weight: var(--pte-typography-fontWeights-normal) !important;
+}
+
+.paris_weight-medium_GHnah {
+  font-weight: var(--pte-typography-fontWeights-medium) !important;
+}
+
+.paris_weight-semibold_WyV-- {
+  font-weight: var(--pte-typography-fontWeights-semibold) !important;
+}
+
+.paris_weight-bold_hsKog {
+  font-weight: var(--pte-typography-fontWeights-bold) !important;
+}
+
+.paris_weight-extrabold_PQngW {
+  font-weight: var(--pte-typography-fontWeights-extrabold) !important;
+}
+
+.paris_weight-black_ukoVu {
+  font-weight: var(--pte-typography-fontWeights-black) !important;
+}
+
+.paris_weight-extrablack_Jg1hX {
+  font-weight: var(--pte-typography-fontWeights-extrablack) !important;
+}
+
+/* Font style theme values */
+.paris_fontStyle-normal_hecdJ {
+  font-style: var(--pte-typography-fontStyles-normal) !important;
+}
+
+.paris_fontStyle-italic_TlCEh {
+  font-style: var(--pte-typography-fontStyles-italic) !important;
+}

package/dist/stories/text/Text.module.scss.js

@@ -0,0 +1,19 @@
+import './Text.module.css';const text = "paris_text_RV-f-";
+const styles = {
+	text: text,
+	"weight-thin": "paris_weight-thin_VdyKV",
+	"weight-extralight": "paris_weight-extralight_v2q7X",
+	"weight-light": "paris_weight-light_M9spZ",
+	"weight-normal": "paris_weight-normal_LewA5",
+	"weight-medium": "paris_weight-medium_GHnah",
+	"weight-semibold": "paris_weight-semibold_WyV--",
+	"weight-bold": "paris_weight-bold_hsKog",
+	"weight-extrabold": "paris_weight-extrabold_PQngW",
+	"weight-black": "paris_weight-black_ukoVu",
+	"weight-extrablack": "paris_weight-extrablack_Jg1hX",
+	"fontStyle-normal": "paris_fontStyle-normal_hecdJ",
+	"fontStyle-italic": "paris_fontStyle-italic_TlCEh"
+};
+
+export { styles as default, text };
+//# sourceMappingURL=Text.module.scss.js.map

package/dist/stories/text/Text.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}