@ilo-org/twig 0.17.0 → 0.18.0

package/dist/components/cardgroup/cardgroup.wingsuit.yml

@@ -0,0 +1,158 @@
+cardgroup:
+  namespace: Components/Cards
+  use: "@components/cardgroup/cardgroup.twig"
+  label: Card Group
+  description: A group of cards
+  visibility: storybook
+  settings:
+    collapsed:
+      type: select
+      label: collapsed
+      description: Optionally collapses margins between the cards.
+      required: false
+      preview: "false"
+      options:
+        "true": "true"
+        "false": "false"
+    cardcount:
+      type: select
+      label: collapsed
+      description: Number of cards to show in a row, also determines the width of the cards as a function of how many there need to be. This will override the width set in the `size` setting.
+      required: false
+      preview: "three"
+      options:
+        one: one
+        two: two
+        three: three
+        four: four
+    size:
+      type: select
+      label: Size
+      description: Sets the layout of the cards in the group. See the `Card` component for more info on this setting, which has different effects on the different types of cards.
+      required: false
+      preview: "standard"
+      options:
+        standard: standard
+        narrow: narrow
+        wide: wide
+        fluid: fluid
+    alignment:
+      type: select
+      label: Alignment
+      description: Positions the image to the right or to the left of the content when the card is displayed in a `wide` or `fluid` size. Has no effect if the card is displayed in a `standard` or `narrow` size. Only used by `Multilink Card`.
+      preview: "left"
+      options:
+        left: Left
+        right: Right
+    theme:
+      type: select
+      label: Theme
+      description: Sets all of the cards to appear as either light or dark. Used by all card groups except for `Multilink Card`, `Data Card` and `Stat Card`.
+      required: false
+      preview: "dark"
+      options:
+        dark: Dark
+        light: Light
+    type:
+      type: select
+      label: Type
+      description: Sets the type of cards to render in the Card Group
+      preview: "feature"
+      options:
+        feature: Feature
+        text: Text
+        detail: Detail
+        promo: Promo
+        multilink: Multilink
+        data: Data
+        stat: Stat
+        factlist: Factlist
+  fields:
+    group:
+      type: object
+      label: Group of cards
+      description: "The group of cards. Each card can be one of the following types: multilink, feature, detail, graphicpromo, stat, graphic, factlist, data."
+      preview:
+        - eyebrow: "Press release"
+          title: "ILO welcomes first global agreement on working conditions and rights of professional football players"
+          link: "https://www.ilo.org/"
+          cta:
+            label: "Read the press release"
+            url: "https://www.ilo.org/global/about-the-ilo/newsroom/news/WCMS_846303/lang--en/index.htm"
+          theme: dark
+          image:
+            alt: "Image alt text"
+            loading: "lazy"
+            url:
+              - breakpoint: "(min-width: 0px)"
+                src: "/images/small.jpg"
+              - breakpoint: "(min-width: 800px)"
+                src: "/images/medium.jpg"
+              - breakpoint: "(min-width: 1200px)"
+                src: "/images/large.jpg"
+              - breakpoint: "(min-width: 1440px)"
+                src: "/images/large.jpg"
+        - eyebrow: "Report"
+          title: "Renewable energy jobs hit 12.7 million globally"
+          link: "https://www.ilo.org/"
+          cta:
+            label: "Read the press release"
+            url: "https://www.ilo.org/global/about-the-ilo/newsroom/news/WCMS_846303/lang--en/index.htm"
+          theme: dark
+          image:
+            alt: "Image alt text"
+            loading: "lazy"
+            url:
+              - breakpoint: "(min-width: 0px)"
+                src: "/images/small.jpg"
+              - breakpoint: "(min-width: 800px)"
+                src: "/images/medium.jpg"
+              - breakpoint: "(min-width: 1200px)"
+                src: "/images/large.jpg"
+              - breakpoint: "(min-width: 1440px)"
+                src: "/images/large.jpg"
+        - eyebrow: "Podcast"
+          title: "Telangana and Andhra Pradesh launch pre-departure handbook for Indians going to the European Union"
+          link: "https://www.ilo.org/"
+          cta:
+            label: "Read the press release"
+            url: "https://www.ilo.org/global/about-the-ilo/newsroom/news/WCMS_846303/lang--en/index.htm"
+          theme: dark
+          image:
+            alt: "Image alt text"
+            loading: "lazy"
+            url:
+              - breakpoint: "(min-width: 0px)"
+                src: "/images/small.jpg"
+              - breakpoint: "(min-width: 800px)"
+                src: "/images/medium.jpg"
+              - breakpoint: "(min-width: 1200px)"
+                src: "/images/large.jpg"
+              - breakpoint: "(min-width: 1440px)"
+                src: "/images/large.jpg"
+        - eyebrow: "Podcast"
+          title: "Can digital technology be an equality machine?"
+          link: "https://www.ilo.org/"
+          cta:
+            label: "Read the press release"
+            url: "https://www.ilo.org/global/about-the-ilo/newsroom/news/WCMS_846303/lang--en/index.htm"
+          theme: dark
+          image:
+            alt: "Image alt text"
+            loading: "lazy"
+            url:
+              - breakpoint: "(min-width: 0px)"
+                src: "/images/small.jpg"
+              - breakpoint: "(min-width: 800px)"
+                src: "/images/medium.jpg"
+              - breakpoint: "(min-width: 1200px)"
+                src: "/images/large.jpg"
+              - breakpoint: "(min-width: 1440px)"
+                src: "/images/large.jpg"
+    cta:
+      type: object
+      label: CTA
+      description: Button to display after the cards in the group
+      preview:
+        label: "Discover our unique mission"
+        url: "https://www.ilo.org"

package/dist/components/checkbox/checkbox.css

@@ -0,0 +1 @@
+.ilo--checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;display:grid;height:1.2861736334rem;margin:0;position:relative;place-content:center;width:1.2861736334rem;transform:none;cursor:pointer}.ilo--checkbox:before{height:.857449089rem;left:.2143622722rem;top:.2143622722rem;width:.857449089rem;z-index:1}.ilo--checkbox:after,.ilo--checkbox:before{content:"";background-color:#b8c4cc;position:absolute}.ilo--checkbox:after{border:.2143622722rem solid #b8c4cc;height:1.2861736334rem;left:0;top:0;width:1.2861736334rem;z-index:0}.ilo--checkbox:checked:before{background-color:#230050;background-repeat:no-repeat;background-size:contain;background-position:50%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'%3E%3Cpath fill='%23EDF0F2' d='M4.375 6.25l-2.5-2.5L0 5.625 4.375 10 12.5 1.875 10.625 0l-6.25 6.25z'/%3E%3C/svg%3E")}.ilo--checkbox:checked:after{background-color:#230050;border-color:#230050}.ilo--checkbox:focus{outline:0}.ilo--checkbox:focus:after{background-color:#ffcd2d;border-color:#ffcd2d}.ilo--checkbox:focus:checked:after{border-color:#ffcd2d}.ilo--checkbox:disabled{opacity:.45;pointer-events:none}.ilo--checkbox:invalid:after,.ilo--checkbox__error .ilo--checkbox:after,.ilo--checkbox__error:after{border-color:#fa3c4b}.ilo--checkbox:invalid:checked:after,.ilo--checkbox__error .ilo--checkbox:checked:after,.ilo--checkbox__error:checked:after{border-color:#230050}

package/dist/components/checkbox/checkbox.twig

@@ -0,0 +1,17 @@
+{# checkbox.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set disabled = disabled|default(false) %}
+{% set baseClass = 'ilo' ~ '--checkbox' %}
+{% set errorClass = baseClass ~ '__error' %}
+{% set CheckboxClasses = [baseClass] %}
+
+{% if error %}
+	{% set CheckboxClasses = CheckboxClasses|merge([errorClass]) %}
+{% endif %}
+
+
+{% block formfield %}
+	<input id="{{ id|default(name) }}" name="{{ name }}" {% if disabled %} disabled {% endif %} {% if required %} required {% endif %} type="checkbox" class="{{ CheckboxClasses|join(' ') }}" {% if defaultChecked %} checked {% endif %} {% if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}" {% endif %} {% if value %} value="{{ value }}" {% endif %}/>
+{% endblock %}

package/dist/components/checkbox/checkbox.wingsuit.yml

@@ -0,0 +1,84 @@
+checkbox:
+  namespace: Components/Forms
+  use: "@components/checkbox/checkbox.twig"
+  label: Checkbox
+  description:
+    The checkbox component provides users with a switch they can use to
+    select more than one option from a list.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: "Do you agree to these terms?"
+    tooltip:
+      type: string
+      label: Tooltip
+      description: The tooltip for the form element.
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+    id:
+      type: text
+      label: ID
+      description: The ID of the input.
+    name:
+      type: text
+      label: Name
+      description: The name of the input.
+    class:
+      type: text
+      label: Class
+      description: The class of the form field.
+      preview: checkbox
+      default: ""
+    value:
+      type: text
+      label: Value
+      description: The value of the input.
+      preview: "1"
+  settings:
+    defaultSelected:
+      type: boolean
+      label: Default Selected
+      description: The default selected state of the form element.
+      preview: false
+    labelPlacement:
+      type: select
+      label: Label Placement
+      description: The placement of the label for the form element.
+      preview: "end"
+      options:
+        start: start
+        end: end
+        top: top
+        bottom: bottom
+    labelSize:
+      type: select
+      label: Label Size
+      description: The size of the label for the form element.
+      preview: "small"
+      options:
+        small: small
+        medium: medium
+        large: large
+    disabled:
+      type: boolean
+      label: Disabled
+      description: The disabled state of the form element.
+      preview: false
+      default: false
+    required:
+      type: boolean
+      label: Required
+      description: The required state of the form element.
+      preview: false
+      default: false
+    error:
+      type: boolean
+      label: Error
+      description: Adds an error state to the form control.
+      preview: false
+      default: false

package/dist/components/container/container.css

@@ -0,0 +1 @@
+.ilo--container{margin-right:auto;margin-left:auto;max-width:1300px;padding:0 1.0718113612rem;width:100%}

package/dist/components/contextmenu/contextmenu.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--context-menu{border-radius:.1071811361rem;background-color:#edf0f2;display:inline-block;position:relative;width:auto}.ilo--context-menu:before{background-position:top;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EDF0F2' d='M24 24L0 0v24h24z'/%3E%3C/svg%3E");content:"";height:.6430868167rem;position:absolute;left:50%;top:-.3215434084rem;transform:translateX(-50%) rotate(135deg);width:.6430868167rem}.ilo--context-menu--item{padding:0 .4287245445rem}.ilo--context-menu--item:first-of-type{border-top-left-radius:2px;border-top-right-radius:2px}.ilo--context-menu--item:last-of-type{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.ilo--context-menu--item:last-of-type a{border-bottom:none}.ilo--context-menu--item:focus,.ilo--context-menu--item:hover{background-color:#ebf5fd}.ilo--context-menu--item.endsection{border-bottom:.1607717042rem solid #fff}.ilo--context-menu--item.endsection .ilo--context-menu--link{border-bottom:none}.ilo--context-menu--link{border-bottom:.1071811361rem solid #fff;color:#230050;display:inline-block;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:500;padding:.857449089rem .4287245445rem;text-decoration:none;width:100%;font-size:11.94px;letter-spacing:normal;line-height:16.24px;letter-spacing:-.1px}.ilo--context-menu--link:visited{color:#230050}.ilo--context-menu--link:active{color:#230050;outline:0}.ilo--context-menu--link:focus,.ilo--context-menu--link:hover{color:#1e2dbe;outline:0;text-decoration:underline;text-decoration-thickness:.1071811361rem}

package/dist/components/contextmenu/contextmenu.twig

@@ -0,0 +1,12 @@
+{#
+  CONTEXT MENU COMPONENT
+#}
+<ul class="ilo--context-menu">
+  {% for link in links %}
+  <li class="ilo--context-menu--item{% if link.endsection == 'true' %} endsection{% endif %}">
+    <a href="{{link.url}}" class="ilo--context-menu--link">
+      <span class="ilo--context-menu--label">{{link.label}}</span>
+    </a>
+  </li>
+  {% endfor %}
+</ul>

package/dist/components/contextmenu/contextmenu.wingsuit.yml

@@ -0,0 +1,24 @@
+contextmenu:
+  namespace: Components/Navigation
+  use: "@components/contextmenu/contextmenu.twig"
+  label: Context Menu
+  description: The ContextMenu receives a list of urls with labels and an optional prop indicating if this link is at the end of a 'section.'
+  fields:
+    links:
+      type: object
+      label: Links
+      description: The context menu item items.
+      required: true
+      preview:
+        - label: Link One
+          url: "http://www.google.com"
+        - label: Link Two
+          url: "http://www.google.com"
+        - endsection: "true"
+          label: Link Three Ends A Section
+          url: "http://www.google.com"
+        - label: Link Four
+          url: "http://www.google.com"
+        - label: Link Five Is Slightly Longer
+          url: "http://www.google.com"
+  visibility: storybook

package/dist/components/credit/credit.css

@@ -0,0 +1 @@
+.ilo--credit{color:#fff;display:inline-block;height:1.2861736334rem;padding:0;position:relative;font-size:11.94px;letter-spacing:-.02em;line-height:16.24px}.ilo--credit--label{background-color:#2d2d2d;padding:4px 8px 4px 12px}.ilo--credit:after{background-position:100% 0;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232D2D2D' d='M24 24L0 0v24h24z'/%3E%3C/svg%3E");content:"";height:1.2861736334rem;position:absolute;left:100%;top:-.2143622722rem;width:1.2861736334rem}@media screen and (max-width:1023px){.ilo--credit{width:75%}.ilo--credit--label{bottom:calc(100% + 1px);display:none;left:0;margin-bottom:.6430868167rem;position:absolute}.ilo--credit--label:after{background-position:0 0;background-size:contain;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath fill='%232D2D2D' d='M6 10.846L12 0H0l6 10.846z'/%3E%3C/svg%3E");height:.6430868167rem;left:0.32154rem;bottom:-.6430868167rem;width:.6430868167rem}.ilo--credit--label:after,.ilo--credit:before{background-repeat:no-repeat;content:"";position:absolute}.ilo--credit:before{background-color:#2d2d2d;background-position:calc(100% - 4px) 50%;background-size:.6430868167rem .6430868167rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23FFF' d='M8 0C6.4 0 4.9.5 3.6 1.3c-1.4.9-2.4 2.2-3 3.6C0 6.4-.2 8 .2 9.6c.3 1.6 1.1 3 2.2 4.1 1.1 1.1 2.5 1.9 4.1 2.2s3.2.2 4.6-.5c1.5-.6 2.7-1.6 3.6-2.9.8-1.4 1.3-2.9 1.3-4.5 0-2.1-.8-4.2-2.3-5.7C12.2.8 10.1 0 8 0zm0 14c-1.2 0-2.3-.4-3.3-1-1-.7-1.8-1.6-2.2-2.7C2 9.2 1.9 8 2.1 6.8c.2-1.2.8-2.2 1.6-3.1.8-.8 1.9-1.4 3.1-1.6 1.2-.2 2.4-.1 3.5.4s2 1.2 2.7 2.2c.7 1 1 2.1 1 3.3 0 1.6-.6 3.1-1.8 4.2C11.1 13.4 9.6 14 8 14z'/%3E%3Cpath fill='%23FFF' d='M9 7H7v5h2V7zM8 6c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z'/%3E%3C/svg%3E");height:1.2861736334rem;left:0;top:0;width:1.5541264737rem}.ilo--credit:after{left:1.5541264737rem;top:0}.ilo--credit:hover .ilo--credit--label{display:inline-block}}[dir=rtl] .ilo--credit:after{background-position:0 0;left:auto;right:100%;transform:scaleX(-1)}@media screen and (max-width:1023px){[dir=rtl] .ilo--credit--label{left:auto;right:0}[dir=rtl] .ilo--credit--label:after{background-position:100% 0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath fill='%232D2D2D' d='M6 10.846L12 0H0l6 10.846z'/%3E%3C/svg%3E");left:auto;right:0.32154rem}[dir=rtl] .ilo--credit:before{background-position:4px;left:auto;right:0}[dir=rtl] .ilo--credit:after{left:auto;right:1.5541264737rem}}

package/dist/components/datacard/datacard.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--card__type__data{--max-width:32.154340836rem;background:#ebf5fd;border-bottom:.1607717042rem solid #bedcfa;padding:2.5723472669rem 2.1436227224rem 3.0010718114rem;position:relative;width:100%}.ilo--card__type__data .ilo--card--content{display:grid;grid-template-columns:1fr;grid-template-rows:auto;row-gap:1.3933547696rem}@media screen and (min-width:610px){.ilo--card__type__data{padding:2.5723472669rem}.ilo--card__type__data__columns__two .ilo--card--content{grid-template-columns:minmax(10.718113612rem,32%) minmax(53%,1fr);column-gap:14%}.ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--image{grid-column:1/2;grid-row:1/span 4}.ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--content,.ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--cta,.ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--files,.ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--links{grid-column:2/3}.ilo--card__type__data__columns__two .ilo--card--content__no-image-with-links .ilo--card--area--content,.ilo--card__type__data__columns__two .ilo--card--content__no-image-with-links .ilo--card--area--files{grid-column:1/2}.ilo--card__type__data__columns__two .ilo--card--content__no-image-with-links .ilo--card--area--cta{grid-column:1/2/3/3}.ilo--card__type__data__columns__two .ilo--card--content__no-image-with-links .ilo--card--area--links{grid-area:1/2/3/3}}.ilo--card__type__data.ilo--card__size__narrow{--max-width:16.1307609861rem;clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%);padding:2.1436227224rem 1.2861736334rem 3.0010718114rem}@media screen and (max-width:609px){.ilo--card__type__data.ilo--card__size__narrow{--max-width:100%}}.ilo--card__type__data.ilo--card__size__wide{--max-width:41.6934619507rem}.ilo--card__type__data.ilo--card__size__wide.ilo--card__type__data__columns__one{padding:2.5723472669rem 2.1436227224rem 3.0010718114rem}.ilo--card__type__data.ilo--card__size__wide.ilo--card__type__data__columns__two{padding:2.5723472669rem 2.5723472669rem 3.0010718114rem 6.0021436227rem}.ilo--card__type__data.ilo--card__size__fluid,.ilo--card__type__data.ilo--card__size__wide{clip-path:polygon(0 0,calc(100% - 86px) 0,100% 48px,100% 100%,0 100%)}.ilo--card__type__data .ilo--card--image{width:100%;max-width:200px}.ilo--card__type__data--content-label{font-size:14.93px;letter-spacing:normal;line-height:20.3px;margin-bottom:.4932760997rem;color:#6d6d6d}.ilo--card__type__data .ilo--card--eyebrow{margin:0 0 .857449089rem}.ilo--card__type__data--content-copy{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;color:#2d2d2d;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:500}.ilo--card__type__data [class*=ilo--link]{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;line-height:1.8;margin-inline-end:.6430868167rem;margin-bottom:.6430868167rem}.ilo--card__type__data [class*=button]{margin:.2143622722rem .4287245445rem .2143622722rem 0}.ilo--card__type__data [class*=button]:last-of-type{margin-right:0}

package/dist/components/datepicker/datepicker.css

@@ -0,0 +1 @@
+.ilo--datepicker{cursor:pointer}.ilo--datepicker::-webkit-calendar-picker-indicator{cursor:pointer}.ilo--input.ilo--datepicker{padding:.6430868167rem .857449089rem}

package/dist/components/datepicker/datepicker.twig

@@ -0,0 +1,20 @@
+{# datepicker.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+
+{# Default values and input preparation #}
+{% set disabled = disabled|default(false) %}
+{% set inputClass = 'ilo' ~ '--input' %}
+{% set baseClass = 'ilo' ~ '--datepicker' %}
+{% set datePickerClasses = [inputClass, baseClass] %}
+
+{% if error %}
+	{% set datePickerClasses = datePickerClasses|merge(['error']) %}
+{% endif %}
+
+{% block formfield %}
+
+	<input type="date" id="{{ id|default(name) }}" name="{{ name }}" {% if onBlur %} onblur="{{ onBlur }}" {% endif %} {% if disabled %} disabled {% endif %} placeholder="{{ placeholder|default('') }}" {% if required %} required {% endif %} class="{{ datePickerClasses|join(' ') }}" {% if max %} max="{{ max }}" {% endif %} {% if min %} min="{{ min }}" {% endif %} {% if step %} step="{{ step }}" {% endif %} {% if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}" {% endif %}/>
+
+{% endblock %}

package/dist/components/datepicker/datepicker.wingsuit.yml

@@ -0,0 +1,72 @@
+datepicker:
+  namespace: Components/Forms
+  use: "@components/datepicker/datepicker.twig"
+  label: Date Picker
+  description: The Date Picker component is used to select a date from a calendar.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: "Select a date"
+    tooltip:
+      type: string
+      label: Tooltip
+      description: The tooltip for the form element.
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+    id:
+      type: text
+      label: ID
+      description: The ID of the input.
+    name:
+      type: text
+      label: Name
+      description: The name of the input.
+    class:
+      type: text
+      label: Class
+      description: The class of the form field.
+      preview: checkbox
+      default: ""
+  settings:
+    labelPlacement:
+      type: select
+      label: Label Placement
+      description: The placement of the label for the form element.
+      preview: "top"
+      options:
+        start: start
+        end: end
+        top: top
+        bottom: bottom
+    labelSize:
+      type: select
+      label: Label Size
+      description: The size of the label for the form element.
+      preview: medium
+      options:
+        small: small
+        medium: medium
+        large: large
+    disabled:
+      type: boolean
+      label: Disabled
+      description: The disabled state of the form element.
+      preview: false
+      default: false
+    required:
+      type: boolean
+      label: Required
+      description: The required state of the form element.
+      preview: false
+      default: false
+    error:
+      type: boolean
+      label: Error
+      description: Adds an error state to the form control.
+      preview: false
+      default: false

package/dist/components/detailcard/detailcard.css

@@ -0,0 +1 @@
+.ilo--card__type__detail{--max-width:18.3815648446rem;border-bottom:.1607717042rem solid #edf0f2;padding:1.7148981779rem 0;position:relative;transition-property:border;transition-duration:.15s;transition-timing-function:ease-out}@media screen and (min-width:1024px){.ilo--card__type__detail{padding:1.7148981779rem 0}}@media screen and (max-width:609px){.ilo--card__type__detail{--max-width:100%}}.ilo--card__type__detail:focus,.ilo--card__type__detail:focus-within,.ilo--card__type__detail:hover{filter:drop-shadow(0 -4px 16px rgba(30,45,190,.05)) drop-shadow(0 10px 20px rgba(30,45,190,.08)) drop-shadow(0 4px 8px rgba(30,45,190,.05)) drop-shadow(0 .8px 1.6px rgba(30,45,190,.04));border-bottom:.1607717042rem solid #1e2dbe}.ilo--card__type__detail:focus-within picture:before,.ilo--card__type__detail:focus picture:before,.ilo--card__type__detail:hover picture:before{opacity:.4;z-index:2}.ilo--card__type__detail:focus-within .ilo--card--date-extra:before,.ilo--card__type__detail:focus .ilo--card--date-extra:before,.ilo--card__type__detail:hover .ilo--card--date-extra:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath fill='%231E2DBE' d='M6 10.846L12 0H0l6 10.846z'/%3E%3C/svg%3E")}.ilo--card__type__detail .ilo--card--eyebrow{margin-bottom:.857449089rem}.ilo--card__type__detail .ilo--card--title{padding:0 0 .4287245445rem}@media screen and (min-width:1024px){.ilo--card__size__wide .ilo--card__type__detail .ilo--card--title{font-size:23.32px;line-height:29.15px;font-size:18.66px;letter-spacing:-.035em;line-height:24.26px}}.ilo--card__type__detail.ilo--card__size__fluid,.ilo--card__type__detail.ilo--card__size__wide{--max-width:39.9249732047rem}@media screen and (min-width:1024px){.ilo--card__type__detail.ilo--card__size__fluid .ilo--card--title,.ilo--card__type__detail.ilo--card__size__wide .ilo--card--title{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px}}@media screen and (min-width:1024px){.ilo--card__type__detail.ilo--card__size__fluid .ilo--card--image--wrapper,.ilo--card__type__detail.ilo--card__size__wide .ilo--card--image--wrapper{flex:0 0 10.5037513398rem}}@media screen and (min-width:1024px){.ilo--card__type__detail.ilo--card__size__fluid .ilo--card--picture,.ilo--card__type__detail.ilo--card__size__wide .ilo--card--picture{width:10.5037513398rem}}.ilo--card__type__detail.ilo--card__size__narrow{--max-width:18.3815648446rem}@media screen and (max-width:609px){.ilo--card__type__detail.ilo--card__size__narrow{--max-width:100%}}.ilo--card__type__detail picture{display:flex;position:relative}.ilo--card__type__detail picture:before{background-color:#1e2dbe;content:"";display:block;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:-1;transition-property:opacity;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card__type__detail .ilo--card--wrap{display:flex}.ilo--card__type__detail .ilo--card--title{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px}.ilo--card__type__detail .ilo--card--image--wrapper{flex:0 0 4.1264737406rem}.ilo--card__type__detail .ilo--card--picture{object-fit:contain;width:4.1264737406rem}.ilo--card__type__detail .ilo--card--content{padding:0 1.2861736334rem}.ilo--card__type__detail .ilo--card--date-extra{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:0;padding-left:1.2861736334rem;position:relative}.ilo--card__type__detail .ilo--card--date-extra:before{background-repeat:no-repeat;content:"";display:inline-block;height:.7502679528rem;left:0;position:absolute;top:50%;transform:rotate(-90deg) translateX(50%);width:.6430868167rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath fill='%232D2D2D' d='M6 10.846L12 0H0l6 10.846z'/%3E%3C/svg%3E")}.ilo--card__type__detail .ilo--card--date{font-size:16px;letter-spacing:normal;line-height:23.36px}

package/dist/components/dropdown/dropdown.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--dropdown{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border:.1071811361rem solid #b8c4cc;border-radius:0;box-sizing:content-box;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:500;font-size:16px;letter-spacing:-.02em;line-height:21.6px;height:2.4115755627rem;margin:0;outline:0;padding:0 3.0010718114rem 0 .857449089rem;white-space:nowrap;width:calc(100% - 78px);background-position:calc(100% - 14px) 50%,100%;background-repeat:no-repeat;background-size:24px 24px,102px 100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M12 16.78l-8-8 1.455-1.56L12 13.767l6.546-6.545L20 8.779l-8 8z'/%3E%3C/svg%3E"),linear-gradient(90deg,transparent 0,transparent calc(50% - .81px),#b8c4cc calc(50% - .8px),#b8c4cc calc(50% + .8px),#edf0f2 calc(50% + .81px),#edf0f2)}.ilo--dropdown,.ilo--dropdown option{overflow:hidden;text-overflow:ellipsis}.ilo--dropdown option{width:calc(100% - 48px)}.ilo--dropdown:hover{cursor:pointer}.ilo--dropdown:focus,.ilo--dropdown:hover{background-color:#ebf5fd;border-bottom:.1071811361rem solid #b8c4cc;border-left:.1607717042rem solid #1e2dbe;border-right:.1071811361rem solid #b8c4cc;border-top:.1071811361rem solid #b8c4cc;border-left-width:2px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M12 16.78l-8-8 1.455-1.56L12 13.767l6.546-6.545L20 8.779l-8 8z'/%3E%3C/svg%3E"),linear-gradient(90deg,transparent 0,transparent calc(50% - .81px),#b8c4cc calc(50% - .8px),#b8c4cc calc(50% + .8px),transparent calc(50% + .81px),transparent)}.ilo--dropdown:active{background-position:calc(100% - 14px) 50%,100%;background-repeat:no-repeat;background-size:24px 24px,102px 100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M12 16.78l-8-8 1.455-1.56L12 13.767l6.546-6.545L20 8.779l-8 8z'/%3E%3C/svg%3E"),linear-gradient(90deg,transparent 0,transparent calc(50% - .81px),#b8c4cc calc(50% - .8px),#b8c4cc calc(50% + .8px),#edf0f2 calc(50% + .81px),#edf0f2);border:.1071811361rem solid #b8c4cc}.ilo--dropdown:disabled{opacity:.45;pointer-events:none}.error .ilo--dropdown,.ilo--dropdown.error,.ilo--dropdown:invalid{background-color:#fff;border-bottom:.1071811361rem solid #b8c4cc;border-left:.1607717042rem solid #c8303c;border-right:.1071811361rem solid #b8c4cc;border-top:.1071811361rem solid #b8c4cc}[dir=rtl] .ilo--dropdown{padding:0 .857449089rem 0 3.0010718114rem;background-position:calc(0% + 14px) 50%,0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M12 16.78l-8-8 1.455-1.56L12 13.767l6.546-6.545L20 8.779l-8 8z'/%3E%3C/svg%3E"),linear-gradient(270deg,transparent 0,transparent calc(50% - .81px),#b8c4cc calc(50% - .8px),#b8c4cc calc(50% + .8px),#edf0f2 calc(50% + .81px),#edf0f2)}

package/dist/components/dropdown/dropdown.twig

@@ -0,0 +1,22 @@
+{# dropdown.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set disabled = disabled|default(false) %}
+{% set baseClass = 'ilo' ~ '--dropdown' %}
+{% set dropdownClasses = [baseClass, class] %}
+{% if error %}
+	{% set dropdownClasses = dropdownClasses|merge(['error']) %}
+{% endif %}
+
+{% block formfield %}
+    <div class="{{ baseClass }}--wrapper" {% if style %} style="{{ style }}" {% endif %}>
+        <select id="{{ id|default(name) }}" autocomplete="{{ autocomplete|default('off') }}" name="{{ name }}" {% if required %} required {% endif %} {% if onBlur %} onblur="{{ onBlur }}" {% endif %} {% if disabled %} disabled {% endif %} class="{{ dropdownClasses|join(' ') }}" value="{{ currentvalue|default(value) }}" {% if form %} form="{{ form }}" {% endif %} {% if multiple %} multiple {% endif %} {% if selectSize %} size="{{ selectSize }}" {% endif %} {% if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}" {% endif %}>
+            {% for option in options %}
+                <option {% if option.disabled %} disabled {% endif %} value="{{ option.value }}" {% if defaultOption and defaultOption == option.value %} selected {% endif %}>
+                    {{ option.label }}
+                </option>
+            {% endfor %}
+        </select>
+    </div>
+{% endblock %}

package/dist/components/dropdown/dropdown.wingsuit.yml

@@ -0,0 +1,101 @@
+dropdown:
+  namespace: Components/Forms
+  use: "@components/dropdown/dropdown.twig"
+  label: Dropdown
+  description: The Dropdown displays a select element with options, and is most
+    commonly used in forms.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: "Select a country"
+    tooltip:
+      type: string
+      label: Tooltip
+      description: The tooltip for the form element.
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+    id:
+      type: text
+      label: ID
+      description: The ID of the input.
+    name:
+      type: text
+      label: Name
+      description: The name of the input.
+    class:
+      type: text
+      label: Class
+      description: The class of the form field.
+      preview: checkbox
+      default: ""
+    style:
+      type: text
+      label: Style
+      description: The style of the form field.
+    defaultOption:
+      type: text
+      label: Default Option
+      description: The value of the default option for the form element.
+      preview: "TH"
+    options:
+      type: object
+      label: Options
+      description: The options for the form element.
+      preview:
+        - label: Switzerland
+          value: CH
+        - label: Côte d'Ivoire
+          value: CI
+        - label: Thailand
+          value: TH
+        - label: United States
+          value: US
+        - label: Zimbabwe
+          value: ZW
+        - label: Afghanistan
+          value: AF
+        - label: Åland Islands
+          value: AX
+  settings:
+    labelPlacement:
+      type: select
+      label: Label Placement
+      description: The placement of the label for the form element.
+      preview: "top"
+      options:
+        start: start
+        end: end
+        top: top
+        bottom: bottom
+    labelSize:
+      type: select
+      label: Label Size
+      description: The size of the label for the form element.
+      preview: medium
+      options:
+        small: small
+        medium: medium
+        large: large
+    disabled:
+      type: boolean
+      label: Disabled
+      description: The disabled state of the form element.
+      preview: false
+      default: false
+    required:
+      type: boolean
+      label: Required
+      description: The required state of the form element.
+      preview: false
+      default: false
+    error:
+      type: boolean
+      label: Error
+      description: Adds an error state to the form control.
+      preview: false
+      default: false

package/dist/components/empty/empty.css

@@ -0,0 +1 @@
+@keyframes a{0%{opacity:1}to{opacity:0}}.ilo--empty{position:relative}.ilo--empty,.ilo--empty:before{background:linear-gradient(108.07deg,#b8c4cc .17%,#ebf5fd 75.36%);border-radius:4px;height:100%;width:100%}.ilo--empty:before{animation-duration:2s;animation-name:a;animation-iteration-count:infinite;animation-direction:alternate;content:"";left:0;position:absolute;top:0;transform:rotate(-180deg);z-index:1}.ilo--empty.storybook{height:400px;width:600px}

package/dist/components/factlistcard/factlistcard.css

@@ -0,0 +1 @@
+.ilo--card__type__factlist{--max-width:20.0964630225rem;border-bottom:.1607717042rem solid #b8c4cc;padding:2.1436227224rem 1.2861736334rem 2.5723472669rem;clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%)}@media screen and (min-width:1024px){.ilo--card__type__factlist{padding:2.5723472669rem 2.1436227224rem 3.0010718114rem}}.ilo--card__type__factlist.ilo--card__size__wide{--max-width:45.8735262594rem;padding:2.5723472669rem 2.1436227224rem 3.0010718114rem}@media screen and (min-width:610px){.ilo--card__type__factlist.ilo--card__size__wide{clip-path:polygon(0 0,calc(100% - 87px) 0,100% 48px,100% 100%,0 100%)}}.ilo--card__type__factlist.ilo--card__size__narrow{--max-width:20.0964630225rem;padding:2.1436227224rem 1.2861736334rem 2.5723472669rem;clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%)}.ilo--card__type__factlist.ilo--card__theme__dark{border-bottom:.1607717042rem solid #fa3c4b}.ilo--card__type__factlist.ilo--card__theme__dark .ilo--card--title,.ilo--card__type__factlist.ilo--card__theme__dark .ilo--list__item{color:#fff}.ilo--card__type__factlist.ilo--card__theme__dark .ilo--list__item:last-of-type{margin-bottom:0}.ilo--card__type__factlist.ilo--card__theme__dark:focus-within .ilo--card--title,.ilo--card__type__factlist.ilo--card__theme__dark:focus .ilo--card--title,.ilo--card__type__factlist.ilo--card__theme__dark:hover .ilo--card--title{color:#fff}.ilo--card__type__factlist.ilo--card__theme__dark:focus-within .ilo--list__item,.ilo--card__type__factlist.ilo--card__theme__dark:focus .ilo--list__item,.ilo--card__type__factlist.ilo--card__theme__dark:hover .ilo--list__item{color:#fff}.ilo--card__type__factlist .ilo--card--title{color:#2d2d2d;font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;margin-bottom:1.1476152197rem}@media screen and (min-width:1024px){.ilo--card__type__factlist .ilo--card--title{font-size:29.16px;letter-spacing:-.035em;line-height:36.45px;margin-bottom:1.4315916399rem}}

package/dist/components/featurecard/featurecard.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--card__type__feature{--max-width:22.0793140407rem;border-bottom:.1607717042rem solid #b8c4cc;display:flex;margin-top:0;position:relative}.ilo--card__type__feature.ilo--card__theme__dark{border-bottom:.1607717042rem solid #fa3c4b}.ilo--card__type__feature.ilo--card__theme__dark .ilo--link-list{border-top:2px solid rgba(237,240,242,.25)}.ilo--card__type__feature.ilo--card__theme__dark .ilo--link-list--link{color:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFF' d='M8.638 19.996l-.988-.988L14.657 12 7.65 4.992l.988-.989 7.505 7.5a.702.702 0 0 1 0 .995l-7.505 7.498z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--card__type__feature.ilo--card__theme__dark .ilo--link-list--link{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFF' d='M7.9 12.5l-.2-.2c0-.1-.1-.2-.1-.3s0-.2.1-.3c0-.1.1-.2.2-.2L15.4 4l1 1-7 7 7 7-1 1-7.5-7.5z'/%3E%3C/svg%3E")}.ilo--card__type__feature.ilo--card__theme__dark:focus-within .ilo--link-list--link,.ilo--card__type__feature.ilo--card__theme__dark:focus .ilo--link-list--link,.ilo--card__type__feature.ilo--card__theme__dark:hover .ilo--link-list--link{color:#1e2dbe;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M8.638 19.996l-.988-.988L14.657 12 7.65 4.992l.988-.989 7.505 7.5a.702.702 0 0 1 0 .995l-7.505 7.498z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--card__type__feature.ilo--card__theme__dark:focus-within .ilo--link-list--link,[dir=rtl] .ilo--card__type__feature.ilo--card__theme__dark:focus .ilo--link-list--link,[dir=rtl] .ilo--card__type__feature.ilo--card__theme__dark:hover .ilo--link-list--link{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M7.9 12.5l-.2-.2c0-.1-.1-.2-.1-.3s0-.2.1-.3c0-.1.1-.2.2-.2L15.4 4l1 1-7 7 7 7-1 1-7.5-7.5z'/%3E%3C/svg%3E")}.ilo--card__type__feature picture:before{transition-property:opacity;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card__type__feature:focus,.ilo--card__type__feature:focus-within,.ilo--card__type__feature:hover{background-color:#fff;border-bottom:.1607717042rem solid #1e2dbe;filter:drop-shadow(0 -4px 16px rgba(30,45,190,.05)) drop-shadow(0 10px 20px rgba(30,45,190,.08)) drop-shadow(0 4px 8px rgba(30,45,190,.05)) drop-shadow(0 .8px 1.6px rgba(30,45,190,.04))}.ilo--card__type__feature:focus-within picture:before,.ilo--card__type__feature:focus picture:before,.ilo--card__type__feature:hover picture:before{opacity:.4;z-index:1;transition-property:opacity;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card__type__feature:focus-within .ilo--card--picture,.ilo--card__type__feature:focus .ilo--card--picture,.ilo--card__type__feature:hover .ilo--card--picture{filter:saturate(0)}.ilo--card__type__feature .ilo--link-list{border-top:.1071811361rem solid #edf0f2;margin-left:-1.2861736334rem;margin-right:-1.2861736334rem;position:relative;z-index:2}.ilo--card__type__feature .ilo--link-list--link,.ilo--card__type__feature .ilo--link-list--link:hover{border-bottom:none;padding-inline:1.2861736334rem .4287245445rem}.ilo--card__type__feature.ilo--card__size__narrow .ilo--card--wrap{display:flex;flex-wrap:wrap;width:100%}.ilo--card__type__feature.ilo--card__size__narrow .ilo--card--content,.ilo--card__type__feature.ilo--card__size__narrow .ilo--card--image--wrapper{width:100%}.ilo--card__type__feature.ilo--card__size__fluid,.ilo--card__type__feature.ilo--card__size__wide{--max-width:40.4072883173rem}@media screen and (min-width:610px){.ilo--card__type__feature.ilo--card__size__fluid .ilo--card--wrap,.ilo--card__type__feature.ilo--card__size__wide .ilo--card--wrap{flex-direction:row}.ilo--card__type__feature.ilo--card__size__fluid .ilo--card--content,.ilo--card__type__feature.ilo--card__size__wide .ilo--card--content{display:flex;flex-direction:row;flex-wrap:wrap;position:relative;width:50%}.ilo--card__type__feature.ilo--card__size__fluid .ilo--card--image--wrapper,.ilo--card__type__feature.ilo--card__size__wide .ilo--card--image--wrapper{width:50%}.ilo--card__type__feature.ilo--card__size__fluid .ilo--card--image,.ilo--card__type__feature.ilo--card__size__wide .ilo--card--image{object-fit:cover}.ilo--card__type__feature.ilo--card__size__fluid .ilo--card--date,.ilo--card__type__feature.ilo--card__size__wide .ilo--card--date{align-self:flex-end;width:100%}.ilo--card__type__feature.ilo--card__size__fluid .ilo--card--eyebrow,.ilo--card__type__feature.ilo--card__size__fluid .ilo--card--title,.ilo--card__type__feature.ilo--card__size__wide .ilo--card--eyebrow,.ilo--card__type__feature.ilo--card__size__wide .ilo--card--title{width:100%}.ilo--card__type__feature.ilo--card__size__fluid .ilo--link-list,.ilo--card__type__feature.ilo--card__size__wide .ilo--link-list{width:calc(100% + 48px);align-self:flex-end}}.ilo--card__type__feature .ilo--card--wrap{display:flex;flex-direction:column;width:100%}.ilo--card__type__feature picture{display:flex;height:100%;position:relative}.ilo--card__type__feature picture:before{background-color:#1e2dbe;content:"";display:block;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .15s ease-in-out;width:100%;z-index:-1}.ilo--card__type__feature picture img{object-fit:cover}.ilo--card__type__feature .ilo--card--content{display:flex;flex:1 1 auto;flex-direction:column;padding:1.2861736334rem 1.2861736334rem .4287245445rem}.ilo--card__type__feature.ilo--card__linklist .ilo--card--content{padding-bottom:0}.ilo--card__type__feature .ilo--card--title{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;margin-bottom:1.2861736334rem;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700;flex:1}.ilo--card__type__feature .ilo--card--eyebrow{font-size:14.93px;letter-spacing:normal;line-height:19.71px;margin-bottom:.3376482577rem}.ilo--card__type__feature .ilo--card--date{margin-bottom:1.7148981779rem;margin-top:auto}

package/dist/components/fieldset/fieldset.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--fieldset{box-sizing:border-box;appearance:none}.ilo--fieldset--legend-wrapper{margin-bottom:.8717716645rem}.ilo--fieldset--legend-wrapper .ilo--tooltip--wrapper{top:.1071811361rem}.ilo--fieldset--legend{font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700;font-size:16px;letter-spacing:-.02em;line-height:21.6px}.ilo--fieldset--direction__column>.ilo--fieldset--elements{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:.8717716645rem}.ilo--fieldset--direction__row>.ilo--fieldset--elements{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:row;gap:.8717716645rem}.ilo--fieldset--direction__row-reverse>.ilo--fieldset--elements{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:row-reverse;gap:.8717716645rem}.ilo--fieldset--direction__column-reverse>.ilo--fieldset--elements{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column-reverse;gap:.8717716645rem}.ilo--fieldset--wrap__nowrap>.ilo--fieldset--elements{flex-wrap:nowrap}.ilo--fieldset--wrap__wrap>.ilo--fieldset--elements{flex-wrap:wrap}.ilo--fieldset--wrap__wrap-reverse>.ilo--fieldset--elements{flex-wrap:wrap-reverse}.ilo--fieldset--wrap__reverse>.ilo--fieldset--elements{flex-wrap:reverse}.ilo--fieldset--helper,.ilo--fieldset__error{font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-size:11.94px;letter-spacing:normal;line-height:16.24px;margin-top:.4832142725rem}.ilo--fieldset--helper{color:#6d6d6d}.ilo--fieldset__error{color:#c8303c}.ilo--fieldset__disabled{opacity:.5;pointer-events:none}.ilo--fieldset .ilo--tooltip--wrapper{margin-left:.2143622722rem}

package/dist/components/file-upload/file-upload.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--file-upload--input{order:3;background-color:#fff;border:1.5px solid #b8c4cc;color:#230050;content:attr(data-label);display:inline-block;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700;border-bottom-left-radius:2px;border-bottom-right-radius:2px;border-top-left-radius:2px;border-top-right-radius:2px;padding:7px 18px;font-size:16px;letter-spacing:-.02em;line-height:21.6px}.ilo--file-upload--input input{visibility:hidden;color:transparent;width:0}.ilo--form__theme__dark .ilo--file-upload--input{color:#230050}.ilo--file-upload--input:hover{background-color:#ebf5fd;border:1.5px solid #1e2dbe;cursor:pointer;color:#1e2dbe;outline:0}.ilo--file-upload--input:focus{background-color:#fff;border:1.5px solid #1e2dbe;color:#230050;outline:0}.ilo--file-upload--input:focus-visible{outline:0}.ilo--file-upload--input:active{background-color:#1e2dbe;border:2px solid #1e2dbe;color:#ebf5fd}.ilo--file-upload--input:disabled{opacity:.45;pointer-events:none}.error .ilo--file-upload--input,.ilo--file-upload--input.error,.ilo--file-upload--input:invalid{background-color:#fff;border-bottom:.1071811361rem solid #b8c4cc;border-left:.1607717042rem solid #c8303c;border-right:.1071811361rem solid #b8c4cc;border-top:.1071811361rem solid #b8c4cc}.ilo--file-upload--list{order:4;display:flex;flex-flow:column;padding-top:.4287245445rem;gap:.4287245445rem}.ilo--file-upload--list-item{display:block;background-color:#edf0f2;border-bottom:.1071811361rem solid #edf0f2;border-left:.1607717042rem solid #230050;border-right:.1071811361rem solid #edf0f2;border-top:.1071811361rem solid #edf0f2;box-sizing:border-box;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:500;font-size:16px;letter-spacing:-.02em;line-height:21.6px;height:2.5723472669rem;outline:0;padding:.6430868167rem .6430868167rem .857449089rem}

package/dist/components/fileupload/fileupload.behavior.js

@@ -0,0 +1 @@
+!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";function e(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function t(t,n){for(var r=0;r<n.length;r++){var o=n[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,e(o.key),o)}}function n(e){return function(e){if(Array.isArray(e))return r(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return r(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o="change",i=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.element=t,this.prefix=this.element.dataset.prefix,this.init()},r=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable(),this}},{key:"cacheDomReferences",value:function(){return this.container=this.element.parentElement.parentElement,this.formControl=this.container.parentElement,this}},{key:"setupHandlers",value:function(){return this.onChange=this.onChange.bind(this),this}},{key:"enable",value:function(){var e=this;return this.element.addEventListener(o,(function(t){return e.onChange(t)})),this}},{key:"formatBytes",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;if(!+e)return"0 Bytes";var n=t<0?0:t,r=Math.floor(Math.log(e)/Math.log(1024));return"".concat(parseFloat((e/Math.pow(1024,r)).toFixed(n))," ").concat(["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][r])}},{key:"onChange",value:function(){var e=this,t="".concat(this.prefix,"--file-upload--list"),r=this.formControl.querySelector(".".concat(t));r&&r.remove(),(r=document.createElement("ul")).classList.add(t),this.formControl.appendChild(r);var o="";return n(this.element.files).forEach((function(t){var n=e.formatBytes(t.size);o+=e.template(t.name,n)})),r.innerHTML=o,this}},{key:"template",value:function(e,t){return'<li class="ilo--file-upload--list-item">'.concat(e," (").concat(t,")</li>")}}],r&&t(e.prototype,r),i&&t(e,i),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,r,i}();Drupal.behaviors.fileupload={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="FileUpload"]'),(function(e){new i(e)}))}}}));

package/dist/components/fileupload/fileupload.twig

@@ -0,0 +1,20 @@
+{# fileupload.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set baseClass = 'ilo' ~ '--file-upload' %}
+{% set fileUploadClasses = [baseClass] %}
+{% set inputClass = baseClass ~ '--input' %}
+
+{% if error %}
+	{% set fileUploadClasses = fileUploadClasses|merge(['error']) %}
+{% endif %}
+
+{% block formfield %}
+	<div class="{{ fileUploadClasses|join(' ') }}">
+		<label class="{{ inputClass }}">
+			{{ placeholder }}
+			<input id="{{ id|default(name) }}" name="{{ name }}" {% if disabled %} disabled {% endif %} {% if multiple %} multiple {% endif %} placeholder="{{ placeholder }}" {% if required %} required {% endif %} type="file" data-label="{{ placeholder }}" aria-describedby="{{ ariaDescribedBy }}" {% if accept %} accept="{{ accept }}" {% endif %} data-loadcomponent="FileUpload" data-prefix="ilo"/>
+		</label>
+	</div>
+{% endblock %}