@drivy/cobalt 0.12.0 → 0.14.0

package/components/Calendar/CalendarView/CalendarViewMonth.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarViewMonth.js","sources":["../../../../src/components/Calendar/CalendarView/CalendarViewMonth.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport {\n  setDate,\n  getISODay,\n  getDaysInMonth,\n  endOfMonth,\n  differenceInCalendarWeeks,\n  isPast,\n  isToday,\n  format,\n} from \"date-fns\"\nimport cx from \"classnames\"\nimport {\n  CalendarViewMonthType,\n  MonthType,\n  CalendarViewDateType,\n  DateType,\n} from \"./types\"\n\ntype Props = MonthType\n\nconst CalendarViewMonth = ({\n  monthName,\n  monthStart,\n  statusByDate = {},\n}: Props) => {\n  const getMonthByWeek = (): CalendarViewMonthType => {\n    const daysInMonth = getDaysInMonth(monthStart)\n    const weeksInMonth =\n      differenceInCalendarWeeks(endOfMonth(monthStart), monthStart, {\n        weekStartsOn: 1,\n      }) + 1\n    const weekDay = getISODay(monthStart)\n    const month: CalendarViewDateType[][] = []\n    let cursor = 0\n    let date = 0\n\n    for (let week = 0; week < weeksInMonth; week++) {\n      month[week] = []\n      for (let day = 0; day < 7; day++) {\n        month[week][day] = { date: null }\n\n        if (cursor >= weekDay - 1 && date < daysInMonth) {\n          month[week][day].date = ++date as DateType\n\n          const currentDate = setDate(monthStart, date)\n\n          month[week][day].status =\n            isPast(currentDate) && !isToday(currentDate)\n              ? \"past\"\n              : statusByDate[format(currentDate, \"YYYY-MM-DD\")]\n        }\n        cursor++\n      }\n    }\n    return month\n  }\n\n  const monthByWeek = useMemo(() => getMonthByWeek(), [])\n\n  return (\n    <div className=\"cobalt-CalendarView__month\">\n      <div className=\"cobalt-CalendarView__monthName\">{monthName}</div>\n      {monthByWeek.map((week, weekIndex) => (\n        <div key={weekIndex} className=\"cobalt-CalendarView__week\">\n          {week.map((day, dayIndex) => (\n            <div\n              key={weekIndex + 1 * dayIndex + 1}\n              className={cx(\"cobalt-CalendarView__day\", {\n                [`cobalt-CalendarView__day--${day.status}`]: day.status,\n              })}\n            >\n              {day.date}\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nCalendarViewMonth.displayName = \"CalendarViewMonth\"\n\nexport default CalendarViewMonth\n"],"names":[],"mappings":";;;;IAqBM,iBAAiB,GAAG,UAAC,EAInB;QAHN,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA;IAEjB,IAAM,cAAc,GAAG;QACrB,IAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;QAC9C,IAAM,YAAY,GAChB,yBAAyB,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE;YAC5D,YAAY,EAAE,CAAC;SAChB,CAAC,GAAG,CAAC,CAAA;QACR,IAAM,OAAO,GAAG,SAAS,CAAC,UAAU,CAAC,CAAA;QACrC,IAAM,KAAK,GAA6B,EAAE,CAAA;QAC1C,IAAI,MAAM,GAAG,CAAC,CAAA;QACd,IAAI,IAAI,GAAG,CAAC,CAAA;QAEZ,KAAK,IAAI,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,IAAI,EAAE,EAAE;YAC9C,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAA;YAChB,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE;gBAChC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;gBAEjC,IAAI,MAAM,IAAI,OAAO,GAAG,CAAC,IAAI,IAAI,GAAG,WAAW,EAAE;oBAC/C,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,EAAE,IAAgB,CAAA;oBAE1C,IAAM,WAAW,GAAG,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;oBAE7C,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM;wBACrB,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;8BACxC,MAAM;8BACN,YAAY,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAA;iBACtD;gBACD,MAAM,EAAE,CAAA;aACT;SACF;QACD,OAAO,KAAK,CAAA;KACb,CAAA;IAED,IAAM,WAAW,GAAG,OAAO,CAAC,cAAM,OAAA,cAAc,EAAE,GAAA,EAAE,EAAE,CAAC,CAAA;IAEvD,QACE,6BAAK,SAAS,EAAC,4BAA4B;QACzC,6BAAK,SAAS,EAAC,gCAAgC,IAAE,SAAS,CAAO;QAChE,WAAW,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,SAAS,IAAK,QACpC,6BAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,2BAA2B,IACvD,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,QAAQ;;YAAK,QAC3B,6BACE,GAAG,EAAE,SAAS,GAAG,CAAC,GAAG,QAAQ,GAAG,CAAC,EACjC,SAAS,EAAE,EAAE,CAAC,0BAA0B;oBACtC,GAAC,+BAA6B,GAAG,CAAC,MAAQ,IAAG,GAAG,CAAC,MAAM;wBACvD,IAED,GAAG,CAAC,IAAI,CACL;SACP,CAAC,CACE,IACP,CAAC,CACE,EACP;AACH,EAAC;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}
+{"version":3,"file":"CalendarViewMonth.js","sources":["../../../../src/components/Calendar/CalendarView/CalendarViewMonth.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport {\n  setDate,\n  getISODay,\n  getDaysInMonth,\n  endOfMonth,\n  differenceInCalendarWeeks,\n  isPast,\n  isToday,\n  format,\n} from \"date-fns\"\nimport cx from \"classnames\"\nimport {\n  CalendarViewMonthType,\n  MonthType,\n  CalendarViewDateType,\n  DateType,\n} from \"./types\"\n\ntype Props = MonthType\n\nconst CalendarViewMonth = ({\n  monthName,\n  monthStart,\n  statusByDate = {},\n}: Props) => {\n  const getMonthByWeek = (): CalendarViewMonthType => {\n    const daysInMonth = getDaysInMonth(monthStart)\n    const weeksInMonth =\n      differenceInCalendarWeeks(endOfMonth(monthStart), monthStart, {\n        weekStartsOn: 1,\n      }) + 1\n    const weekDay = getISODay(monthStart)\n    const month: CalendarViewDateType[][] = []\n    let cursor = 0\n    let date = 0\n\n    for (let week = 0; week < weeksInMonth; week++) {\n      month[week] = []\n      for (let day = 0; day < 7; day++) {\n        month[week][day] = { date: null }\n\n        if (cursor >= weekDay - 1 && date < daysInMonth) {\n          month[week][day].date = ++date as DateType\n\n          const currentDate = setDate(monthStart, date)\n\n          month[week][day].status =\n            isPast(currentDate) && !isToday(currentDate)\n              ? \"past\"\n              : statusByDate[format(currentDate, \"yyyy-MM-dd\")]\n        }\n        cursor++\n      }\n    }\n    return month\n  }\n\n  const monthByWeek = useMemo(() => getMonthByWeek(), [])\n\n  return (\n    <div className=\"cobalt-CalendarView__month\">\n      <div className=\"cobalt-CalendarView__monthName\">{monthName}</div>\n      {monthByWeek.map((week, weekIndex) => (\n        <div key={weekIndex} className=\"cobalt-CalendarView__week\">\n          {week.map((day, dayIndex) => (\n            <div\n              key={weekIndex + 1 * dayIndex + 1}\n              className={cx(\"cobalt-CalendarView__day\", {\n                [`cobalt-CalendarView__day--${day.status}`]: day.status,\n              })}\n            >\n              {day.date}\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nCalendarViewMonth.displayName = \"CalendarViewMonth\"\n\nexport default CalendarViewMonth\n"],"names":[],"mappings":";;;;IAqBM,iBAAiB,GAAG,UAAC,EAInB;QAHN,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA;IAEjB,IAAM,cAAc,GAAG;QACrB,IAAM,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;QAC9C,IAAM,YAAY,GAChB,yBAAyB,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE;YAC5D,YAAY,EAAE,CAAC;SAChB,CAAC,GAAG,CAAC,CAAA;QACR,IAAM,OAAO,GAAG,SAAS,CAAC,UAAU,CAAC,CAAA;QACrC,IAAM,KAAK,GAA6B,EAAE,CAAA;QAC1C,IAAI,MAAM,GAAG,CAAC,CAAA;QACd,IAAI,IAAI,GAAG,CAAC,CAAA;QAEZ,KAAK,IAAI,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,IAAI,EAAE,EAAE;YAC9C,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAA;YAChB,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE;gBAChC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;gBAEjC,IAAI,MAAM,IAAI,OAAO,GAAG,CAAC,IAAI,IAAI,GAAG,WAAW,EAAE;oBAC/C,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,EAAE,IAAgB,CAAA;oBAE1C,IAAM,WAAW,GAAG,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;oBAE7C,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM;wBACrB,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;8BACxC,MAAM;8BACN,YAAY,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAA;iBACtD;gBACD,MAAM,EAAE,CAAA;aACT;SACF;QACD,OAAO,KAAK,CAAA;KACb,CAAA;IAED,IAAM,WAAW,GAAG,OAAO,CAAC,cAAM,OAAA,cAAc,EAAE,GAAA,EAAE,EAAE,CAAC,CAAA;IAEvD,QACE,6BAAK,SAAS,EAAC,4BAA4B;QACzC,6BAAK,SAAS,EAAC,gCAAgC,IAAE,SAAS,CAAO;QAChE,WAAW,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,SAAS,IAAK,QACpC,6BAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,2BAA2B,IACvD,IAAI,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,QAAQ;;YAAK,QAC3B,6BACE,GAAG,EAAE,SAAS,GAAG,CAAC,GAAG,QAAQ,GAAG,CAAC,EACjC,SAAS,EAAE,EAAE,CAAC,0BAA0B;oBACtC,GAAC,oCAA6B,GAAG,CAAC,MAAM,CAAE,IAAG,GAAG,CAAC,MAAM;wBACvD,IAED,GAAG,CAAC,IAAI,CACL;SACP,CAAC,CACE,IACP,CAAC,CACE,EACP;AACH,EAAC;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}

package/components/Callout/index.js

@@ -14,6 +14,5 @@ var Callout = function (_a) {
             React.createElement("span", { "aria-hidden": "true" }, "\u00D7")))));
 };
 
-export default Callout;
-export { Callout };
+export { Callout, Callout as default };
 //# sourceMappingURL=index.js.map

package/components/Callout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Callout/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface CalloutProps {\n  children: React.ReactNode\n  title?: string\n  status: \"info\" | \"error\" | \"success\"\n  close?: () => void\n}\n\nexport const Callout = ({\n  title,\n  children,\n  status = \"info\",\n  close,\n}: CalloutProps) => (\n  <div\n    className={cx(\"cobalt-Callout cobalt-bottom_margin_tight\", {\n      \"cobalt-Callout--info\": status === \"info\",\n      \"cobalt-Callout--error\": status === \"error\",\n      \"cobalt-Callout--success\": status === \"success\",\n    })}\n  >\n    {title && <div className=\"cobalt-Callout__Title\">{title}</div>}\n    <p>{children}</p>\n    {close && (\n      <button className=\"cobalt-Callout__Close\" onClick={close} type=\"button\">\n        <span aria-hidden=\"true\">×</span>\n      </button>\n    )}\n  </div>\n)\n\nexport default Callout\n"],"names":[],"mappings":";;;IAUa,OAAO,GAAG,UAAC,EAKT;QAJb,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,cAAe,EAAf,MAAM,mBAAG,MAAM,KAAA,EACf,KAAK,WAAA;IACa,QAClB,6BACE,SAAS,EAAE,EAAE,CAAC,2CAA2C,EAAE;YACzD,sBAAsB,EAAE,MAAM,KAAK,MAAM;YACzC,uBAAuB,EAAE,MAAM,KAAK,OAAO;YAC3C,yBAAyB,EAAE,MAAM,KAAK,SAAS;SAChD,CAAC;QAED,KAAK,IAAI,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAO;QAC9D,+BAAI,QAAQ,CAAK;QAChB,KAAK,KACJ,gCAAQ,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ;YACrE,6CAAkB,MAAM,aAAS,CAC1B,CACV,CACG;AAfY;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Callout/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface CalloutProps {\n  children: React.ReactNode\n  title?: string\n  status: \"info\" | \"error\" | \"success\"\n  close?: () => void\n}\n\nexport const Callout = ({\n  title,\n  children,\n  status = \"info\",\n  close,\n}: CalloutProps) => (\n  <div\n    className={cx(\"cobalt-Callout cobalt-bottom_margin_tight\", {\n      \"cobalt-Callout--info\": status === \"info\",\n      \"cobalt-Callout--error\": status === \"error\",\n      \"cobalt-Callout--success\": status === \"success\",\n    })}\n  >\n    {title && <div className=\"cobalt-Callout__Title\">{title}</div>}\n    <p>{children}</p>\n    {close && (\n      <button className=\"cobalt-Callout__Close\" onClick={close} type=\"button\">\n        <span aria-hidden=\"true\">×</span>\n      </button>\n    )}\n  </div>\n)\n\nexport default Callout\n"],"names":[],"mappings":";;;IAUa,OAAO,GAAG,UAAC,EAKT;QAJb,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,cAAe,EAAf,MAAM,mBAAG,MAAM,KAAA,EACf,KAAK,WAAA;IACa,QAClB,6BACE,SAAS,EAAE,EAAE,CAAC,2CAA2C,EAAE;YACzD,sBAAsB,EAAE,MAAM,KAAK,MAAM;YACzC,uBAAuB,EAAE,MAAM,KAAK,OAAO;YAC3C,yBAAyB,EAAE,MAAM,KAAK,SAAS;SAChD,CAAC;QAED,KAAK,IAAI,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAO;QAC9D,+BAAI,QAAQ,CAAK;QAChB,KAAK,KACJ,gCAAQ,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ;YACrE,6CAAkB,MAAM,aAAS,CAC1B,CACV,CACG;AAfY;;;;"}

package/components/Card/index.js

@@ -35,6 +35,5 @@ var CardSection = /** @class */ (function (_super) {
     return CardSection;
 }(PureComponent));
 
-export default Card;
-export { Card, CardSection };
+export { Card, CardSection, Card as default };
 //# sourceMappingURL=index.js.map

package/components/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import React, { PureComponent, PropsWithChildren } from \"react\"\nimport cx from \"classnames\"\n\nexport type CardProps = PropsWithChildren<{\n  className?: string\n  flattened?: boolean\n}>\n\nexport const Card = ({ children, className, flattened }: CardProps) => (\n  <div\n    className={cx(\"cobalt-Card\", className, {\n      \"cobalt-Card--flattened\": flattened,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport type CardSectionProps = {\n  children: React.ReactNode\n  tabBar?: boolean\n  tight?: boolean\n  subdued?: boolean\n  /**\n   * true or \"soft\"\n   * @default false\n   */\n  divided?: boolean | string\n}\n\nexport type CardSectionLinkProps = CardSectionProps & {\n  href: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"href\"]\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"]\n  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"rel\"]\n}\n\nconst getClasses = ({ tabBar, tight, subdued, divided }: CardSectionProps) => {\n  return cx(\"cobalt-Card__Section\", {\n    \"cobalt-Card__Section--tabBar\": tabBar === true,\n    \"cobalt-Card__Section--tight\": tight === true,\n    \"cobalt-Card__Section--subdued\": subdued === true,\n    \"cobalt-Card__Section--divided\": divided === true,\n    \"cobalt-Card__Section--dividedSoft\": divided === \"soft\",\n  })\n}\n\nconst CardSectionLink = ({\n  href,\n  target,\n  rel,\n  ...baseProps\n}: CardSectionLinkProps) => {\n  return (\n    <a\n      className={getClasses(baseProps)}\n      href={href}\n      target={target}\n      rel={target && !rel ? \"noopener noreferrer\" : rel}\n    >\n      {baseProps.children}\n    </a>\n  )\n}\nCardSectionLink.displayName = \"CardSection.Link\"\n\nexport class CardSection extends PureComponent<CardSectionProps, never> {\n  static Link = CardSectionLink\n  render() {\n    return <div className={getClasses(this.props)}>{this.props.children}</div>\n  }\n}\n\nexport default Card\n"],"names":[],"mappings":";;;;IAQa,IAAI,GAAG,UAAC,EAA6C;QAA3C,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAA;IAAkB,QACrE,6BACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,wBAAwB,EAAE,SAAS;SACpC,CAAC,IAED,QAAQ,CACL;AAP+D,EAQtE;AAoBD,IAAM,UAAU,GAAG,UAAC,EAAqD;QAAnD,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,OAAO,aAAA;IACnD,OAAO,EAAE,CAAC,sBAAsB,EAAE;QAChC,8BAA8B,EAAE,MAAM,KAAK,IAAI;QAC/C,6BAA6B,EAAE,KAAK,KAAK,IAAI;QAC7C,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,mCAAmC,EAAE,OAAO,KAAK,MAAM;KACxD,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,IAAM,eAAe,GAAG,UAAC,EAKF;IAJrB,IAAA,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,GAAG,SAAA,EACA,SAAS,cAJW,yBAKxB,CADa;IAEZ,QACE,2BACE,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,EAChC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,qBAAqB,GAAG,GAAG,IAEhD,SAAS,CAAC,QAAQ,CACjB,EACL;AACH,CAAC,CAAA;AACD,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAA;;IAEf,+BAAsC;IAAvE;;KAKC;IAHC,4BAAM,GAAN;QACE,OAAO,6BAAK,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAA;KAC3E;IAHM,gBAAI,GAAG,eAAe,CAAA;IAI/B,kBAAC;CAAA,CALgC,aAAa;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import React, { PureComponent, PropsWithChildren } from \"react\"\nimport cx from \"classnames\"\n\nexport type CardProps = PropsWithChildren<{\n  className?: string\n  flattened?: boolean\n}>\n\nexport const Card = ({ children, className, flattened }: CardProps) => (\n  <div\n    className={cx(\"cobalt-Card\", className, {\n      \"cobalt-Card--flattened\": flattened,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport type CardSectionProps = {\n  children: React.ReactNode\n  tabBar?: boolean\n  tight?: boolean\n  subdued?: boolean\n  /**\n   * true or \"soft\"\n   * @default false\n   */\n  divided?: boolean | string\n}\n\nexport type CardSectionLinkProps = CardSectionProps & {\n  href: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"href\"]\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"]\n  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"rel\"]\n}\n\nconst getClasses = ({ tabBar, tight, subdued, divided }: CardSectionProps) => {\n  return cx(\"cobalt-Card__Section\", {\n    \"cobalt-Card__Section--tabBar\": tabBar === true,\n    \"cobalt-Card__Section--tight\": tight === true,\n    \"cobalt-Card__Section--subdued\": subdued === true,\n    \"cobalt-Card__Section--divided\": divided === true,\n    \"cobalt-Card__Section--dividedSoft\": divided === \"soft\",\n  })\n}\n\nconst CardSectionLink = ({\n  href,\n  target,\n  rel,\n  ...baseProps\n}: CardSectionLinkProps) => {\n  return (\n    <a\n      className={getClasses(baseProps)}\n      href={href}\n      target={target}\n      rel={target && !rel ? \"noopener noreferrer\" : rel}\n    >\n      {baseProps.children}\n    </a>\n  )\n}\nCardSectionLink.displayName = \"CardSection.Link\"\n\nexport class CardSection extends PureComponent<CardSectionProps, never> {\n  static Link = CardSectionLink\n  render() {\n    return <div className={getClasses(this.props)}>{this.props.children}</div>\n  }\n}\n\nexport default Card\n"],"names":[],"mappings":";;;;IAQa,IAAI,GAAG,UAAC,EAA6C;QAA3C,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAA;IAAkB,QACrE,6BACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,wBAAwB,EAAE,SAAS;SACpC,CAAC,IAED,QAAQ,CACL;AAP+D,EAQtE;AAoBD,IAAM,UAAU,GAAG,UAAC,EAAqD;QAAnD,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,OAAO,aAAA;IACnD,OAAO,EAAE,CAAC,sBAAsB,EAAE;QAChC,8BAA8B,EAAE,MAAM,KAAK,IAAI;QAC/C,6BAA6B,EAAE,KAAK,KAAK,IAAI;QAC7C,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,mCAAmC,EAAE,OAAO,KAAK,MAAM;KACxD,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,IAAM,eAAe,GAAG,UAAC,EAKF;IAJrB,IAAA,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,GAAG,SAAA,EACA,SAAS,cAJW,yBAKxB,CADa;IAEZ,QACE,2BACE,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,EAChC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,qBAAqB,GAAG,GAAG,IAEhD,SAAS,CAAC,QAAQ,CACjB,EACL;AACH,CAAC,CAAA;AACD,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAA;;IAEf,+BAAsC;IAAvE;;KAKC;IAHC,4BAAM,GAAN;QACE,OAAO,6BAAK,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAA;KAC3E;IAHM,gBAAI,GAAG,eAAe,CAAA;IAI/B,kBAAC;CAAA,CALgC,aAAa;;;;"}

package/components/Cell/index.js

@@ -14,6 +14,5 @@ function Cells(_a) {
     return (React.createElement(React.Fragment, null, content.map(function (c, i) { return (React.createElement(Cell, __assign({ key: i }, cellProps), c)); })));
 }
 
-export default Cell;
-export { Cells };
+export { Cells, Cell as default };
 //# sourceMappingURL=index.js.map

package/components/Cell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Cell/index.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\"\nimport cx from \"classnames\"\n\nexport type CellPropsType = PropsWithChildren<{\n  divided?: boolean\n  className?: string\n}>\nexport type CellSoftPropsType = PropsWithChildren<{\n  softDivided?: boolean\n  className?: string\n}>\n\nexport type CellsPropsType = {\n  content: CellPropsType[\"children\"][]\n} & Omit<CellPropsType, \"children\">\nexport type CellsSoftPropsType = {\n  content: CellSoftPropsType[\"children\"][]\n} & Omit<CellSoftPropsType, \"children\">\n\nfunction Cell(props: CellPropsType): JSX.Element\nfunction Cell(props: CellSoftPropsType): JSX.Element\nfunction Cell({\n  children,\n  divided,\n  softDivided,\n  className,\n}: CellPropsType & CellSoftPropsType): JSX.Element {\n  return (\n    <div\n      className={cx(\"cobalt-cell\", className, {\n        \"cobalt-cell--divided\": divided,\n        \"cobalt-cell--softDivided\": softDivided,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport function Cells(props: CellsPropsType): JSX.Element\nexport function Cells(props: CellsSoftPropsType): JSX.Element\nexport function Cells({\n  content,\n  ...cellProps\n}: CellsPropsType & CellsSoftPropsType): JSX.Element {\n  return (\n    <>\n      {content.map((c, i) => (\n        <Cell key={i} {...cellProps}>\n          {c}\n        </Cell>\n      ))}\n    </>\n  )\n}\n\nexport default Cell\n"],"names":[],"mappings":";;;;AAqBA,SAAS,IAAI,CAAC,EAKsB;QAJlC,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,SAAS,eAAA;IAET,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,sBAAsB,EAAE,OAAO;YAC/B,0BAA0B,EAAE,WAAW;SACxC,CAAC,IAED,QAAQ,CACL,EACP;AACH,CAAC;SAIe,KAAK,CAAC,EAGgB;IAFpC,IAAA,OAAO,aAAA,EACJ,SAAS,cAFQ,WAGrB,CADa;IAEZ,QACE,0CACG,OAAO,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,QACrB,oBAAC,IAAI,aAAC,GAAG,EAAE,CAAC,IAAM,SAAS,GACxB,CAAC,CACG,IACR,CAAC,CACD,EACJ;AACH;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Cell/index.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\"\nimport cx from \"classnames\"\n\nexport type CellPropsType = PropsWithChildren<{\n  divided?: boolean\n  className?: string\n}>\nexport type CellSoftPropsType = PropsWithChildren<{\n  softDivided?: boolean\n  className?: string\n}>\n\nexport type CellsPropsType = {\n  content: CellPropsType[\"children\"][]\n} & Omit<CellPropsType, \"children\">\nexport type CellsSoftPropsType = {\n  content: CellSoftPropsType[\"children\"][]\n} & Omit<CellSoftPropsType, \"children\">\n\nfunction Cell(props: CellPropsType): JSX.Element\nfunction Cell(props: CellSoftPropsType): JSX.Element\nfunction Cell({\n  children,\n  divided,\n  softDivided,\n  className,\n}: CellPropsType & CellSoftPropsType): JSX.Element {\n  return (\n    <div\n      className={cx(\"cobalt-cell\", className, {\n        \"cobalt-cell--divided\": divided,\n        \"cobalt-cell--softDivided\": softDivided,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport function Cells(props: CellsPropsType): JSX.Element\nexport function Cells(props: CellsSoftPropsType): JSX.Element\nexport function Cells({\n  content,\n  ...cellProps\n}: CellsPropsType & CellsSoftPropsType): JSX.Element {\n  return (\n    <>\n      {content.map((c, i) => (\n        <Cell key={i} {...cellProps}>\n          {c}\n        </Cell>\n      ))}\n    </>\n  )\n}\n\nexport default Cell\n"],"names":[],"mappings":";;;;AAqBA,SAAS,IAAI,CAAC,EAKsB;QAJlC,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,SAAS,eAAA;IAET,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,sBAAsB,EAAE,OAAO;YAC/B,0BAA0B,EAAE,WAAW;SACxC,CAAC,IAED,QAAQ,CACL,EACP;AACH,CAAC;SAIe,KAAK,CAAC,EAGgB;IAFpC,IAAA,OAAO,aAAA,EACJ,SAAS,cAFQ,WAGrB,CADa;IAEZ,QACE,0CACG,OAAO,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,QACrB,oBAAC,IAAI,aAAC,GAAG,EAAE,CAAC,IAAM,SAAS,GACxB,CAAC,CACG,IACR,CAAC,CACD,EACJ;AACH;;;;"}

package/components/Chip/index.js

@@ -19,7 +19,7 @@ var Chip = function (_a) {
             "cobalt-Chip--active": active,
         }) },
         React.createElement("div", { className: "cobalt-Chip__Content" },
-            React.createElement("div", { className: "cobalt-Chip__Image", style: { backgroundImage: "url(" + image + ")" } }),
+            React.createElement("div", { className: "cobalt-Chip__Image", style: { backgroundImage: "url(".concat(image, ")") } }),
             React.createElement("div", { className: "cobalt-Chip__Text" }, text))));
 };
 

package/components/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Chip/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface ChipProps {\n  onClick?(): void\n  text: string\n  image: string\n  size?: \"large\"\n  disabled?: boolean\n  active?: boolean\n}\n\nexport interface ChipWrapperProps {\n  onClick?(): void\n  children: React.ReactElement\n  disabled?: boolean\n  className: string\n}\n\nconst ChipWrapper = (props: ChipWrapperProps) => {\n  if (props.onClick) {\n    return (\n      <button {...props} type=\"button\" disabled={props.disabled}>\n        {props.children}\n      </button>\n    )\n  } else {\n    return <div {...props}>{props.children}</div>\n  }\n}\n\nexport const Chip = ({\n  onClick,\n  text,\n  image,\n  size,\n  disabled,\n  active,\n}: ChipProps) => {\n  return (\n    <ChipWrapper\n      onClick={onClick}\n      disabled={disabled}\n      className={cx(\"cobalt-Chip\", {\n        \"cobalt-Chip--large\": size === \"large\",\n        \"cobalt-Chip--disabled\": disabled,\n        \"cobalt-Chip--interactive\": !!onClick,\n        \"cobalt-Chip--active\": active,\n      })}\n    >\n      <div className=\"cobalt-Chip__Content\">\n        <div\n          className=\"cobalt-Chip__Image\"\n          style={{ backgroundImage: `url(${image})` }}\n        />\n        <div className=\"cobalt-Chip__Text\">{text}</div>\n      </div>\n    </ChipWrapper>\n  )\n}\n"],"names":[],"mappings":";;;;AAmBA,IAAM,WAAW,GAAG,UAAC,KAAuB;IAC1C,IAAI,KAAK,CAAC,OAAO,EAAE;QACjB,QACE,2CAAY,KAAK,IAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,KACtD,KAAK,CAAC,QAAQ,CACR,EACV;KACF;SAAM;QACL,OAAO,wCAAS,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAO,CAAA;KAC9C;AACH,CAAC,CAAA;IAEY,IAAI,GAAG,UAAC,EAOT;QANV,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,MAAM,YAAA;IAEN,QACE,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE;YAC3B,oBAAoB,EAAE,IAAI,KAAK,OAAO;YACtC,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,CAAC,CAAC,OAAO;YACrC,qBAAqB,EAAE,MAAM;SAC9B,CAAC;QAEF,6BAAK,SAAS,EAAC,sBAAsB;YACnC,6BACE,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,EAAE,eAAe,EAAE,SAAO,KAAK,MAAG,EAAE,GAC3C;YACF,6BAAK,SAAS,EAAC,mBAAmB,IAAE,IAAI,CAAO,CAC3C,CACM,EACf;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Chip/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface ChipProps {\n  onClick?(): void\n  text: string\n  image: string\n  size?: \"large\"\n  disabled?: boolean\n  active?: boolean\n}\n\nexport interface ChipWrapperProps {\n  onClick?(): void\n  children: React.ReactElement\n  disabled?: boolean\n  className: string\n}\n\nconst ChipWrapper = (props: ChipWrapperProps) => {\n  if (props.onClick) {\n    return (\n      <button {...props} type=\"button\" disabled={props.disabled}>\n        {props.children}\n      </button>\n    )\n  } else {\n    return <div {...props}>{props.children}</div>\n  }\n}\n\nexport const Chip = ({\n  onClick,\n  text,\n  image,\n  size,\n  disabled,\n  active,\n}: ChipProps) => {\n  return (\n    <ChipWrapper\n      onClick={onClick}\n      disabled={disabled}\n      className={cx(\"cobalt-Chip\", {\n        \"cobalt-Chip--large\": size === \"large\",\n        \"cobalt-Chip--disabled\": disabled,\n        \"cobalt-Chip--interactive\": !!onClick,\n        \"cobalt-Chip--active\": active,\n      })}\n    >\n      <div className=\"cobalt-Chip__Content\">\n        <div\n          className=\"cobalt-Chip__Image\"\n          style={{ backgroundImage: `url(${image})` }}\n        />\n        <div className=\"cobalt-Chip__Text\">{text}</div>\n      </div>\n    </ChipWrapper>\n  )\n}\n"],"names":[],"mappings":";;;;AAmBA,IAAM,WAAW,GAAG,UAAC,KAAuB;IAC1C,IAAI,KAAK,CAAC,OAAO,EAAE;QACjB,QACE,2CAAY,KAAK,IAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,KACtD,KAAK,CAAC,QAAQ,CACR,EACV;KACF;SAAM;QACL,OAAO,wCAAS,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAO,CAAA;KAC9C;AACH,CAAC,CAAA;IAEY,IAAI,GAAG,UAAC,EAOT;QANV,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,MAAM,YAAA;IAEN,QACE,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE;YAC3B,oBAAoB,EAAE,IAAI,KAAK,OAAO;YACtC,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,CAAC,CAAC,OAAO;YACrC,qBAAqB,EAAE,MAAM;SAC9B,CAAC;QAEF,6BAAK,SAAS,EAAC,sBAAsB;YACnC,6BACE,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,EAAE,eAAe,EAAE,cAAO,KAAK,MAAG,EAAE,GAC3C;YACF,6BAAK,SAAS,EAAC,mBAAmB,IAAE,IAAI,CAAO,CAC3C,CACM,EACf;AACH;;;;"}

package/components/Flag/index.js

@@ -21,7 +21,7 @@ var Flag = function (_a) {
     });
     var countryFlag = BUNDLED_FLAGS[country];
     if (countryFlag == null)
-        throw new Error("'" + country + "' Flag can not be found. Did you add the source and export it");
+        throw new Error("'".concat(country, "' Flag can not be found. Did you add the source and export it"));
     return (React.createElement("span", { className: className, dangerouslySetInnerHTML: { __html: countryFlag } }));
 };
 

package/components/Flag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Flag/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { countries } from \"../../tokens\"\n\nimport * as flags from \"../../icons/countries\"\nimport { eqSet } from \"../utils\"\n\nif (\n  !eqSet<string>(\n    new Set(Object.keys(flags)),\n    new Set(Object.keys(countries.flags))\n  )\n)\n  throw new Error(\n    \"Flag sources and tokens are not consistent. Did you add the source and export it\"\n  )\n\ninterface FlagsMap {\n  [name: string]: string\n}\n\nexport const BUNDLED_FLAGS: FlagsMap = Object.freeze(\n  Object.keys(countries.flags).reduce(\n    (bundledFlags, name) => ({\n      ...bundledFlags,\n      [name]: (flags as FlagsMap)[name],\n    }),\n    {}\n  )\n)\n\nexport interface FlagProps {\n  country: string\n  /**\n   * Available size in px\n   * @default 24\n   */\n  size?: 16 | 20 | 24 | 32\n}\n\nexport const Flag = ({ country, size = 24 }: FlagProps) => {\n  const className = cx(\"cobalt-Flag\", {\n    \"cobalt-Flag--size16\": size === 16,\n    \"cobalt-Flag--size20\": size === 20,\n    \"cobalt-Flag--size32\": size === 32,\n  })\n\n  const countryFlag = BUNDLED_FLAGS[country]\n\n  if (countryFlag == null)\n    throw new Error(\n      `'${country}' Flag can not be found. Did you add the source and export it`\n    )\n\n  return (\n    <span\n      className={className}\n      dangerouslySetInnerHTML={{ __html: countryFlag }}\n    />\n  )\n}\n"],"names":["flags"],"mappings":";;;;;;;;AAOA,IACE,CAAC,KAAK,CACJ,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACA,KAAK,CAAC,CAAC,EAC3B,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CACtC;IAED,MAAM,IAAI,KAAK,CACb,kFAAkF,CACnF,CAAA;IAMU,aAAa,GAAa,MAAM,CAAC,MAAM,CAClD,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CACjC,UAAC,YAAY,EAAE,IAAI;;IAAK,8BACnB,YAAY,gBACd,IAAI,IAAIA,KAAkB,CAAC,IAAI,CAAC;AAFX,CAGtB,EACF,EAAE,CACH,EACF;IAWY,IAAI,GAAG,UAAC,EAAiC;QAA/B,OAAO,aAAA,EAAE,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA;IACvC,IAAM,SAAS,GAAG,EAAE,CAAC,aAAa,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;KACnC,CAAC,CAAA;IAEF,IAAM,WAAW,GAAG,aAAa,CAAC,OAAO,CAAC,CAAA;IAE1C,IAAI,WAAW,IAAI,IAAI;QACrB,MAAM,IAAI,KAAK,CACb,MAAI,OAAO,kEAA+D,CAC3E,CAAA;IAEH,QACE,8BACE,SAAS,EAAE,SAAS,EACpB,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,GAChD,EACH;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Flag/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { countries } from \"../../tokens\"\n\nimport * as flags from \"../../icons/countries\"\nimport { eqSet } from \"../utils\"\n\nif (\n  !eqSet<string>(\n    new Set(Object.keys(flags)),\n    new Set(Object.keys(countries.flags))\n  )\n)\n  throw new Error(\n    \"Flag sources and tokens are not consistent. Did you add the source and export it\"\n  )\n\ninterface FlagsMap {\n  [name: string]: string\n}\n\nexport const BUNDLED_FLAGS: FlagsMap = Object.freeze(\n  Object.keys(countries.flags).reduce(\n    (bundledFlags, name) => ({\n      ...bundledFlags,\n      [name]: (flags as FlagsMap)[name],\n    }),\n    {}\n  )\n)\n\nexport interface FlagProps {\n  country: string\n  /**\n   * Available size in px\n   * @default 24\n   */\n  size?: 16 | 20 | 24 | 32\n}\n\nexport const Flag = ({ country, size = 24 }: FlagProps) => {\n  const className = cx(\"cobalt-Flag\", {\n    \"cobalt-Flag--size16\": size === 16,\n    \"cobalt-Flag--size20\": size === 20,\n    \"cobalt-Flag--size32\": size === 32,\n  })\n\n  const countryFlag = BUNDLED_FLAGS[country]\n\n  if (countryFlag == null)\n    throw new Error(\n      `'${country}' Flag can not be found. Did you add the source and export it`\n    )\n\n  return (\n    <span\n      className={className}\n      dangerouslySetInnerHTML={{ __html: countryFlag }}\n    />\n  )\n}\n"],"names":["flags"],"mappings":";;;;;;;;AAOA,IACE,CAAC,KAAK,CACJ,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACA,KAAK,CAAC,CAAC,EAC3B,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CACtC;IAED,MAAM,IAAI,KAAK,CACb,kFAAkF,CACnF,CAAA;IAMU,aAAa,GAAa,MAAM,CAAC,MAAM,CAClD,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CACjC,UAAC,YAAY,EAAE,IAAI;;IAAK,8BACnB,YAAY,gBACd,IAAI,IAAIA,KAAkB,CAAC,IAAI,CAAC;AAFX,CAGtB,EACF,EAAE,CACH,EACF;IAWY,IAAI,GAAG,UAAC,EAAiC;QAA/B,OAAO,aAAA,EAAE,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA;IACvC,IAAM,SAAS,GAAG,EAAE,CAAC,aAAa,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;KACnC,CAAC,CAAA;IAEF,IAAM,WAAW,GAAG,aAAa,CAAC,OAAO,CAAC,CAAA;IAE1C,IAAI,WAAW,IAAI,IAAI;QACrB,MAAM,IAAI,KAAK,CACb,WAAI,OAAO,kEAA+D,CAC3E,CAAA;IAEH,QACE,8BACE,SAAS,EAAE,SAAS,EACpB,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,GAChD,EACH;AACH;;;;"}

package/components/Form/Autocomplete/index.js

@@ -41,15 +41,25 @@ function Autocomplete(_a) {
     var giveInputFocus = function () {
         inputEl.current && inputEl.current.focus();
     };
+    var forceIdTimer = useRef();
+    var focusTimer = useRef();
+    var blurTimer = useRef();
+    var clearInputTimer = useRef();
     function forceId() {
         // id is overriden by Reach ui Combobox
-        setTimeout(function () {
+        forceIdTimer.current = setTimeout(function () {
             id && inputEl.current && inputEl.current.setAttribute("id", id);
         });
     }
     useEffect(function () {
         // on mount ...
         focusOnInit && giveInputFocus();
+        return function () {
+            forceIdTimer.current && clearTimeout(forceIdTimer.current);
+            focusTimer.current && clearTimeout(focusTimer.current);
+            blurTimer.current && clearTimeout(blurTimer.current);
+            clearInputTimer.current && clearTimeout(clearInputTimer.current);
+        };
     }, []);
     useEffect(function () {
         forceId();
@@ -60,7 +70,7 @@ function Autocomplete(_a) {
     var handleFocus = function (event) {
         !ignoreFocus && onFocus && onFocus(event);
         ignoreFocus = false;
-        setTimeout(function () {
+        focusTimer.current = setTimeout(function () {
             // required by "forceDisplayResults" mechanism
             setHasFocus(true);
         }, 100);
@@ -68,7 +78,7 @@ function Autocomplete(_a) {
     var handleBlur = function (event) {
         // blur interceptor required by "forceDisplayResults" mechanism
         onBlur && onBlur(event);
-        setTimeout(function () {
+        blurTimer.current = setTimeout(function () {
             setHasFocus(false);
         }, 100);
     };
@@ -83,7 +93,7 @@ function Autocomplete(_a) {
     var handleClearInput = function () {
         setTerm("");
         onQueryChange && onQueryChange("");
-        setTimeout(giveInputFocus); //timeout to trigger openOnFocus
+        clearInputTimer.current = setTimeout(giveInputFocus); //timeout to trigger openOnFocus
     };
     var handleSelectItem = function (item, e) {
         // item click interceptor to enable custom select cancellation

package/components/Form/Autocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, ElementType } from \"react\"\nimport { useState } from \"react\"\nimport classNames from \"classnames\"\n\nimport {\n  Combobox,\n  ComboboxInput,\n  ComboboxPopover,\n  ComboboxList,\n  ComboboxOption,\n  ComboboxOptionText,\n} from \"@reach/combobox\"\n\nimport { Icon, IconSources } from \"../../Icon\"\n\nimport { withFieldLabelAndHint } from \"../field\"\nimport { TextInputWrapper } from \"../TextInput\"\nimport { FormElement } from \"../form\"\n\nexport interface AutocompleteItem {\n  [x: string]: any\n}\n\ntype ComboboxPopoverType = ElementType<\"div\"> & HTMLDivElement\ntype ComboboxOptionType = HTMLLIElement & React.ElementType<\"li\">\ntype ComboboxOptionMouseEventType = React.MouseEvent<\n  ComboboxOptionType,\n  MouseEvent\n>\n\ntype Props = {\n  icon?: IconSources\n  items: (AutocompleteItem | string)[]\n  minQueryLength?: number\n  autoFilter?: boolean\n  selectedItem?: AutocompleteItem\n  focusOnInit?: boolean\n  autocomplete?: boolean\n  valueKey?: string\n  inputRef?: React.RefObject<HTMLInputElement>\n  autocompleteRef?: React.RefObject<HTMLDivElement>\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onQueryChange?: (term: string) => void\n  onSelectItem?: (item: AutocompleteItem, term: string) => boolean\n  renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nfunction filterMatchingItems(\n  items: AutocompleteItem[],\n  term: string,\n  minLength: number,\n  valueKey: string\n) {\n  const [matchingItems, setMatchingItems] = useState<AutocompleteItem[]>([])\n\n  useEffect(() => {\n    term.length >= minLength\n      ? setMatchingItems(\n          items.filter((item: AutocompleteItem) => {\n            return item[valueKey].toLowerCase().indexOf(term.toLowerCase()) > -1\n          })\n        )\n      : setMatchingItems([])\n  }, [items, term, valueKey])\n\n  return matchingItems\n}\n\nfunction sanitizeItems(items: (AutocompleteItem | string)[], valueKey: string) {\n  const [sanitizedItems, setSanitizedItems] = useState<AutocompleteItem[]>([])\n  useEffect(() => {\n    setSanitizedItems(\n      items.map((item) =>\n        typeof item === \"string\" ? { [valueKey]: item } : item\n      )\n    )\n  }, [items])\n  return sanitizedItems\n}\n\nfunction Autocomplete({\n  id,\n  icon,\n  status,\n  items,\n  selectedItem,\n  autoFilter = true,\n  minQueryLength = 1,\n  focusOnInit = false,\n  onKeyDown,\n  onFocus,\n  onBlur,\n  onQueryChange,\n  onSelectItem,\n  renderItem,\n  inputRef,\n  autocompleteRef,\n  valueKey = \"value\",\n  ...inputProps\n}: Props) {\n  const [term, setTerm] = useState(\"\")\n\n  const [hasFocus, setHasFocus] = useState(false)\n\n  let ignoreFocus = false // extra flag to ignore programmatical focus triggered by click on item\n\n  const results = autoFilter\n    ? filterMatchingItems(\n        sanitizeItems(items, valueKey),\n        term,\n        minQueryLength,\n        valueKey\n      )\n    : sanitizeItems(items, valueKey)\n\n  const comboboxEl = autocompleteRef || useRef<HTMLDivElement>(null)\n\n  const inputEl = inputRef || useRef<HTMLInputElement>(null)\n\n  const popoverEl = useRef<ComboboxPopoverType>(null)\n\n  const giveInputFocus = () => {\n    inputEl.current && inputEl.current.focus()\n  }\n\n  function forceId() {\n    // id is overriden by Reach ui Combobox\n    setTimeout(() => {\n      id && inputEl.current && inputEl.current.setAttribute(\"id\", id)\n    })\n  }\n\n  useEffect(() => {\n    // on mount ...\n    focusOnInit && giveInputFocus()\n  }, [])\n\n  useEffect(() => {\n    forceId()\n  }, [id])\n\n  useEffect(() => {\n    setTerm(selectedItem ? \"\" + selectedItem[valueKey] : \"\")\n  }, [selectedItem])\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    !ignoreFocus && onFocus && onFocus(event)\n    ignoreFocus = false\n    setTimeout(() => {\n      // required by \"forceDisplayResults\" mechanism\n      setHasFocus(true)\n    }, 100)\n  }\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    // blur interceptor required by \"forceDisplayResults\" mechanism\n    onBlur && onBlur(event)\n    setTimeout(() => {\n      setHasFocus(false)\n    }, 100)\n  }\n\n  const handleChange = (event: React.FocusEvent<HTMLInputElement>) => {\n    const inputValue = (event.target as HTMLInputElement).value\n    if (inputValue.trim().length || term.length) {\n      // to prevent starting with a space character\n      setTerm(inputValue)\n      onQueryChange && onQueryChange(inputValue)\n    }\n  }\n\n  const handleClearInput = () => {\n    setTerm(\"\")\n    onQueryChange && onQueryChange(\"\")\n\n    setTimeout(giveInputFocus) //timeout to trigger openOnFocus\n  }\n\n  const handleSelectItem = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType | React.KeyboardEvent<HTMLElement>\n  ) => {\n    // item click interceptor to enable custom select cancellation\n    const processSelection = onSelectItem\n      ? onSelectItem(item, term) !== false\n      : true\n\n    if (processSelection) {\n      setTerm(item[valueKey])\n    } else if (e) {\n      e.preventDefault()\n      ignoreFocus = true\n      giveInputFocus()\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDown && onKeyDown(e)\n\n    // ENTER key down interceptor to enable custom select cancellation\n    const KEY_CODE_ENTER = 13\n\n    // BACKSPACE key down interceptor to synchonize react input value and dom input value in some edge case (Comnbobox autocomplete = true)\n    const KEY_CODE_BACKSPACE = 8\n\n    if (e.keyCode === KEY_CODE_ENTER) {\n      if (!popoverEl.current) return\n\n      const options = Array.from(\n        popoverEl.current.querySelectorAll(\"[data-reach-combobox-option]\")\n      )\n\n      const selectedItemIndex = options.findIndex(\n        (el) => el.getAttribute(\"aria-selected\") === \"true\"\n      )\n\n      selectedItemIndex >= 0 && handleSelectItem(results[selectedItemIndex], e)\n    } else if (e.keyCode === KEY_CODE_BACKSPACE) {\n      if (!inputEl.current) return\n      if (inputEl.current.value.slice(0, -1) === term) {\n        setTerm(inputEl.current.value)\n      }\n    }\n  }\n\n  const shouldDisplayItemsOnEmptyQuery = () => {\n    return !autoFilter && results.length > 0 && term.length === 0 && hasFocus\n  }\n\n  const handleMouseDown = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType\n  ) => {\n    // In a specific case, we force the popover to display (results available, empty input using backspace)\n    // But doing so, reach ui component is not ready for this case and will raise an error\n    // We need to prevent the error and to force the selection\n    if (\n      shouldDisplayItemsOnEmptyQuery() &&\n      popoverEl.current &&\n      popoverEl.current.getAttribute(\"hidden\") != null\n    ) {\n      e.preventDefault() // it will prevent reach ui combobox to raise an error\n      handleSelectItem(item, e) // we force the selection to be processed\n    }\n  }\n\n  return (\n    <Combobox\n      className={classNames(\"cobalt-Autocomplete\", {\n        \"cobalt-Autocomplete--forceDisplayResults\":\n          shouldDisplayItemsOnEmptyQuery(), // Combobox Component, by design, hide the popover when the input is empty (on change) even if there are some results.\n      })}\n      as=\"div\"\n      openOnFocus={true}\n      ref={comboboxEl}\n    >\n      {results.length > 0 && (\n        <ComboboxPopover\n          className=\"cobalt-Autocomplete__popover\"\n          portal={false}\n          ref={popoverEl}\n        >\n          <ComboboxList\n            className=\"cobalt-Autocomplete__list\"\n            aria-label=\"Autocomplete option\"\n          >\n            {results.map((item, index) => (\n              <ComboboxOption\n                className=\"cobalt-Autocomplete__item\"\n                key={index}\n                value={item[valueKey]}\n                onMouseDown={(e: ComboboxOptionMouseEventType) => {\n                  handleMouseDown(item, e)\n                }}\n                onClick={(e: ComboboxOptionMouseEventType) => {\n                  handleSelectItem(item, e)\n                }}\n              >\n                {renderItem ? (\n                  renderItem(item, term)\n                ) : (\n                  <span className=\"cobalt-Autocomplete__item-wrapper\">\n                    {icon && (\n                      <span className=\"cobalt-Autocomplete__item-icon\">\n                        <Icon source={icon} color=\"indigo\" />\n                      </span>\n                    )}\n\n                    <span className=\"cobalt-Autocomplete__item-value\">\n                      <ComboboxOptionText />\n                    </span>\n                  </span>\n                )}\n              </ComboboxOption>\n            ))}\n          </ComboboxList>\n        </ComboboxPopover>\n      )}\n      <div className=\"cobalt-Autocomplete__input-wrapper\">\n        <TextInputWrapper\n          icon={icon}\n          status={status}\n          render={(className) => {\n            return (\n              <ComboboxInput\n                {...inputProps}\n                autoComplete=\"off\"\n                autoCorrect=\"off\"\n                autoCapitalize=\"off\"\n                spellCheck={false}\n                aria-label=\"autocomplete input\"\n                type=\"text\"\n                value={term}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                onKeyDown={handleKeyDown}\n                ref={inputEl}\n                className={className}\n              />\n            )\n          }}\n        />\n\n        {term && (\n          <div\n            className=\"cobalt-Autocomplete__clear-button\"\n            onClick={handleClearInput}\n          >\n            <Icon source=\"close\" size={16} />\n          </div>\n        )}\n      </div>\n    </Combobox>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Autocomplete)\nwrappedComponent.displayName = \"Autocomplete\"\n\nexport { wrappedComponent as Autocomplete }\n"],"names":["classNames"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, ElementType } from \"react\"\nimport { useState } from \"react\"\nimport classNames from \"classnames\"\n\nimport {\n  Combobox,\n  ComboboxInput,\n  ComboboxPopover,\n  ComboboxList,\n  ComboboxOption,\n  ComboboxOptionText,\n} from \"@reach/combobox\"\n\nimport { Icon, IconSources } from \"../../Icon\"\n\nimport { withFieldLabelAndHint } from \"../field\"\nimport { TextInputWrapper } from \"../TextInput\"\nimport { FormElement } from \"../form\"\n\nexport interface AutocompleteItem {\n  [x: string]: any\n}\n\ntype ComboboxPopoverType = ElementType<\"div\"> & HTMLDivElement\ntype ComboboxOptionType = HTMLLIElement & React.ElementType<\"li\">\ntype ComboboxOptionMouseEventType = React.MouseEvent<\n  ComboboxOptionType,\n  MouseEvent\n>\n\ntype Props = {\n  icon?: IconSources\n  items: (AutocompleteItem | string)[]\n  minQueryLength?: number\n  autoFilter?: boolean\n  selectedItem?: AutocompleteItem\n  focusOnInit?: boolean\n  autocomplete?: boolean\n  valueKey?: string\n  inputRef?: React.RefObject<HTMLInputElement>\n  autocompleteRef?: React.RefObject<HTMLDivElement>\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onQueryChange?: (term: string) => void\n  onSelectItem?: (item: AutocompleteItem, term: string) => boolean\n  renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nfunction filterMatchingItems(\n  items: AutocompleteItem[],\n  term: string,\n  minLength: number,\n  valueKey: string\n) {\n  const [matchingItems, setMatchingItems] = useState<AutocompleteItem[]>([])\n\n  useEffect(() => {\n    term.length >= minLength\n      ? setMatchingItems(\n          items.filter((item: AutocompleteItem) => {\n            return item[valueKey].toLowerCase().indexOf(term.toLowerCase()) > -1\n          })\n        )\n      : setMatchingItems([])\n  }, [items, term, valueKey])\n\n  return matchingItems\n}\n\nfunction sanitizeItems(items: (AutocompleteItem | string)[], valueKey: string) {\n  const [sanitizedItems, setSanitizedItems] = useState<AutocompleteItem[]>([])\n  useEffect(() => {\n    setSanitizedItems(\n      items.map((item) =>\n        typeof item === \"string\" ? { [valueKey]: item } : item\n      )\n    )\n  }, [items])\n  return sanitizedItems\n}\n\nfunction Autocomplete({\n  id,\n  icon,\n  status,\n  items,\n  selectedItem,\n  autoFilter = true,\n  minQueryLength = 1,\n  focusOnInit = false,\n  onKeyDown,\n  onFocus,\n  onBlur,\n  onQueryChange,\n  onSelectItem,\n  renderItem,\n  inputRef,\n  autocompleteRef,\n  valueKey = \"value\",\n  ...inputProps\n}: Props) {\n  const [term, setTerm] = useState(\"\")\n\n  const [hasFocus, setHasFocus] = useState(false)\n\n  let ignoreFocus = false // extra flag to ignore programmatical focus triggered by click on item\n\n  const results = autoFilter\n    ? filterMatchingItems(\n        sanitizeItems(items, valueKey),\n        term,\n        minQueryLength,\n        valueKey\n      )\n    : sanitizeItems(items, valueKey)\n\n  const comboboxEl = autocompleteRef || useRef<HTMLDivElement>(null)\n\n  const inputEl = inputRef || useRef<HTMLInputElement>(null)\n\n  const popoverEl = useRef<ComboboxPopoverType>(null)\n\n  const giveInputFocus = () => {\n    inputEl.current && inputEl.current.focus()\n  }\n\n  const forceIdTimer = useRef<any>()\n  const focusTimer = useRef<any>()\n  const blurTimer = useRef<any>()\n  const clearInputTimer = useRef<any>()\n\n  function forceId() {\n    // id is overriden by Reach ui Combobox\n    forceIdTimer.current = setTimeout(() => {\n      id && inputEl.current && inputEl.current.setAttribute(\"id\", id)\n    })\n  }\n\n  useEffect(() => {\n    // on mount ...\n    focusOnInit && giveInputFocus()\n\n    return () => {\n      forceIdTimer.current && clearTimeout(forceIdTimer.current)\n      focusTimer.current && clearTimeout(focusTimer.current)\n      blurTimer.current && clearTimeout(blurTimer.current)\n      clearInputTimer.current && clearTimeout(clearInputTimer.current)\n    }\n  }, [])\n\n  useEffect(() => {\n    forceId()\n  }, [id])\n\n  useEffect(() => {\n    setTerm(selectedItem ? \"\" + selectedItem[valueKey] : \"\")\n  }, [selectedItem])\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    !ignoreFocus && onFocus && onFocus(event)\n    ignoreFocus = false\n    focusTimer.current = setTimeout(() => {\n      // required by \"forceDisplayResults\" mechanism\n      setHasFocus(true)\n    }, 100)\n  }\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    // blur interceptor required by \"forceDisplayResults\" mechanism\n    onBlur && onBlur(event)\n    blurTimer.current = setTimeout(() => {\n      setHasFocus(false)\n    }, 100)\n  }\n\n  const handleChange = (event: React.FocusEvent<HTMLInputElement>) => {\n    const inputValue = (event.target as HTMLInputElement).value\n    if (inputValue.trim().length || term.length) {\n      // to prevent starting with a space character\n      setTerm(inputValue)\n      onQueryChange && onQueryChange(inputValue)\n    }\n  }\n\n  const handleClearInput = () => {\n    setTerm(\"\")\n    onQueryChange && onQueryChange(\"\")\n\n    clearInputTimer.current = setTimeout(giveInputFocus) //timeout to trigger openOnFocus\n  }\n\n  const handleSelectItem = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType | React.KeyboardEvent<HTMLElement>\n  ) => {\n    // item click interceptor to enable custom select cancellation\n    const processSelection = onSelectItem\n      ? onSelectItem(item, term) !== false\n      : true\n\n    if (processSelection) {\n      setTerm(item[valueKey])\n    } else if (e) {\n      e.preventDefault()\n      ignoreFocus = true\n      giveInputFocus()\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDown && onKeyDown(e)\n\n    // ENTER key down interceptor to enable custom select cancellation\n    const KEY_CODE_ENTER = 13\n\n    // BACKSPACE key down interceptor to synchonize react input value and dom input value in some edge case (Comnbobox autocomplete = true)\n    const KEY_CODE_BACKSPACE = 8\n\n    if (e.keyCode === KEY_CODE_ENTER) {\n      if (!popoverEl.current) return\n\n      const options = Array.from(\n        popoverEl.current.querySelectorAll(\"[data-reach-combobox-option]\")\n      )\n\n      const selectedItemIndex = options.findIndex(\n        (el) => el.getAttribute(\"aria-selected\") === \"true\"\n      )\n\n      selectedItemIndex >= 0 && handleSelectItem(results[selectedItemIndex], e)\n    } else if (e.keyCode === KEY_CODE_BACKSPACE) {\n      if (!inputEl.current) return\n      if (inputEl.current.value.slice(0, -1) === term) {\n        setTerm(inputEl.current.value)\n      }\n    }\n  }\n\n  const shouldDisplayItemsOnEmptyQuery = () => {\n    return !autoFilter && results.length > 0 && term.length === 0 && hasFocus\n  }\n\n  const handleMouseDown = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType\n  ) => {\n    // In a specific case, we force the popover to display (results available, empty input using backspace)\n    // But doing so, reach ui component is not ready for this case and will raise an error\n    // We need to prevent the error and to force the selection\n    if (\n      shouldDisplayItemsOnEmptyQuery() &&\n      popoverEl.current &&\n      popoverEl.current.getAttribute(\"hidden\") != null\n    ) {\n      e.preventDefault() // it will prevent reach ui combobox to raise an error\n      handleSelectItem(item, e) // we force the selection to be processed\n    }\n  }\n\n  return (\n    <Combobox\n      className={classNames(\"cobalt-Autocomplete\", {\n        \"cobalt-Autocomplete--forceDisplayResults\":\n          shouldDisplayItemsOnEmptyQuery(), // Combobox Component, by design, hide the popover when the input is empty (on change) even if there are some results.\n      })}\n      as=\"div\"\n      openOnFocus={true}\n      ref={comboboxEl}\n    >\n      {results.length > 0 && (\n        <ComboboxPopover\n          className=\"cobalt-Autocomplete__popover\"\n          portal={false}\n          ref={popoverEl}\n        >\n          <ComboboxList\n            className=\"cobalt-Autocomplete__list\"\n            aria-label=\"Autocomplete option\"\n          >\n            {results.map((item, index) => (\n              <ComboboxOption\n                className=\"cobalt-Autocomplete__item\"\n                key={index}\n                value={item[valueKey]}\n                onMouseDown={(e: ComboboxOptionMouseEventType) => {\n                  handleMouseDown(item, e)\n                }}\n                onClick={(e: ComboboxOptionMouseEventType) => {\n                  handleSelectItem(item, e)\n                }}\n              >\n                {renderItem ? (\n                  renderItem(item, term)\n                ) : (\n                  <span className=\"cobalt-Autocomplete__item-wrapper\">\n                    {icon && (\n                      <span className=\"cobalt-Autocomplete__item-icon\">\n                        <Icon source={icon} color=\"indigo\" />\n                      </span>\n                    )}\n\n                    <span className=\"cobalt-Autocomplete__item-value\">\n                      <ComboboxOptionText />\n                    </span>\n                  </span>\n                )}\n              </ComboboxOption>\n            ))}\n          </ComboboxList>\n        </ComboboxPopover>\n      )}\n      <div className=\"cobalt-Autocomplete__input-wrapper\">\n        <TextInputWrapper\n          icon={icon}\n          status={status}\n          render={(className) => {\n            return (\n              <ComboboxInput\n                {...inputProps}\n                autoComplete=\"off\"\n                autoCorrect=\"off\"\n                autoCapitalize=\"off\"\n                spellCheck={false}\n                aria-label=\"autocomplete input\"\n                type=\"text\"\n                value={term}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                onKeyDown={handleKeyDown}\n                ref={inputEl}\n                className={className}\n              />\n            )\n          }}\n        />\n\n        {term && (\n          <div\n            className=\"cobalt-Autocomplete__clear-button\"\n            onClick={handleClearInput}\n          >\n            <Icon source=\"close\" size={16} />\n          </div>\n        )}\n      </div>\n    </Combobox>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Autocomplete)\nwrappedComponent.displayName = \"Autocomplete\"\n\nexport { wrappedComponent as Autocomplete }\n"],"names":["classNames"],"mappings":"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"}

package/components/Form/RadioWithDetails.js

@@ -0,0 +1,21 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import React from 'react';
+import cx from 'classnames';
+
+var RadioWithDetails = function (_a) {
+    var icon = _a.icon, title = _a.title, description = _a.description, className = _a.className, inputProps = __rest(_a, ["icon", "title", "description", "className"]);
+    return (React.createElement("label", { className: cx("cobalt-radio-with-details", className) },
+        React.createElement("input", __assign({}, inputProps, { type: "radio", className: "cobalt-radio-with-details__input" })),
+        React.createElement("div", { className: "cobalt-radio-with-details__inner" },
+            icon &&
+                React.cloneElement(icon, {
+                    className: "cobalt-radio-with-details__icon",
+                }),
+            React.createElement("div", { className: "cobalt-radio-with-details__content" },
+                React.createElement("p", { className: "cobalt-radio-with-details__title" }, title),
+                description && (React.createElement("p", { className: "cobalt-radio-with-details__description" }, description))),
+            React.createElement("div", { className: "cobalt-radio-with-details__visual-input" }))));
+};
+
+export { RadioWithDetails as default };
+//# sourceMappingURL=RadioWithDetails.js.map

package/components/Form/RadioWithDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioWithDetails.js","sources":["../../../src/components/Form/RadioWithDetails.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport type RadioWithDetailsPropsType = {\n  icon?: JSX.Element\n  title: string\n  description: string\n  name: string\n  className?: string\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nconst RadioWithDetails = ({\n  icon,\n  title,\n  description,\n  className,\n  ...inputProps\n}: RadioWithDetailsPropsType) => {\n  return (\n    <label className={cx(\"cobalt-radio-with-details\", className)}>\n      <input\n        {...inputProps}\n        type=\"radio\"\n        className=\"cobalt-radio-with-details__input\"\n      />\n      <div className=\"cobalt-radio-with-details__inner\">\n        {icon &&\n          React.cloneElement(icon, {\n            className: \"cobalt-radio-with-details__icon\",\n          })}\n        <div className=\"cobalt-radio-with-details__content\">\n          <p className=\"cobalt-radio-with-details__title\">{title}</p>\n          {description && (\n            <p className=\"cobalt-radio-with-details__description\">\n              {description}\n            </p>\n          )}\n        </div>\n        <div className=\"cobalt-radio-with-details__visual-input\" />\n      </div>\n    </label>\n  )\n}\n\nexport default RadioWithDetails\n"],"names":[],"mappings":";;;;IAWM,gBAAgB,GAAG,UAAC,EAME;IAL1B,IAAA,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,SAAS,eAAA,EACN,UAAU,cALW,6CAMzB,CADc;IAEb,QACE,+BAAO,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE,SAAS,CAAC;QAC1D,0CACM,UAAU,IACd,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,kCAAkC,IAC5C;QACF,6BAAK,SAAS,EAAC,kCAAkC;YAC9C,IAAI;gBACH,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;oBACvB,SAAS,EAAE,iCAAiC;iBAC7C,CAAC;YACJ,6BAAK,SAAS,EAAC,oCAAoC;gBACjD,2BAAG,SAAS,EAAC,kCAAkC,IAAE,KAAK,CAAK;gBAC1D,WAAW,KACV,2BAAG,SAAS,EAAC,wCAAwC,IAClD,WAAW,CACV,CACL,CACG;YACN,6BAAK,SAAS,EAAC,yCAAyC,GAAG,CACvD,CACA,EACT;AACH;;;;"}

package/components/Form/Slider.js

@@ -32,6 +32,5 @@ var SliderValueMeta = function (_a) {
     return React.createElement("span", { className: "cobalt-slider__value-meta" }, children);
 };
 
-export default wrappedComponent;
-export { SliderValueMeta };
+export { SliderValueMeta, wrappedComponent as default };
 //# sourceMappingURL=Slider.js.map

package/components/Form/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Form/Slider.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport {\n  Slider as ReachSlider,\n  SliderProps as ReachSliderProps,\n} from \"@reach/slider\"\nimport classNames from \"classnames\"\n\ntype NativeEventType =\n  | \"onPointerDown\"\n  | \"onPointerUp\"\n  | \"onMouseDown\"\n  | \"onMouseMove\"\n  | \"onMouseUp\"\n  | \"onTouchStart\"\n  | \"onTouchMove\"\n  | \"onTouchEnd\"\n\nexport type SliderPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  ariaLabel: string\n  value?: number\n  defaultValue?: number\n  /**\n   * minimum selectable value (default is 0)\n   */\n  min?: number\n  /**\n   * maximum selectable value (default is 100)\n   */\n  max?: number\n  /**\n   * values interval\n   */\n  step?: number\n  disabled?: boolean\n  /**\n   * Listener called when the value is changed\n   */\n  onChange?: (newValue: number) => void\n  /**\n   * Function used to visually display the slider value\n   */\n  renderValue?: (\n    value: number,\n    status: FormElement[\"status\"]\n  ) => React.ReactElement\n\n  onPointerDown?: ReachSliderProps[\"onPointerDown\"]\n  onPointerUp?: ReachSliderProps[\"onPointerUp\"]\n  onMouseDown?: ReachSliderProps[\"onMouseDown\"]\n  onMouseMove?: ReachSliderProps[\"onMouseMove\"]\n  onMouseUp?: ReachSliderProps[\"onMouseUp\"]\n  onTouchStart?: ReachSliderProps[\"onTouchStart\"]\n  onTouchMove?: ReachSliderProps[\"onTouchMove\"]\n  onTouchEnd?: ReachSliderProps[\"onTouchEnd\"]\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n} & FormElement &\n  Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    NativeEventType | \"css\" | \"enterKeyHint\"\n  >\n\nconst Slider = ({\n  defaultValue,\n  value,\n  min,\n  max,\n  status,\n  disabled,\n  onChange,\n  renderValue,\n  ariaLabel,\n  ...restProps\n}: SliderPropsType) => {\n  function initValue() {\n    if (value != null) return value\n    if (defaultValue != null) return defaultValue\n    if (min != null) return min\n    return 0\n  }\n\n  const [sliderValue, setSliderValue] = useState(() => initValue())\n\n  return (\n    <div\n      className={classNames(\"cobalt-slider\", {\n        \"cobalt-slider--disabled\": disabled,\n      })}\n    >\n      {renderValue && (\n        <div className=\"cobalt-slider__value-container\">\n          {renderValue(sliderValue, status)}\n        </div>\n      )}\n\n      <ReachSlider\n        {...restProps}\n        aria-label={ariaLabel}\n        handleAlignment=\"contain\"\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        disabled={disabled}\n        onChange={(newValue) => {\n          setSliderValue(newValue)\n          onChange && onChange(newValue)\n        }}\n      />\n    </div>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Slider)\nwrappedComponent.displayName = \"Slider\"\n\nexport default wrappedComponent\n\ntype SliderValueMetaProps = {\n  children: React.ReactNode\n}\nexport const SliderValueMeta = ({ children }: SliderValueMetaProps) => {\n  return <span className=\"cobalt-slider__value-meta\">{children}</span>\n}\n"],"names":["classNames","ReachSlider"],"mappings":";;;;;;AAkEA,IAAM,MAAM,GAAG,UAAC,EAWE;IAVhB,IAAA,YAAY,kBAAA,EACZ,KAAK,WAAA,EACL,GAAG,SAAA,EACH,GAAG,SAAA,EACH,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,SAAS,eAAA,EACN,SAAS,cAVE,qGAWf,CADa;IAEZ,SAAS,SAAS;QAChB,IAAI,KAAK,IAAI,IAAI;YAAE,OAAO,KAAK,CAAA;QAC/B,IAAI,YAAY,IAAI,IAAI;YAAE,OAAO,YAAY,CAAA;QAC7C,IAAI,GAAG,IAAI,IAAI;YAAE,OAAO,GAAG,CAAA;QAC3B,OAAO,CAAC,CAAA;KACT;IAEK,IAAA,KAAA,OAAgC,QAAQ,CAAC,cAAM,OAAA,SAAS,EAAE,GAAA,CAAC,IAAA,EAA1D,WAAW,QAAA,EAAE,cAAc,QAA+B,CAAA;IAEjE,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,eAAe,EAAE;YACrC,yBAAyB,EAAE,QAAQ;SACpC,CAAC;QAED,WAAW,KACV,6BAAK,SAAS,EAAC,gCAAgC,IAC5C,WAAW,CAAC,WAAW,EAAE,MAAM,CAAC,CAC7B,CACP;QAED,oBAACC,QAAW,eACN,SAAS,kBACD,SAAS,EACrB,eAAe,EAAC,SAAS,EACzB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,UAAC,QAAQ;gBACjB,cAAc,CAAC,QAAQ,CAAC,CAAA;gBACxB,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAA;aAC/B,IACD,CACE,EACP;AACH,CAAC,CAAA;IAEK,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAC;AACtD,gBAAgB,CAAC,WAAW,GAAG,QAAQ,CAAA;IAO1B,eAAe,GAAG,UAAC,EAAkC;QAAhC,QAAQ,cAAA;IACxC,OAAO,8BAAM,SAAS,EAAC,2BAA2B,IAAE,QAAQ,CAAQ,CAAA;AACtE;;;;;"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Form/Slider.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport {\n  Slider as ReachSlider,\n  SliderProps as ReachSliderProps,\n} from \"@reach/slider\"\nimport classNames from \"classnames\"\n\ntype NativeEventType =\n  | \"onPointerDown\"\n  | \"onPointerUp\"\n  | \"onMouseDown\"\n  | \"onMouseMove\"\n  | \"onMouseUp\"\n  | \"onTouchStart\"\n  | \"onTouchMove\"\n  | \"onTouchEnd\"\n\nexport type SliderPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  ariaLabel: string\n  value?: number\n  defaultValue?: number\n  /**\n   * minimum selectable value (default is 0)\n   */\n  min?: number\n  /**\n   * maximum selectable value (default is 100)\n   */\n  max?: number\n  /**\n   * values interval\n   */\n  step?: number\n  disabled?: boolean\n  /**\n   * Listener called when the value is changed\n   */\n  onChange?: (newValue: number) => void\n  /**\n   * Function used to visually display the slider value\n   */\n  renderValue?: (\n    value: number,\n    status: FormElement[\"status\"]\n  ) => React.ReactElement\n\n  onPointerDown?: ReachSliderProps[\"onPointerDown\"]\n  onPointerUp?: ReachSliderProps[\"onPointerUp\"]\n  onMouseDown?: ReachSliderProps[\"onMouseDown\"]\n  onMouseMove?: ReachSliderProps[\"onMouseMove\"]\n  onMouseUp?: ReachSliderProps[\"onMouseUp\"]\n  onTouchStart?: ReachSliderProps[\"onTouchStart\"]\n  onTouchMove?: ReachSliderProps[\"onTouchMove\"]\n  onTouchEnd?: ReachSliderProps[\"onTouchEnd\"]\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n} & FormElement &\n  Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    NativeEventType | \"css\" | \"enterKeyHint\"\n  >\n\nconst Slider = ({\n  defaultValue,\n  value,\n  min,\n  max,\n  status,\n  disabled,\n  onChange,\n  renderValue,\n  ariaLabel,\n  ...restProps\n}: SliderPropsType) => {\n  function initValue() {\n    if (value != null) return value\n    if (defaultValue != null) return defaultValue\n    if (min != null) return min\n    return 0\n  }\n\n  const [sliderValue, setSliderValue] = useState(() => initValue())\n\n  return (\n    <div\n      className={classNames(\"cobalt-slider\", {\n        \"cobalt-slider--disabled\": disabled,\n      })}\n    >\n      {renderValue && (\n        <div className=\"cobalt-slider__value-container\">\n          {renderValue(sliderValue, status)}\n        </div>\n      )}\n\n      <ReachSlider\n        {...restProps}\n        aria-label={ariaLabel}\n        handleAlignment=\"contain\"\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        disabled={disabled}\n        onChange={(newValue) => {\n          setSliderValue(newValue)\n          onChange && onChange(newValue)\n        }}\n      />\n    </div>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Slider)\nwrappedComponent.displayName = \"Slider\"\n\nexport default wrappedComponent\n\ntype SliderValueMetaProps = {\n  children: React.ReactNode\n}\nexport const SliderValueMeta = ({ children }: SliderValueMetaProps) => {\n  return <span className=\"cobalt-slider__value-meta\">{children}</span>\n}\n"],"names":["classNames","ReachSlider"],"mappings":";;;;;;AAkEA,IAAM,MAAM,GAAG,UAAC,EAWE;IAVhB,IAAA,YAAY,kBAAA,EACZ,KAAK,WAAA,EACL,GAAG,SAAA,EACH,GAAG,SAAA,EACH,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,SAAS,eAAA,EACN,SAAS,cAVE,qGAWf,CADa;IAEZ,SAAS,SAAS;QAChB,IAAI,KAAK,IAAI,IAAI;YAAE,OAAO,KAAK,CAAA;QAC/B,IAAI,YAAY,IAAI,IAAI;YAAE,OAAO,YAAY,CAAA;QAC7C,IAAI,GAAG,IAAI,IAAI;YAAE,OAAO,GAAG,CAAA;QAC3B,OAAO,CAAC,CAAA;KACT;IAEK,IAAA,KAAA,OAAgC,QAAQ,CAAC,cAAM,OAAA,SAAS,EAAE,GAAA,CAAC,IAAA,EAA1D,WAAW,QAAA,EAAE,cAAc,QAA+B,CAAA;IAEjE,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,eAAe,EAAE;YACrC,yBAAyB,EAAE,QAAQ;SACpC,CAAC;QAED,WAAW,KACV,6BAAK,SAAS,EAAC,gCAAgC,IAC5C,WAAW,CAAC,WAAW,EAAE,MAAM,CAAC,CAC7B,CACP;QAED,oBAACC,QAAW,eACN,SAAS,kBACD,SAAS,EACrB,eAAe,EAAC,SAAS,EACzB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,UAAC,QAAQ;gBACjB,cAAc,CAAC,QAAQ,CAAC,CAAA;gBACxB,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAA;aAC/B,IACD,CACE,EACP;AACH,CAAC,CAAA;IAEK,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAC;AACtD,gBAAgB,CAAC,WAAW,GAAG,QAAQ,CAAA;IAO1B,eAAe,GAAG,UAAC,EAAkC;QAAhC,QAAQ,cAAA;IACxC,OAAO,8BAAM,SAAS,EAAC,2BAA2B,IAAE,QAAQ,CAAQ,CAAA;AACtE;;;;"}

package/components/Form/TextArea.js

@@ -24,15 +24,17 @@ var TextArea = /** @class */ (function (_super) {
         this.props.onChange && this.props.onChange(event);
     };
     TextArea.prototype.render = function () {
-        var _a = this.props; _a.autosize; var status = _a.status, maxLength = _a.maxLength, nativeProps = __rest(_a, ["autosize", "status", "maxLength"]);
-        return (React.createElement("div", { className: cx("cobalt-TextAreaField", {
+        var _a = this.props, autosize = _a.autosize, className = _a.className, inputClassName = _a.inputClassName, status = _a.status, maxLength = _a.maxLength, nativeProps = __rest(_a, ["autosize", "className", "inputClassName", "status", "maxLength"]);
+        return (React.createElement("div", { className: cx("cobalt-TextAreaField", className, {
                 "cobalt-TextAreaField--withLimit": maxLength && maxLength > 0,
                 "cobalt-TextAreaField--success": status === "success",
                 "cobalt-TextAreaField--error": status === "error",
             }) },
-            React.createElement("textarea", __assign({}, nativeProps, { maxLength: maxLength, style: {
-                    height: this.state.height + "px",
-                }, onChange: this.handleChange, className: "cobalt-TextAreaField__Input" })),
+            React.createElement("textarea", __assign({}, nativeProps, { maxLength: maxLength, style: autosize
+                    ? {
+                        height: this.state.height + "px",
+                    }
+                    : {}, onChange: this.handleChange, className: cx("cobalt-TextAreaField__Input", inputClassName) })),
             this.state.length > 0 && maxLength && maxLength > 0 && (React.createElement("div", { className: "cobalt-TextAreaField__RemainingChars" },
                 maxLength - this.state.length,
                 " remaining characters"))));

package/components/Form/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../src/components/Form/TextArea.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n  maxLength?: number\n  autosize?: boolean\n  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void\n} & FormElement &\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>\n\ntype State = {\n  length: number\n  height: number\n}\n\nclass TextArea extends PureComponent<Props, State> {\n  constructor(props: Props) {\n    super(props)\n    this.handleChange = this.handleChange.bind(this)\n\n    this.state = {\n      length: 0,\n      height: 0,\n    }\n  }\n\n  handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {\n    if (this.props.autosize || this.props.maxLength) {\n      this.setState({\n        length: event.target.value.length,\n        height: event.target.scrollHeight + 2,\n      })\n    }\n    this.props.onChange && this.props.onChange(event)\n  }\n\n  render() {\n    const {\n      autosize: _autosize,\n      status,\n      maxLength,\n      ...nativeProps\n    } = this.props\n\n    return (\n      <div\n        className={classNames(\"cobalt-TextAreaField\", {\n          \"cobalt-TextAreaField--withLimit\": maxLength && maxLength > 0,\n          \"cobalt-TextAreaField--success\": status === \"success\",\n          \"cobalt-TextAreaField--error\": status === \"error\",\n        })}\n      >\n        <textarea\n          {...nativeProps}\n          maxLength={maxLength}\n          style={{\n            height: this.state.height + \"px\",\n          }}\n          onChange={this.handleChange}\n          className=\"cobalt-TextAreaField__Input\"\n        />\n        {this.state.length > 0 && maxLength && maxLength > 0 && (\n          <div className=\"cobalt-TextAreaField__RemainingChars\">\n            {maxLength - this.state.length} remaining characters\n          </div>\n        )}\n      </div>\n    )\n  }\n}\n\nconst wrappedComponent = withFieldLabelAndHint(TextArea)\nwrappedComponent.displayName = \"TextArea\"\n\nexport { wrappedComponent as TextArea }\n"],"names":["classNames"],"mappings":";;;;;AAiBA;IAAuB,4BAA2B;IAChD,kBAAY,KAAY;QAAxB,YACE,kBAAM,KAAK,CAAC,SAOb;QANC,KAAI,CAAC,YAAY,GAAG,KAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAI,CAAC,CAAA;QAEhD,KAAI,CAAC,KAAK,GAAG;YACX,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,CAAC;SACV,CAAA;;KACF;IAED,+BAAY,GAAZ,UAAa,KAA6C;QACxD,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YAC/C,IAAI,CAAC,QAAQ,CAAC;gBACZ,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;gBACjC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,GAAG,CAAC;aACtC,CAAC,CAAA;SACH;QACD,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;KAClD;IAED,yBAAM,GAAN;YACQ,KAKF,IAAI,CAAC,KAAK,aAJO,MACnB,MAAM,YAAA,EACN,SAAS,eAAA,EACN,WAAW,cAJV,mCAKL,EAAa;QAEd,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,sBAAsB,EAAE;gBAC5C,iCAAiC,EAAE,SAAS,IAAI,SAAS,GAAG,CAAC;gBAC7D,+BAA+B,EAAE,MAAM,KAAK,SAAS;gBACrD,6BAA6B,EAAE,MAAM,KAAK,OAAO;aAClD,CAAC;YAEF,6CACM,WAAW,IACf,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;oBACL,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI;iBACjC,EACD,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,SAAS,EAAC,6BAA6B,IACvC;YACD,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,IAAI,SAAS,GAAG,CAAC,KAClD,6BAAK,SAAS,EAAC,sCAAsC;gBAClD,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM;wCAC1B,CACP,CACG,EACP;KACF;IACH,eAAC;AAAD,CAtDA,CAAuB,aAAa,GAsDnC;IAEK,gBAAgB,GAAG,qBAAqB,CAAC,QAAQ,EAAC;AACxD,gBAAgB,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/Form/TextArea.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport cx from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n  maxLength?: number\n  className?: string\n  inputClassName?: string\n  autosize?: boolean\n  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void\n} & FormElement &\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>\n\ntype State = {\n  length: number\n  height: number\n}\n\nclass TextArea extends PureComponent<Props, State> {\n  constructor(props: Props) {\n    super(props)\n    this.handleChange = this.handleChange.bind(this)\n\n    this.state = {\n      length: 0,\n      height: 0,\n    }\n  }\n\n  handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {\n    if (this.props.autosize || this.props.maxLength) {\n      this.setState({\n        length: event.target.value.length,\n        height: event.target.scrollHeight + 2,\n      })\n    }\n    this.props.onChange && this.props.onChange(event)\n  }\n\n  render() {\n    const {\n      autosize,\n      className,\n      inputClassName,\n      status,\n      maxLength,\n      ...nativeProps\n    } = this.props\n\n    return (\n      <div\n        className={cx(\"cobalt-TextAreaField\", className, {\n          \"cobalt-TextAreaField--withLimit\": maxLength && maxLength > 0,\n          \"cobalt-TextAreaField--success\": status === \"success\",\n          \"cobalt-TextAreaField--error\": status === \"error\",\n        })}\n      >\n        <textarea\n          {...nativeProps}\n          maxLength={maxLength}\n          style={\n            autosize\n              ? {\n                  height: this.state.height + \"px\",\n                }\n              : {}\n          }\n          onChange={this.handleChange}\n          className={cx(\"cobalt-TextAreaField__Input\", inputClassName)}\n        />\n        {this.state.length > 0 && maxLength && maxLength > 0 && (\n          <div className=\"cobalt-TextAreaField__RemainingChars\">\n            {maxLength - this.state.length} remaining characters\n          </div>\n        )}\n      </div>\n    )\n  }\n}\n\nconst wrappedComponent = withFieldLabelAndHint(TextArea)\nwrappedComponent.displayName = \"TextArea\"\n\nexport { wrappedComponent as TextArea }\n"],"names":[],"mappings":";;;;;AAmBA;IAAuB,4BAA2B;IAChD,kBAAY,KAAY;QAAxB,YACE,kBAAM,KAAK,CAAC,SAOb;QANC,KAAI,CAAC,YAAY,GAAG,KAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAI,CAAC,CAAA;QAEhD,KAAI,CAAC,KAAK,GAAG;YACX,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,CAAC;SACV,CAAA;;KACF;IAED,+BAAY,GAAZ,UAAa,KAA6C;QACxD,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YAC/C,IAAI,CAAC,QAAQ,CAAC;gBACZ,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;gBACjC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,GAAG,CAAC;aACtC,CAAC,CAAA;SACH;QACD,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;KAClD;IAED,yBAAM,GAAN;QACE,IAAM,KAOF,IAAI,CAAC,KAAK,EANZ,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,MAAM,YAAA,EACN,SAAS,eAAA,EACN,WAAW,cANV,kEAOL,CAAa,CAAA;QAEd,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,EAAE;gBAC/C,iCAAiC,EAAE,SAAS,IAAI,SAAS,GAAG,CAAC;gBAC7D,+BAA+B,EAAE,MAAM,KAAK,SAAS;gBACrD,6BAA6B,EAAE,MAAM,KAAK,OAAO;aAClD,CAAC;YAEF,6CACM,WAAW,IACf,SAAS,EAAE,SAAS,EACpB,KAAK,EACH,QAAQ;sBACJ;wBACE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI;qBACjC;sBACD,EAAE,EAER,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,cAAc,CAAC,IAC5D;YACD,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,IAAI,SAAS,GAAG,CAAC,KAClD,6BAAK,SAAS,EAAC,sCAAsC;gBAClD,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM;wCAC1B,CACP,CACG,EACP;KACF;IACH,eAAC;AAAD,CA5DA,CAAuB,aAAa,GA4DnC;IAEK,gBAAgB,GAAG,qBAAqB,CAAC,QAAQ,EAAC;AACxD,gBAAgB,CAAC,WAAW,GAAG,UAAU;;;;"}

package/components/Form/field.js

@@ -6,7 +6,7 @@ import cx from 'classnames';
 var singletonIdCounter = 0;
 var generateUniqueId = function () {
     singletonIdCounter = singletonIdCounter + 1;
-    return "cobaltFormField" + singletonIdCounter;
+    return "cobaltFormField".concat(singletonIdCounter);
 };
 var withFieldLabelAndHint = function (WrappedComponent) {
     var Wrapper = /** @class */ (function (_super) {
@@ -15,9 +15,9 @@ var withFieldLabelAndHint = function (WrappedComponent) {
             return _super !== null && _super.apply(this, arguments) || this;
         }
         Wrapper.prototype.render = function () {
-            var _a = this.props, id = _a.id, label = _a.label, hint = _a.hint, status = _a.status, originalProps = __rest(_a, ["id", "label", "hint", "status"]);
+            var _a = this.props, id = _a.id, label = _a.label, hint = _a.hint, status = _a.status, fieldClassName = _a.fieldClassName, originalProps = __rest(_a, ["id", "label", "hint", "status", "fieldClassName"]);
             var consolidatedId = id ? id : generateUniqueId();
-            return (React.createElement("div", { className: cx("cobalt-FormField", {
+            return (React.createElement("div", { className: cx("cobalt-FormField", fieldClassName, {
                     "cobalt-FormField--withHint": !!hint,
                 }) },
                 label && (React.createElement("label", { className: "cobalt-FormField__Label", htmlFor: consolidatedId }, label)),

package/components/Form/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../../src/components/Form/field.tsx"],"sourcesContent":["import React, { Component } from \"react\"\nimport { Hint } from \"./Hint\"\nimport { FormElement } from \"./form\"\nimport classNames from \"classnames\"\n\ntype InjectedProps = {\n  id?: string\n  label?: string\n  hint?: string\n} & FormElement\n\nlet singletonIdCounter = 0\nconst generateUniqueId = () => {\n  singletonIdCounter = singletonIdCounter + 1\n  return `cobaltFormField${singletonIdCounter}`\n}\n\nexport const withFieldLabelAndHint = <OriginalProps,>(\n  WrappedComponent: React.ComponentType<OriginalProps>\n): React.ComponentClass<OriginalProps & InjectedProps> & {\n  Raw: React.ComponentType<OriginalProps>\n} => {\n  class Wrapper extends Component<OriginalProps & InjectedProps> {\n    static Raw = WrappedComponent\n    render() {\n      const {\n        id,\n        label,\n        hint,\n        status,\n        ...originalProps\n      }: OriginalProps & InjectedProps = this.props\n\n      const consolidatedId = id ? id : generateUniqueId()\n\n      return (\n        <div\n          className={classNames(\"cobalt-FormField\", {\n            \"cobalt-FormField--withHint\": !!hint,\n          })}\n        >\n          {label && (\n            <label className=\"cobalt-FormField__Label\" htmlFor={consolidatedId}>\n              {label}\n            </label>\n          )}\n\n          <WrappedComponent\n            {...(originalProps as OriginalProps)}\n            id={consolidatedId}\n            status={status}\n          />\n\n          {hint && (\n            <Hint status={status}>\n              <span dangerouslySetInnerHTML={{ __html: hint }} />\n            </Hint>\n          )}\n        </div>\n      )\n    }\n  }\n\n  return Wrapper\n}\n"],"names":["classNames"],"mappings":";;;;;AAWA,IAAI,kBAAkB,GAAG,CAAC,CAAA;AAC1B,IAAM,gBAAgB,GAAG;IACvB,kBAAkB,GAAG,kBAAkB,GAAG,CAAC,CAAA;IAC3C,OAAO,oBAAkB,kBAAoB,CAAA;AAC/C,CAAC,CAAA;IAEY,qBAAqB,GAAG,UACnC,gBAAoD;IAIpD;QAAsB,2BAAwC;QAA9D;;SAuCC;QArCC,wBAAM,GAAN;YACE,IAAM,KAM6B,IAAI,CAAC,KAAK,EAL3C,EAAE,QAAA,EACF,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,MAAM,YAAA,EACH,aAAa,cALZ,iCAML,CAA4C,CAAA;YAE7C,IAAM,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,gBAAgB,EAAE,CAAA;YAEnD,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,kBAAkB,EAAE;oBACxC,4BAA4B,EAAE,CAAC,CAAC,IAAI;iBACrC,CAAC;gBAED,KAAK,KACJ,+BAAO,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAE,cAAc,IAC/D,KAAK,CACA,CACT;gBAED,oBAAC,gBAAgB,eACV,aAA+B,IACpC,EAAE,EAAE,cAAc,EAClB,MAAM,EAAE,MAAM,IACd;gBAED,IAAI,KACH,oBAAC,IAAI,IAAC,MAAM,EAAE,MAAM;oBAClB,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAC9C,CACR,CACG,EACP;SACF;QArCM,WAAG,GAAG,gBAAgB,CAAA;QAsC/B,cAAC;KAAA,CAvCqB,SAAS,GAuC9B;IAED,OAAO,OAAO,CAAA;AAChB;;;;"}
+{"version":3,"file":"field.js","sources":["../../../src/components/Form/field.tsx"],"sourcesContent":["import React, { Component } from \"react\"\nimport { Hint } from \"./Hint\"\nimport { FormElement } from \"./form\"\nimport classNames from \"classnames\"\n\ntype InjectedProps = {\n  id?: string\n  label?: string\n  hint?: string\n  fieldClassName?: string\n} & FormElement\n\nlet singletonIdCounter = 0\nconst generateUniqueId = () => {\n  singletonIdCounter = singletonIdCounter + 1\n  return `cobaltFormField${singletonIdCounter}`\n}\n\nexport const withFieldLabelAndHint = <OriginalProps,>(\n  WrappedComponent: React.ComponentType<OriginalProps>\n): React.ComponentClass<OriginalProps & InjectedProps> & {\n  Raw: React.ComponentType<OriginalProps>\n} => {\n  class Wrapper extends Component<OriginalProps & InjectedProps> {\n    static Raw = WrappedComponent\n    render() {\n      const {\n        id,\n        label,\n        hint,\n        status,\n        fieldClassName,\n        ...originalProps\n      }: OriginalProps & InjectedProps = this.props\n\n      const consolidatedId = id ? id : generateUniqueId()\n\n      return (\n        <div\n          className={classNames(\"cobalt-FormField\", fieldClassName, {\n            \"cobalt-FormField--withHint\": !!hint,\n          })}\n        >\n          {label && (\n            <label className=\"cobalt-FormField__Label\" htmlFor={consolidatedId}>\n              {label}\n            </label>\n          )}\n\n          <WrappedComponent\n            {...(originalProps as OriginalProps)}\n            id={consolidatedId}\n            status={status}\n          />\n\n          {hint && (\n            <Hint status={status}>\n              <span dangerouslySetInnerHTML={{ __html: hint }} />\n            </Hint>\n          )}\n        </div>\n      )\n    }\n  }\n\n  return Wrapper\n}\n"],"names":["classNames"],"mappings":";;;;;AAYA,IAAI,kBAAkB,GAAG,CAAC,CAAA;AAC1B,IAAM,gBAAgB,GAAG;IACvB,kBAAkB,GAAG,kBAAkB,GAAG,CAAC,CAAA;IAC3C,OAAO,yBAAkB,kBAAkB,CAAE,CAAA;AAC/C,CAAC,CAAA;IAEY,qBAAqB,GAAG,UACnC,gBAAoD;IAIpD;QAAsB,2BAAwC;QAA9D;;SAwCC;QAtCC,wBAAM,GAAN;YACE,IAAM,KAO6B,IAAI,CAAC,KAAK,EAN3C,EAAE,QAAA,EACF,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,cAAc,oBAAA,EACX,aAAa,cANZ,mDAOL,CAA4C,CAAA;YAE7C,IAAM,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,gBAAgB,EAAE,CAAA;YAEnD,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,kBAAkB,EAAE,cAAc,EAAE;oBACxD,4BAA4B,EAAE,CAAC,CAAC,IAAI;iBACrC,CAAC;gBAED,KAAK,KACJ,+BAAO,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAE,cAAc,IAC/D,KAAK,CACA,CACT;gBAED,oBAAC,gBAAgB,eACV,aAA+B,IACpC,EAAE,EAAE,cAAc,EAClB,MAAM,EAAE,MAAM,IACd;gBAED,IAAI,KACH,oBAAC,IAAI,IAAC,MAAM,EAAE,MAAM;oBAClB,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAC9C,CACR,CACG,EACP;SACF;QAtCM,WAAG,GAAG,gBAAgB,CAAA;QAuC/B,cAAC;KAAA,CAxCqB,SAAS,GAwC9B;IAED,OAAO,OAAO,CAAA;AAChB;;;;"}

package/components/Helper/index.js

@@ -9,5 +9,5 @@ var Helper = function (_a) {
         cta));
 };
 
-export default Helper;
+export { Helper as default };
 //# sourceMappingURL=index.js.map

package/components/HorizontalList/index.js

@@ -15,6 +15,5 @@ function HorizontalListPaddingBlock(_a) {
     return (React.createElement("div", { className: cx("cobalt-horizontal-list__padding-block", className) }));
 }
 
-export default HorizontalList;
-export { HorizontalListPaddingBlock };
+export { HorizontalListPaddingBlock, HorizontalList as default };
 //# sourceMappingURL=index.js.map

package/components/HorizontalList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HorizontalList/index.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\"\nimport cx from \"classnames\"\nimport { CobaltBreakpointType } from \"../../hooks/useBreakpoint\"\n\nexport type HorizontalListPropsType = PropsWithChildren<{\n  className?: string\n  fitFrom?: Exclude<CobaltBreakpointType, \"over\">\n}>\n\nexport default function HorizontalList({\n  className,\n  fitFrom,\n  children,\n}: HorizontalListPropsType) {\n  return (\n    <div\n      className={cx(`cobalt-horizontal-list`, className, {\n        \"xs:cobalt-horizontal-list--fit\": fitFrom === \"xs\",\n        \"sm:cobalt-horizontal-list--fit\": fitFrom === \"sm\",\n        \"md:cobalt-horizontal-list--fit\": fitFrom === \"md\",\n        \"lg:cobalt-horizontal-list--fit\": fitFrom === \"lg\",\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\ntype HorizontalScrollerPaddingBlockProps = {\n  className?: string\n}\n\nexport function HorizontalListPaddingBlock({\n  className,\n}: HorizontalScrollerPaddingBlockProps) {\n  return (\n    <div\n      className={cx(`cobalt-horizontal-list__padding-block`, className)}\n    ></div>\n  )\n}\n"],"names":[],"mappings":";;;SASwB,cAAc,CAAC,EAIb;QAHxB,SAAS,eAAA,EACT,OAAO,aAAA,EACP,QAAQ,cAAA;IAER,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,EAAE;YACjD,gCAAgC,EAAE,OAAO,KAAK,IAAI;YAClD,gCAAgC,EAAE,OAAO,KAAK,IAAI;YAClD,gCAAgC,EAAE,OAAO,KAAK,IAAI;YAClD,gCAAgC,EAAE,OAAO,KAAK,IAAI;SACnD,CAAC,IAED,QAAQ,CACL,EACP;AACH,CAAC;SAMe,0BAA0B,CAAC,EAEL;QADpC,SAAS,eAAA;IAET,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,uCAAuC,EAAE,SAAS,CAAC,GAC5D,EACR;AACH;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/HorizontalList/index.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\"\nimport cx from \"classnames\"\nimport { CobaltBreakpointType } from \"../../hooks/useBreakpoint\"\n\nexport type HorizontalListPropsType = PropsWithChildren<{\n  className?: string\n  fitFrom?: Exclude<CobaltBreakpointType, \"over\">\n}>\n\nexport default function HorizontalList({\n  className,\n  fitFrom,\n  children,\n}: HorizontalListPropsType) {\n  return (\n    <div\n      className={cx(`cobalt-horizontal-list`, className, {\n        \"xs:cobalt-horizontal-list--fit\": fitFrom === \"xs\",\n        \"sm:cobalt-horizontal-list--fit\": fitFrom === \"sm\",\n        \"md:cobalt-horizontal-list--fit\": fitFrom === \"md\",\n        \"lg:cobalt-horizontal-list--fit\": fitFrom === \"lg\",\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\ntype HorizontalScrollerPaddingBlockProps = {\n  className?: string\n}\n\nexport function HorizontalListPaddingBlock({\n  className,\n}: HorizontalScrollerPaddingBlockProps) {\n  return (\n    <div\n      className={cx(`cobalt-horizontal-list__padding-block`, className)}\n    ></div>\n  )\n}\n"],"names":[],"mappings":";;;SASwB,cAAc,CAAC,EAIb;QAHxB,SAAS,eAAA,EACT,OAAO,aAAA,EACP,QAAQ,cAAA;IAER,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,EAAE;YACjD,gCAAgC,EAAE,OAAO,KAAK,IAAI;YAClD,gCAAgC,EAAE,OAAO,KAAK,IAAI;YAClD,gCAAgC,EAAE,OAAO,KAAK,IAAI;YAClD,gCAAgC,EAAE,OAAO,KAAK,IAAI;SACnD,CAAC,IAED,QAAQ,CACL,EACP;AACH,CAAC;SAMe,0BAA0B,CAAC,EAEL;QADpC,SAAS,eAAA;IAET,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,uCAAuC,EAAE,SAAS,CAAC,GAC5D,EACR;AACH;;;;"}

package/components/Icon/__generated__/AirportIcon.js

@@ -7,8 +7,8 @@ var iconSource = "airport";
 var AirportIcon = function (_a) {
     var _b;
     var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
-    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--" + iconSource, (_b = {},
-        _b["cobalt-Icon--color" + capitalize(color)] = color,
+    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
+        _b["cobalt-Icon--color".concat(capitalize(color))] = color,
         _b["cobalt-Icon--size16"] = size === 16,
         _b["cobalt-Icon--size20"] = size === 20,
         _b["cobalt-Icon--size32"] = size === 32,
@@ -19,5 +19,5 @@ var AirportIcon = function (_a) {
         React.createElement("path", { d: "M16.9350288,20.5463394 L18.3492424,19.1321259 L16.2279221,9.9397377 L20.1170094,6.05065041 C20.7027958,5.46486397 20.7027958,4.5151165 20.1170094,3.92933006 C19.5312229,3.34354362 18.5814755,3.34354362 17.995689,3.92933006 L14.1066017,7.81841736 L4.91421356,5.69709702 L3.5,7.11131058 L10.9246212,11.0003979 L7.03553391,14.8894852 L4.56066017,14.5359318 L3.5,15.596592 L6.68198052,17.3643589 L8.44974747,20.5463394 L9.51040764,19.4856792 L9.15685425,17.0108055 L13.0459415,13.1217182 L16.9350288,20.5463394 L16.9350288,20.5463394 L16.9350288,20.5463394 Z" })));
 };
 
-export default AirportIcon;
+export { AirportIcon as default };
 //# sourceMappingURL=AirportIcon.js.map

package/components/Icon/__generated__/AirportIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AirportIcon.js","sources":["../../../../src/components/Icon/__generated__/AirportIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColors\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"airport\"\n\nconst AirportIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M16.9350288,20.5463394 L18.3492424,19.1321259 L16.2279221,9.9397377 L20.1170094,6.05065041 C20.7027958,5.46486397 20.7027958,4.5151165 20.1170094,3.92933006 C19.5312229,3.34354362 18.5814755,3.34354362 17.995689,3.92933006 L14.1066017,7.81841736 L4.91421356,5.69709702 L3.5,7.11131058 L10.9246212,11.0003979 L7.03553391,14.8894852 L4.56066017,14.5359318 L3.5,15.596592 L6.68198052,17.3643589 L8.44974747,20.5463394 L9.51040764,19.4856792 L9.15685425,17.0108055 L13.0459415,13.1217182 L16.9350288,20.5463394 L16.9350288,20.5463394 L16.9350288,20.5463394 Z\" />\n    </svg>\n  )\n}\n\nexport default AirportIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,SAAS,CAAA;IAEtB,WAAW,GAAG,UAAC,EAKT;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,8BAA4B,UAAY;QAEtC,GAAC,uBAAqB,UAAU,CAAC,KAAK,CAAG,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,4iBAA4iB,GAAG,CACnjB,CACP,CAAA;AACH;;;;"}
+{"version":3,"file":"AirportIcon.js","sources":["../../../../src/components/Icon/__generated__/AirportIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColors\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"airport\"\n\nconst AirportIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M16.9350288,20.5463394 L18.3492424,19.1321259 L16.2279221,9.9397377 L20.1170094,6.05065041 C20.7027958,5.46486397 20.7027958,4.5151165 20.1170094,3.92933006 C19.5312229,3.34354362 18.5814755,3.34354362 17.995689,3.92933006 L14.1066017,7.81841736 L4.91421356,5.69709702 L3.5,7.11131058 L10.9246212,11.0003979 L7.03553391,14.8894852 L4.56066017,14.5359318 L3.5,15.596592 L6.68198052,17.3643589 L8.44974747,20.5463394 L9.51040764,19.4856792 L9.15685425,17.0108055 L13.0459415,13.1217182 L16.9350288,20.5463394 L16.9350288,20.5463394 L16.9350288,20.5463394 Z\" />\n    </svg>\n  )\n}\n\nexport default AirportIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,SAAS,CAAA;IAEtB,WAAW,GAAG,UAAC,EAKT;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BAAM,CAAC,EAAC,4iBAA4iB,GAAG,CACnjB,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/ArrowLeftIcon.js

@@ -7,8 +7,8 @@ var iconSource = "arrowLeft";
 var ArrowLeftIcon = function (_a) {
     var _b;
     var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
-    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--" + iconSource, (_b = {},
-        _b["cobalt-Icon--color" + capitalize(color)] = color,
+    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
+        _b["cobalt-Icon--color".concat(capitalize(color))] = color,
         _b["cobalt-Icon--size16"] = size === 16,
         _b["cobalt-Icon--size20"] = size === 20,
         _b["cobalt-Icon--size32"] = size === 32,
@@ -19,5 +19,5 @@ var ArrowLeftIcon = function (_a) {
         React.createElement("path", { d: "M4.416 12.574l6.935 5.945L12.653 17l-4.948-4.24h11.297v-2H7.705l4.948-4.241L11.35 5l-7 6c-.53.455-.42 1.223.065 1.574z" })));
 };
 
-export default ArrowLeftIcon;
+export { ArrowLeftIcon as default };
 //# sourceMappingURL=ArrowLeftIcon.js.map

package/components/Icon/__generated__/ArrowLeftIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowLeftIcon.js","sources":["../../../../src/components/Icon/__generated__/ArrowLeftIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColors\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"arrowLeft\"\n\nconst ArrowLeftIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n\n  return wrap(\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n      <path d=\"M4.416 12.574l6.935 5.945L12.653 17l-4.948-4.24h11.297v-2H7.705l4.948-4.241L11.35 5l-7 6c-.53.455-.42 1.223.065 1.574z\" />\n    </svg>\n  )\n}\n\nexport default ArrowLeftIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,WAAW,CAAA;IAExB,aAAa,GAAG,UAAC,EAKX;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,8BAA4B,UAAY;QAEtC,GAAC,uBAAqB,UAAU,CAAC,KAAK,CAAG,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;QACzD,8BAAM,CAAC,EAAC,wHAAwH,GAAG,CAC/H,CACP,CAAA;AACH;;;;"}
+{"version":3,"file":"ArrowLeftIcon.js","sources":["../../../../src/components/Icon/__generated__/ArrowLeftIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColors\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"arrowLeft\"\n\nconst ArrowLeftIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n\n  return wrap(\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n      <path d=\"M4.416 12.574l6.935 5.945L12.653 17l-4.948-4.24h11.297v-2H7.705l4.948-4.241L11.35 5l-7 6c-.53.455-.42 1.223.065 1.574z\" />\n    </svg>\n  )\n}\n\nexport default ArrowLeftIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,WAAW,CAAA;IAExB,aAAa,GAAG,UAAC,EAKX;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;QACzD,8BAAM,CAAC,EAAC,wHAAwH,GAAG,CAC/H,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/ArrowRightIcon.js

@@ -7,8 +7,8 @@ var iconSource = "arrowRight";
 var ArrowRightIcon = function (_a) {
     var _b;
     var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
-    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--" + iconSource, (_b = {},
-        _b["cobalt-Icon--color" + capitalize(color)] = color,
+    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
+        _b["cobalt-Icon--color".concat(capitalize(color))] = color,
         _b["cobalt-Icon--size16"] = size === 16,
         _b["cobalt-Icon--size20"] = size === 20,
         _b["cobalt-Icon--size32"] = size === 32,
@@ -19,5 +19,5 @@ var ArrowRightIcon = function (_a) {
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.65 5l-1.3 1.519 4.947 4.24H4v2h11.297L10.349 17l1.302 1.518 6.935-5.944c.484-.35.596-1.119.065-1.574l-7-6z" })));
 };
 
-export default ArrowRightIcon;
+export { ArrowRightIcon as default };
 //# sourceMappingURL=ArrowRightIcon.js.map

package/components/Icon/__generated__/ArrowRightIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowRightIcon.js","sources":["../../../../src/components/Icon/__generated__/ArrowRightIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColors\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"arrowRight\"\n\nconst ArrowRightIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M11.65 5l-1.3 1.519 4.947 4.24H4v2h11.297L10.349 17l1.302 1.518 6.935-5.944c.484-.35.596-1.119.065-1.574l-7-6z\"\n      />\n    </svg>\n  )\n}\n\nexport default ArrowRightIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,YAAY,CAAA;IAEzB,cAAc,GAAG,UAAC,EAKZ;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,8BAA4B,UAAY;QAEtC,GAAC,uBAAqB,UAAU,CAAC,KAAK,CAAG,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,gHAAgH,GAClH,CACE,CACP,CAAA;AACH;;;;"}
+{"version":3,"file":"ArrowRightIcon.js","sources":["../../../../src/components/Icon/__generated__/ArrowRightIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColors\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"arrowRight\"\n\nconst ArrowRightIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M11.65 5l-1.3 1.519 4.947 4.24H4v2h11.297L10.349 17l1.302 1.518 6.935-5.944c.484-.35.596-1.119.065-1.574l-7-6z\"\n      />\n    </svg>\n  )\n}\n\nexport default ArrowRightIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,YAAY,CAAA;IAEzB,cAAc,GAAG,UAAC,EAKZ;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,gHAAgH,GAClH,CACE,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/BinIcon.js

@@ -7,8 +7,8 @@ var iconSource = "bin";
 var BinIcon = function (_a) {
     var _b;
     var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
-    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--" + iconSource, (_b = {},
-        _b["cobalt-Icon--color" + capitalize(color)] = color,
+    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
+        _b["cobalt-Icon--color".concat(capitalize(color))] = color,
         _b["cobalt-Icon--size16"] = size === 16,
         _b["cobalt-Icon--size20"] = size === 20,
         _b["cobalt-Icon--size32"] = size === 32,
@@ -19,5 +19,5 @@ var BinIcon = function (_a) {
         React.createElement("path", { d: "M19 4h-3.5l-1-1h-5l-1 1H5v2h14V4zM6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6v12z" })));
 };
 
-export default BinIcon;
+export { BinIcon as default };
 //# sourceMappingURL=BinIcon.js.map