@preply/ds-web-lib 10.0.0 → 11.1.0

package/dist/IconTile-D1G7MljH.js

@@ -1,172 +0,0 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { moduleClassNames, getDatasetProps } from "@preply/ds-web-core";
-import { forwardRef, useContext, Children, cloneElement, isValidElement } from "react";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import "./components/Accordion/Accordion.js";
-import "./components/AlertDialog/AlertDialog.js";
-import { AlertBannerComponentContext } from "./components/AlertBanner/primitives/AlertBannerRoot.js";
-import "./components/AlertBanner/primitives/AlertBannerIcon.js";
-import { FormattedMessage } from "react-intl";
-import { s as styles$1 } from "./AlertBannerProvider-DTx2Xp3V.js";
-import "./components/Avatar/Avatar.js";
-import "./components/AvatarWithStatus/AvatarWithStatus.js";
-import "./components/Badge/Badge.js";
-import "./components/Box/Box.js";
-import { Button } from "./components/Button/Button.js";
-import "./components/CalloutBanner/CalloutBanner.js";
-import "./components/CalloutBanner/primitives/CalloutBannerDismissButton.js";
-import "./components/CalloutBanner/primitives/CalloutBannerIcon.js";
-import "./components/CalloutBanner/primitives/CalloutBannerRoot.js";
-import "./components/CalloutBanner/primitives/CalloutBannerText.js";
-import "./components/Checkbox/Checkbox.js";
-import "./components/Chips/SingleSelectChips.js";
-import "./components/Chips/MultiSelectChips.js";
-import "./components/Chips/DismissibleChips.js";
-import "./components/OnboardingTour/OnboardingTour.js";
-import "@preply/ds-web-root";
-import "./components/Dialog/primitives/DialogTitle.js";
-import "./components/Dialog/primitives/DialogDescription.js";
-import "./components/Dialog/primitives/DialogCloseButton.js";
-import "./components/Dialog/primitives/DialogButtonStack.js";
-import "./components/Dialog/DialogSteps.js";
-import "./components/DropdownMenu/DropdownMenu.js";
-import "./components/FieldButton/FieldButton.js";
-import "./components/CountryFlag/CountryFlag.js";
-import "radix-ui";
-import "./components/Heading/Heading.js";
-import { Icon } from "./components/Icon/Icon.js";
-import { IconButton } from "./components/IconButton/IconButton.js";
-import "./components/LayoutFlex/LayoutFlex.js";
-import "./components/LayoutFlexItem/LayoutFlexItem.js";
-import "./components/LayoutGrid/LayoutGrid.js";
-import "./components/LayoutGridItem/LayoutGridItem.js";
-import "./components/Link/Link.js";
-import "./components/Loader/Loader.js";
-import "./components/NumberField/NumberField.js";
-import "@preply/ds-core";
-import "./components/OnboardingTooltip/OnboardingTooltip.js";
-import "./components/PasswordField/PasswordField.js";
-import "./components/PreplyLogo/PreplyLogo.js";
-import "@preply/ds-media-icons/dist/24/TokyoUIStar.svg";
-import "@preply/ds-media-icons/dist/24/TokyoUIStarFilled.svg";
-import "./utils/render-icon.js";
-import "./components/Rating/RatingInput.js";
-import "./components/SelectField/SelectField.js";
-import "./Slider-DB4Maswa.js";
-import "./components/Slider/RangeSlider.js";
-import "./components/Steps/Steps.js";
-import "./components/Switch/Switch.js";
-import { Text } from "./components/Text/Text.js";
-import "./components/TextareaField/TextareaField.js";
-import "./components/TextField/TextField.js";
-import "./components/TextHighlighted/TextHighlighted.js";
-import "./components/TextInline/TextInline.js";
-import "./components/Toast/Toast.js";
-import "./components/Tooltip/Tooltip.js";
-import { VisuallyHidden } from "./components/private/VisuallyHidden/VisuallyHidden.js";
-import './assets/IconTile.css';const alertBannerA11yPrefixMap = {
-  critical: /* @__PURE__ */ jsx(FormattedMessage, { id: "preply-ds.alert-banner.critical-prefix", defaultMessage: [{
-    "type": 0,
-    "value": "Alert:"
-  }] }),
-  warning: /* @__PURE__ */ jsx(FormattedMessage, { id: "preply-ds.alert-banner.warning-prefix", defaultMessage: [{
-    "type": 0,
-    "value": "Warning:"
-  }] }),
-  positive: /* @__PURE__ */ jsx(FormattedMessage, { id: "preply-ds.alert-banner.positive-prefix", defaultMessage: [{
-    "type": 0,
-    "value": "Update:"
-  }] })
-};
-const AlertBannerText = forwardRef(function AlertBannerText2({
-  className,
-  children,
-  ...props
-}, ref) {
-  const {
-    variant
-  } = useContext(AlertBannerComponentContext);
-  const classNames = [styles$1.description, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs(Text, { ref, variant: "default-regular", accent: "primary", className: classNames, ...props, children: [
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: alertBannerA11yPrefixMap[variant] }),
-    " ",
-    children
-  ] });
-});
-const buttonDefaultProps = {
-  variant: "secondary",
-  size: "small",
-  wrap: true,
-  fullWidth: {
-    _: true,
-    "medium-l": false
-  }
-};
-const AlertBannerAction = forwardRef(function AlertBannerAction2({
-  className,
-  children,
-  ...props
-}, ref) {
-  const classNames = [styles$1.action, className].filter(Boolean).join(" ");
-  const patchedChildren = Children.map(children, (child) => {
-    if (!isDsButton(child)) {
-      return child;
-    }
-    return cloneElement(child, {
-      ...buttonDefaultProps,
-      ...child.props,
-      ref,
-      ...props
-    });
-  });
-  return (
-    // The container here is necessary because Button doesn't accept `classname`.
-    /* @__PURE__ */ jsx("div", { className: classNames, "data-preply-ds-component": webComponentNames.AlertBannerAction, children: patchedChildren })
-  );
-});
-function isDsButton(node) {
-  if (!isValidElement(node)) return false;
-  return node.type === Button || node.type === IconButton;
-}
-const IconTile$1 = "IconTile__JN1Mo";
-const styles = {
-  IconTile: IconTile$1,
-  "IconTile--size-small": "IconTile--size-small__8PuLN",
-  "IconTile--size-base": "IconTile--size-base__8cobE",
-  "IconTile--size-medium": "IconTile--size-medium__AYnun",
-  "IconTile--size-large": "IconTile--size-large__R159S",
-  "IconTile--tone-neutral": "IconTile--tone-neutral__RakY4",
-  "IconTile--tone-info": "IconTile--tone-info__yqu8Y",
-  "IconTile--tone-ai": "IconTile--tone-ai__IsgQT",
-  "IconTile--tone-positive": "IconTile--tone-positive__5fQ5C",
-  "IconTile--tone-warning": "IconTile--tone-warning__wCeLx",
-  "IconTile--tone-critical": "IconTile--tone-critical__FeCE3"
-};
-function getIconSize(size) {
-  switch (size) {
-    case "small":
-      return "16";
-    case "medium":
-      return "32";
-    case "large":
-      return "48";
-  }
-  return "24";
-}
-const IconTile = forwardRef(function IconComponent({
-  size = "base",
-  tone = "neutral",
-  dataset,
-  ...iconProps
-}, ref) {
-  const classNames = moduleClassNames(styles, webComponentNames.IconTile, [`size-${size}`, `tone-${tone}`]);
-  return /* @__PURE__ */ jsx("span", { className: classNames.join(" "), ...getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.IconTile
-  }), children: /* @__PURE__ */ jsx(Icon, { ...iconProps, accent: "primary", size: getIconSize(size), ref }) });
-});
-export {
-  AlertBannerAction as A,
-  IconTile as I,
-  AlertBannerText as a
-};

package/dist/InputContainer-oHJlLWIi.js

@@ -1,30 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import './assets/InputContainer.css';const container = "container__B-gQ9";
-const input = "input__WZN7y";
-const icon = "icon__6Xfum";
-const trailingIcon = "trailingIcon__Bgnv4";
-const button = "button__auAU0";
-const styles = {
-  container,
-  input,
-  icon,
-  trailingIcon,
-  button
-};
-function InputContainer({
-  button: button2,
-  icon: icon2,
-  trailingIcon: trailingIcon2,
-  children
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    !!icon2 && /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon2 }),
-    children,
-    !!trailingIcon2 && /* @__PURE__ */ jsx("span", { className: styles.trailingIcon, children: trailingIcon2 }),
-    !!button2 && /* @__PURE__ */ jsx("span", { className: styles.button, children: button2 })
-  ] });
-}
-export {
-  InputContainer as I,
-  styles as s
-};

package/dist/Slider-DB4Maswa.js

@@ -1,55 +0,0 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { Slider as Slider$1 } from "radix-ui";
-import { getDatasetProps } from "@preply/ds-web-core";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import './assets/Slider.css';const root = "root__QwW3E";
-const track = "track__iifdu";
-const range = "range__ZdmUh";
-const thumb = "thumb__7W7O-";
-const styles = {
-  root,
-  track,
-  range,
-  thumb
-};
-function filterThumbProps(props) {
-  const thumbProps = {};
-  Object.entries(props).forEach(([key, value]) => {
-    switch (key) {
-      case "id":
-      case "aria-label":
-      case "aria-labelledby":
-      case "aria-describedby":
-      case "aria-invalid":
-      case "aria-errormessage":
-        thumbProps[key] = value;
-    }
-  });
-  return thumbProps;
-}
-const Slider = forwardRef(function Slider2({
-  value,
-  defaultValue = 0,
-  onValueChange,
-  min = 0,
-  max = 100,
-  step = 1,
-  dataset,
-  ...thumbProps
-}, ref) {
-  const datasetProps = getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.Slider
-  });
-  const handleValueChange = onValueChange ? (newValue) => onValueChange(newValue[0]) : void 0;
-  return /* @__PURE__ */ jsxs(Slider$1.Root, { ref, ...datasetProps, className: styles.root, value: value !== void 0 ? [value] : void 0, defaultValue: defaultValue !== void 0 ? [defaultValue] : void 0, onValueChange: handleValueChange, min, max, step, children: [
-    /* @__PURE__ */ jsx(Slider$1.Track, { className: styles.track, children: /* @__PURE__ */ jsx(Slider$1.Range, { className: styles.range }) }),
-    /* @__PURE__ */ jsx(Slider$1.Thumb, { ...filterThumbProps(thumbProps), className: styles.thumb })
-  ] });
-});
-export {
-  Slider as S,
-  filterThumbProps as f,
-  styles as s
-};

package/dist/Stars-C_mHop2H.js

@@ -1,67 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import StarIcon from "@preply/ds-media-icons/dist/24/TokyoUIStar.svg";
-import StarFilledIcon from "@preply/ds-media-icons/dist/24/TokyoUIStarFilled.svg";
-import { renderIcon } from "./utils/render-icon.js";
-import './assets/Stars.css';const rating = "rating__Le8xf";
-const ratingInput = "ratingInput__aOeLl";
-const stars = "stars__7wYnu";
-const styles = {
-  rating,
-  "rating--size-small": "rating--size-small__mIdaG",
-  "rating--size-medium": "rating--size-medium__2tNG2",
-  "rating--size-large": "rating--size-large__tZXTm",
-  "rating--narrow-l--size-small": "rating--narrow-l--size-small__nDn-T",
-  "rating--narrow-l--size-medium": "rating--narrow-l--size-medium__Vfex3",
-  "rating--narrow-l--size-large": "rating--narrow-l--size-large__YVlZT",
-  "rating--medium-s--size-small": "rating--medium-s--size-small__tDVGz",
-  "rating--medium-s--size-medium": "rating--medium-s--size-medium__m53Rx",
-  "rating--medium-s--size-large": "rating--medium-s--size-large__QaGl7",
-  "rating--medium-l--size-small": "rating--medium-l--size-small__6rJT2",
-  "rating--medium-l--size-medium": "rating--medium-l--size-medium__PPIhH",
-  "rating--medium-l--size-large": "rating--medium-l--size-large__WIjDu",
-  "rating--wide-s--size-small": "rating--wide-s--size-small__8ulej",
-  "rating--wide-s--size-medium": "rating--wide-s--size-medium__2FRMh",
-  "rating--wide-s--size-large": "rating--wide-s--size-large__mc81k",
-  "rating--wide-l--size-small": "rating--wide-l--size-small__JpDLa",
-  "rating--wide-l--size-medium": "rating--wide-l--size-medium__WvAyR",
-  "rating--wide-l--size-large": "rating--wide-l--size-large__VXvoH",
-  ratingInput,
-  stars,
-  "ratingInput--dsInternalSimulation-hover": "ratingInput--dsInternalSimulation-hover__YfddP",
-  "focus-style": "focus-style__SSYAT",
-  "ratingInput--dsInternalSimulation-focus": "ratingInput--dsInternalSimulation-focus__18rP3"
-};
-function FilledStars({
-  filledPerc
-}) {
-  return /* @__PURE__ */ jsxs("div", { "data-filled": "true", style: {
-    width: `${filledPerc * 100}%`
-  }, children: [
-    renderIcon(StarFilledIcon),
-    renderIcon(StarFilledIcon),
-    renderIcon(StarFilledIcon),
-    renderIcon(StarFilledIcon),
-    renderIcon(StarFilledIcon)
-  ] });
-}
-function EmptyStars() {
-  return /* @__PURE__ */ jsxs("div", { "data-filled": "false", children: [
-    renderIcon(StarIcon),
-    renderIcon(StarIcon),
-    renderIcon(StarIcon),
-    renderIcon(StarIcon),
-    renderIcon(StarIcon)
-  ] });
-}
-function Stars({
-  filledPerc
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: styles.stars, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx(FilledStars, { filledPerc }),
-    /* @__PURE__ */ jsx(EmptyStars, {})
-  ] });
-}
-export {
-  Stars as S,
-  styles as s
-};

package/dist/TokyoUIChevronDown-D_tD1yU8.js

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { forwardRef } from "react";
-const SvgTokyoUiChevronDown = ({
-  title,
-  titleId,
-  ...props
-}, ref) => /* @__PURE__ */ React.createElement("svg", { "data-preply-ds-component": "SvgTokyoUIIcon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ref, "aria-labelledby": titleId, ...props }, title ? /* @__PURE__ */ React.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement("path", { d: "M18.707 9.707 12 16.414 5.293 9.707l1.414-1.414L12 13.586l5.293-5.293z" }));
-const ForwardRef = forwardRef(SvgTokyoUiChevronDown);
-export {
-  ForwardRef as F
-};

package/dist/floating-ui.utils.dom-BvMNldxo.js

@@ -1,234 +0,0 @@
-"use client";
-import * as React from "react";
-import { a as useRefWithInit, E as EMPTY_OBJECT } from "./useRenderElement-BSthtPOr.js";
-const useInsertionEffect = React[`useInsertionEffect${Math.random().toFixed(1)}`.slice(0, -3)];
-const useSafeInsertionEffect = (
-  // React 17 doesn't have useInsertionEffect.
-  useInsertionEffect && // Preact replaces useInsertionEffect with useLayoutEffect and fires too late.
-  useInsertionEffect !== React.useLayoutEffect ? useInsertionEffect : (fn) => fn()
-);
-function useEventCallback(callback) {
-  const stable = useRefWithInit(createStableCallback).current;
-  stable.next = callback;
-  useSafeInsertionEffect(stable.effect);
-  return stable.trampoline;
-}
-function createStableCallback() {
-  const stable = {
-    next: void 0,
-    callback: assertNotCalled,
-    trampoline: (...args) => {
-      var _a;
-      return (_a = stable.callback) == null ? void 0 : _a.call(stable, ...args);
-    },
-    effect: () => {
-      stable.callback = stable.next;
-    }
-  };
-  return stable;
-}
-function assertNotCalled() {
-  if (process.env.NODE_ENV !== "production") {
-    throw new Error("Base UI: Cannot call an event handler while rendering.");
-  }
-}
-const noop = () => {
-};
-const useIsoLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : noop;
-function createChangeEventDetails(reason, event, customProperties) {
-  let canceled = false;
-  let allowPropagation = false;
-  const custom = EMPTY_OBJECT;
-  return {
-    reason,
-    event: event != null ? event : new Event("base-ui"),
-    cancel() {
-      canceled = true;
-    },
-    allowPropagation() {
-      allowPropagation = true;
-    },
-    get isCanceled() {
-      return canceled;
-    },
-    get isPropagationAllowed() {
-      return allowPropagation;
-    },
-    ...custom
-  };
-}
-function hasWindow() {
-  return typeof window !== "undefined";
-}
-function getNodeName(node) {
-  if (isNode(node)) {
-    return (node.nodeName || "").toLowerCase();
-  }
-  return "#document";
-}
-function getWindow(node) {
-  var _node$ownerDocument;
-  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
-}
-function getDocumentElement(node) {
-  var _ref;
-  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
-}
-function isNode(value) {
-  if (!hasWindow()) {
-    return false;
-  }
-  return value instanceof Node || value instanceof getWindow(value).Node;
-}
-function isElement(value) {
-  if (!hasWindow()) {
-    return false;
-  }
-  return value instanceof Element || value instanceof getWindow(value).Element;
-}
-function isHTMLElement(value) {
-  if (!hasWindow()) {
-    return false;
-  }
-  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
-}
-function isShadowRoot(value) {
-  if (!hasWindow() || typeof ShadowRoot === "undefined") {
-    return false;
-  }
-  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
-}
-const invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
-function isOverflowElement(element) {
-  const {
-    overflow,
-    overflowX,
-    overflowY,
-    display
-  } = getComputedStyle(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
-}
-const tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
-function isTableElement(element) {
-  return tableElements.has(getNodeName(element));
-}
-const topLayerSelectors = [":popover-open", ":modal"];
-function isTopLayer(element) {
-  return topLayerSelectors.some((selector) => {
-    try {
-      return element.matches(selector);
-    } catch (_e) {
-      return false;
-    }
-  });
-}
-const transformProperties = ["transform", "translate", "scale", "rotate", "perspective"];
-const willChangeValues = ["transform", "translate", "scale", "rotate", "perspective", "filter"];
-const containValues = ["paint", "layout", "strict", "content"];
-function isContainingBlock(elementOrCss) {
-  const webkit = isWebKit();
-  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
-  return transformProperties.some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || willChangeValues.some((value) => (css.willChange || "").includes(value)) || containValues.some((value) => (css.contain || "").includes(value));
-}
-function getContainingBlock(element) {
-  let currentNode = getParentNode(element);
-  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    if (isContainingBlock(currentNode)) {
-      return currentNode;
-    } else if (isTopLayer(currentNode)) {
-      return null;
-    }
-    currentNode = getParentNode(currentNode);
-  }
-  return null;
-}
-function isWebKit() {
-  if (typeof CSS === "undefined" || !CSS.supports) return false;
-  return CSS.supports("-webkit-backdrop-filter", "none");
-}
-const lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#document"]);
-function isLastTraversableNode(node) {
-  return lastTraversableNodeNames.has(getNodeName(node));
-}
-function getComputedStyle(element) {
-  return getWindow(element).getComputedStyle(element);
-}
-function getNodeScroll(element) {
-  if (isElement(element)) {
-    return {
-      scrollLeft: element.scrollLeft,
-      scrollTop: element.scrollTop
-    };
-  }
-  return {
-    scrollLeft: element.scrollX,
-    scrollTop: element.scrollY
-  };
-}
-function getParentNode(node) {
-  if (getNodeName(node) === "html") {
-    return node;
-  }
-  const result = (
-    // Step into the shadow DOM of the parent of a slotted node.
-    node.assignedSlot || // DOM Element detected.
-    node.parentNode || // ShadowRoot detected.
-    isShadowRoot(node) && node.host || // Fallback.
-    getDocumentElement(node)
-  );
-  return isShadowRoot(result) ? result.host : result;
-}
-function getNearestOverflowAncestor(node) {
-  const parentNode = getParentNode(node);
-  if (isLastTraversableNode(parentNode)) {
-    return node.ownerDocument ? node.ownerDocument.body : node.body;
-  }
-  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
-    return parentNode;
-  }
-  return getNearestOverflowAncestor(parentNode);
-}
-function getOverflowAncestors(node, list, traverseIframes) {
-  var _node$ownerDocument2;
-  if (list === void 0) {
-    list = [];
-  }
-  if (traverseIframes === void 0) {
-    traverseIframes = true;
-  }
-  const scrollableAncestor = getNearestOverflowAncestor(node);
-  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
-  const win = getWindow(scrollableAncestor);
-  if (isBody) {
-    const frameElement = getFrameElement(win);
-    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
-  }
-  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
-}
-function getFrameElement(win) {
-  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
-}
-export {
-  useIsoLayoutEffect as a,
-  isShadowRoot as b,
-  createChangeEventDetails as c,
-  isNode as d,
-  getWindow as e,
-  isElement as f,
-  getNodeName as g,
-  isLastTraversableNode as h,
-  isHTMLElement as i,
-  getParentNode as j,
-  getComputedStyle as k,
-  getOverflowAncestors as l,
-  isWebKit as m,
-  getDocumentElement as n,
-  getFrameElement as o,
-  isTopLayer as p,
-  isTableElement as q,
-  isContainingBlock as r,
-  getContainingBlock as s,
-  isOverflowElement as t,
-  useEventCallback as u,
-  getNodeScroll as v
-};

package/dist/index.module-Q9TzIR6B.js

@@ -1,11 +0,0 @@
-import './assets/index.css';const banner = "banner__5hj7e";
-const icon = "icon__Z3toC";
-const dismissButton = "dismissButton__nEoLr";
-const styles = {
-  banner,
-  icon,
-  dismissButton
-};
-export {
-  styles as s
-};